ブラウザの開発者ツールでJavaScriptのデバッグを行う方法を記載します。
これを知っておくと、手軽にJavaScriptの動作確認ができるので便利です。
本記事ではGoogle Chromeを使用しておりますが、FirefoxやMicrosoft Edgeでも同様にできます。
JavaScriptのファイルを開く
デバッグしたいJSを使用している画面をブラウザで開きます。
画面上で「右クリック → 検証」をクリックすると開発者ツールが開きます。
windowsなら「F12キー」、Macなら「option + command + i」でも開けます。
開発者ツール上の「Sources」タブをクリックすると、左エリアに「Page」が表示されます。
「Page」には画面で使用されているファイルが表示されているので、今回デバッグしたいJSのファイルを選択すると、中央エリアに選択したファイルのコードが表示されます。
ブレークポイントを設定する
コード上にブレークポイントを設定することで、設定した箇所で処理の実行を止めることができます。
コードの任意の行番号をクリックすると、行番号が青くなり、ブレークポイントが設定されます。
ブレークポイントは複数設定することもできます。
設定したブレークポイントの一覧は、右エリアの「Breakpoints」で確認できます。
JavaScriptを実行する
JSを実行し、ブレークポイントで処理を止めます。
定義されている変数の一覧が、右エリアの「Scope」に表示されます。
関数内で定義した変数は「Local」に表示されます。
画像では"params"、"msgType"、"msg"を定義しており、止めた時点でのそれぞれの値が表示されています。
処理を進める
ブレークポイントで止めた箇所から処理を進めることで、処理がコード上のどこを通っているか確認できます。
処理の進め方は以下の方法があります。
Resume
止まっていた箇所から次のブレークポイントまで進みます。
以下の画像では、6行目でResumeを実行すると、12行目に進みます。
Step over
止まっていた箇所から1行ずつ進みます。
ただし、関数内部では止まりません。
以下の画像では、9行目でStep overを実行すると、12行目に進みます。
Step into
止まっていた箇所から1行ずつ進みます。
関数内部でも止まります。
以下の画像では、9行目でStep intoを実行すると、18行目に進みます。
Step out
止まっていた箇所から1行ずつ進みます。
ただし、関数内部では止まりません。
関数内部でStep outを実行した場合は、関数外部まで処理が進みます。
以下の画像では、18行目でStep outを実行すると、19行目ではなく、12行目に進みます。
Step
Step intoとほぼ同じ動きになりますが、非同期アクションを無視するといった違いがあるようです。
詳しくは以下の記事が分かりやすかったので参照してください。
基本的なデバッグ操作は以上となります。
参考になれば幸いです。