プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。

JavaScript Visualizerの使い方

実行中です。

実行速度が指定でき、左側に書いたコードを実行してくれます。

thisの内容など変数も確認できます。

JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。

JavaScript VisualizerはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

JavaScript Visualizer tylermcginnis/javascriptvisualizer: A tool for visualizing Execution Context, Hoisting, Closures, and Scopes in JavaScript.