JavaScript Chromeブラウザでデバッグする方法

Google ChromeブラウザでJavaScriptをデバッグする方法です。
Chrome DevToolsを使用します。

目次

ブレークポイントを設定する

ブレークポイントは、ブレークポイントを設定した箇所でプログラムの進行を止めます。
そのためプログラムの動きを見ながら確認していくことができます。

手順

1.JavaScriptのファイルをChromeブラウザで開きます。

2.F12キーを押します。Chrome DevToolsを開きます。

3.Chrome DevToolsの「sources」をクリックします。

 

4.行番号をクリックすると、ブレークポイントを設定できます。
以下では、3行目と13行目に設定しました。

 

5.ブラウザを再読込してJavaScriptを実行するとブレークポイントで処理が止まります。
以下は、使用したサンプルコードです。

<script>

const a = 2;

const b = test1(a);

function test1(a){
	const c = a + 3;
	return c;
}

console.log(a);// 2
console.log(b);// 5
console.log(b+1);// 6

</script>

 

以下は、「sources」の行でデバッグするときに使用するアイコンです。

Resumeを実行する

Resumeは、ブレークポイントで止まります。それ以外の行では止まりません。
下図の赤枠は止まる箇所です。

 

Step Overを実行する

Step Overは、関数内では止まりません。それ以外の箇所で止まります。
ブレークポイントではない箇所でも止まります。
下図の赤枠は止まる箇所です。

 

Step Intoを実行する

Step Intoは、関数内の行も止まります。
ブレークポイントではない箇所でも止まります。
下図の赤枠は止まる箇所です。

 

Step Outを実行する

Step Outは、関数内で使用すると、関数を抜けて、関数の外の最初の行で止まります。
ブレークポイントではない箇所でも止まります。
下図の赤枠は止まる箇所です。

 

Stepを実行する

Stepは、Step Intoと同じ箇所で止まります。ブレークポイントではない箇所でも止まります。
1行ずつ進めていくことができます。
注:このアイコンは、googleのリンクに記載がありませんでした。新しい機能?

 

変数を確認する

デバッグの確認中に変数の値を確認できます。

1.変数にカーソルをあてると変数の値が表示されます。

 

2.Resume等のアイコンの下にある「Scope」をクリックすると変数の値が表示されます。

 

DOMの変更に対してブレークポイントを設定する

DOMの変更に対してブレークポイントを設定することができます。

手順

1.Elementsをクリックします。
2.変更したい箇所で右クリックします。
3.「Break on」をクリックし以下を選択します。
・Subtree modifications・・・サブツリーの変更
・Attribute modifications・・・属性の変更
・Node removal・・・ノードの削除

以下の図のように設定した場合、<p id="p2">OK・・の箇所でサブツリーの変更が起きるとブレークポイントが設定されているのでプログラムが止まり、「sources」の該当箇所の行が表示されます。

 

以下は、googleのコードをステップ実行する方法のリンクです。
https://developers.google.com/web/tools/chrome-devtools/javascript/step-code?hl=ja

以下は、googleのPause Your Code With Breakpointsのリンクです。
https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints

関連の記事

JavaScriptの動かし方とconsole.logの確認方法
JavaScript consoleオブジェクトのメソッドのサンプル

プログラムでつまったらteratailに登録して質問しましょう!↓↓↓

△上に戻る