Chrome DevToolsでできる！JavaScriptのデバッグテクニック集

ChromeでJavaScriptのコードからブレークポイントを設定する方法

Chrome DevToolsを使って、JavaScriptコードから直接ブレークポイントを設定することができます。これは、コードの実行を特定の行で一時停止し、変数の値や実行フローを確認するのに役立ちます。

手順

1. デベロッパーツールの表示

   • キーボードショートカット： Ctrl + Shift + I (Windows, Linux) または Cmd + Option + I (Mac)
   • 右クリックメニュー： ページ上の任意の場所をクリックしてコンテキストメニューを開き、「検査」を選択します。

3. ブレークポイントを設定したいコードを開く

   • 左側のファイルツリーから、デバッグしたいJavaScriptファイルを選択します。
   • 該当するファイルがまだ開いていない場合は、URLバーにファイルのURLを入力して開きます。

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

   • ソースコードエディタの左側にある行番号領域をクリックします。クリックした行にブレークポイントが設定されます。
   • または、debugger; ステートメントをコードの行に挿入します。
6. • コードの実行がブレークポイントで一時停止します。
   • コールスタック、変数、スコープなどの情報がデベロッパーツールウィンドウに表示されます。
   • ステップ実行、ブレークポイントの削除、変数の編集など、デバッグ操作を実行できます。

補足

• 条件付きブレークポイントを設定することもできます。ブレークポイントを設定する際に条件式を指定し、その式が真の場合のみブレークポイントが有効になります。
• ソースマップが有効な場合、ブレークポイントは元のソースファイルの行番号で設定されます。
• Chrome DevToolsは、JavaScriptだけでなく、HTML、CSS、ネットワークリクエストなどもデバッグできます。

サンプルコード：JavaScriptのコードからブレークポイントを設定

function greetUser(name) {
  console.log("こんにちは、" + name + "さん！");

  // ブレークポイントを設定
  debugger;

  if (name === "Alice") {
    console.log("Aliceさん、ようこそ！");
  }
}

greetUser("Bob"); // "こんにちは、Bobさん！" と出力
greetUser("Alice"); // "こんにちは、Aliceさん！"、"Aliceさん、ようこそ！" と出力

このコードでは、greetUser 関数内に2つのブレークポイントを設定しています。

1. 1行目の debugger; ステートメント：この行に到達すると、コードの実行が一時停止し、デベロッパーツールウィンドウが表示されます。
2. if ステートメント内の console.log ステートメント：name 変数が "Alice" の場合のみ、この行でブレークポイントが有効になります。

このコードを実行すると、以下の結果が出力されます。

こんにちは、Bobさん！
[ブレークポイントに到達]
Aliceさん、ようこそ！

最初のブレークポイントは greetUser("Bob"); 行で実行され、2番目のブレークポイントは greetUser("Alice"); 行で実行されます。

ChromeでJavaScriptのコードからブレークポイントを設定するその他の方法

コンソールパネルを使用する

1. デベロッパーツールのコンソールパネルを開きます。
2. コンソールパネルにソースコードへのリンクが表示されます。
3. リンクをクリックすると、ソースコードエディタが開き、ブレークポイントが設定されます。

イベントリスナーブレークポイントを使用する

1. 「Event Listener Breakpoints」タブを選択します。
2. ブレークポイントを設定したいイベントリスナーを選択します。
3. 「Add breakpoint」ボタンをクリックします。

Chrome拡張機能を使用する

いくつかのChrome拡張機能は、JavaScriptのデバッグを容易にする追加機能を提供しています。

これらの方法は、特定の状況で役立つ場合があります。

例

• コンソールパネルを使用して、特定の関数が呼び出されるたびにブレークポイントを設定したい場合。
• イベントリスナーブレークポイントを使用して、DOMイベントの処理をデバッグしたい場合。
• Chrome拡張機能を使用して、より高度なブレークポイント機能を利用したい場合。

最適な方法は、個々のニーズと好みによって異なります。