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

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

ブレークポイントを設定する
Resumeを実行する
Step Overを実行する
Step Intoを実行する
Step Outを実行する
Stepを実行する
変数を確認する
DOMの変更に対してブレークポイントを設定する
hoverなどの疑似クラスをクリックした時のCSSを確認する

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

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

手順

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

２．F12キーを押します。Chrome DevToolsを開きます。

３．Chrome DevToolsの「sources」をクリックします。

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

５．ブラウザを再読込して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と同じ箇所で止まります。ブレークポイントではない箇所でも止まります。
１行ずつ進めていくことができます。
注：このアイコンは、googleのリンクに記載がありませんでした。新しい機能？

変数を確認する

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

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

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

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

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

手順

１．Elementsをクリックします。
２．変更したい箇所で右クリックします。
３．「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

hoverなどの疑似クラスをクリックした時のCSSを確認する

hoverなどの疑似クラスをクリックした時のCSSを確認する方法です。

１．①のエレメントを選択するアイコンをクリックし、hoverする箇所をクリックして対象のCSSを表示します。

２．クリックした箇所のCSSの情報が表示されている状態です。
①はaタグの文字の色が表示されています。
②の:hovという箇所をクリックして「Force element state」というタブを表示します。

３．「Force element state」というタブが表示された状態です。
①の:hoverにチェックを入れるとhoverの時のCSSの状態が表示されます。
②は、上記で表示されていたaタグの文字の色に取り消し線が入っています。
③は、文字の色と下線のCSSが入ったことを示しています。
:hoverのチェックを外すと上記の手順2の状態(文字の色が青)に戻ります。

４．以下は、:hoverにチェックを入れた時の画面の状態です。文字が赤で下線がついています。

他の擬似クラスとして、:active、:focus、:visited、:focus-withinも確認できます。