ChromeでのJavaScriptのデバッグ方法(ブレークポイントでの逐次実行)

JavaScriptのデバッグって難しいなーと思っていたんですが、先日、デバッグしながら実行するTipsを見つけました。
結構複雑なJavaScriptでも逐次デバッグしながら実行して振る舞いを確認できるので、非常に便利なので共有します。

今のWebシステムって、いろんなJavaScriptを使ってるんですよね。
jQueryとか多用されていて、イベントハンドラも数多くセットされており、どのタイミングで何が動くか把握するのが大変。。

そういう場合は、ブレークポイントを仕込んでおいて、そこの箇所を通ったら止まるようにしておくと分かりやすいんですが、JavaScriptって、ブラウザ側にダウンロードされて毎回生成されるので、ソースにブレークポイントを仕込むことができません。
なので、JavaScriptをブレークポイントによる逐次実行するには、ブラウザ側で仕込むのが便利です。

今はどのブラウザもDeveloperToolみたいなのが付いていて、デバッグにも便利ですが、今回はChromeでのやり方をご説明します。

まず、デバックしたい画面を開き、右クリックして「検証」を押すか、「F12」でデベロッパーツールを起動します。
そして、デバッグしたいページを開きましょう。

さて、ここからがポイント。

「Sources」タブから、該当のjsファイルを選んでもいいですが、複雑なシステムだと、そう単純ではありません。中にはキャッシュが動的に生成されていたりするので。

そういう場合には、「Network」タブから入ると便利です。

「Network」タブでは、画面の描画に必要なリソース(画像やjsファイルなど)がどこからどのくらいの時間でダウンロードされたかが分かります。

ここで、「Indicator」という項目がありますので、ここを参照すると、どのjsファイルでそれが要求されたかなどがわかります。
ここで、めぼしいjsファイルをクリックすると、そのJavaScriptファイルが開くので、それに対してブレークポイントをセットできます。

jQueryなどは、難読化されて、minという小さなファイルになっていることが多いですが、このように同じ行の中で複数のメソッドがある場合でもそれぞれに対してブレークポイントをはれるので、デバッグには非常に便利です。

ぜひお試しください！