https://cysec148.hatenablog.com/entry/2025/08/21/075947

Hello there, ('ω')ノ

Web開発や既存サイトの調査をしていると、「JavaScriptを1ステップずつ実行したい」「次のブレークポイントまで進めたい」「途中の行まで一気に進めたい」「ソース内を検索したい」といったシーンはよくあります。この記事では、ブラウザの開発者ツール（DevTools）を使った実践的なデバッグ手法を整理しました。

1. JavaScriptを1ステップずつ実行する方法

DevToolsの基本操作

DevToolsを開く
- Windows/Linux: F12 または Ctrl + Shift + I
- Mac: Cmd + Opt + I
「Sources」タブ（Chrome/Edge） または 「Debugger」タブ（Firefox） を開く
- 読み込まれているJSファイル一覧が見える
ブレークポイントを設定
- 行番号をクリックすると「●」が付き、そこで実行が止まる
ステップ実行の操作
- ▶ 再開 (Resume)
- ⏭ ステップオーバー（次の行へ）
- ⬇ ステップイン（関数内部に入る）
- ⬆ ステップアウト（関数から抜ける）

`debugger;` を使う方法

function test() {
  let x = 10;
  debugger; // ここで止まる
  let y = x + 5;
  console.log(y);
}
test();

コードに debugger; を仕込むと、その行で自動的に停止するので便利です。

2. 次のブレークポイントまで移動する方法

1ステップずつではなく「次のブレークポイントまで一気に進めたい」場合は、以下を使います。

F8（Windows/Linux）または Cmd + \（Mac）
もしくは DevTools上部の 「▶ Resume」ボタン

これで現在の位置から次のブレークポイントまで進み、再び停止します。

3. 任意の行まで一気にステップする方法

「ブレークポイントをわざわざ設定するまでもないが、この行まで進みたい」というときに便利です。

Continue to here（ここまで実行）

ソースコードを表示している行番号を 右クリック
「Continue to here（ここまで実行）」 を選択

👉 すると、その行を一時的な停止ポイントとして一気に実行し、指定行で止まります。

一時的ブレークポイントを使う方法

任意の行に一時的にブレークポイント（●）を打ち、F8で再開
止まったらブレークポイントを外す

4. ソースコード内を検索する方法

デバッグ時には「特定の関数」や「変数」を素早く見つけたい場面も多いです。

ファイル名の検索

Ctrl + P（Macは Cmd + P） 👉 読み込まれているJSファイル一覧からファイルを検索して開ける

ソースコード内の検索

Ctrl + F（Macは Cmd + F） 👉 現在開いているファイル内でキーワードを検索

プロジェクト全体の検索

Ctrl + Shift + F（Macは Cmd + Opt + F） 👉 読み込まれているすべてのソースコードから検索可能 👉 minifyされている場合は「Pretty Print（ソース整形）」を使うと見やすい

まとめ

1ステップ実行 → ブレークポイント＋ステップボタン／debugger;
次のブレークポイントまで進める → F8 または Resume
任意の行まで進める → 「Continue to here」
ソース検索 → ファイル検索（Ctrl+P）、ファイル内検索（Ctrl+F）、全体検索（Ctrl+Shift+F）

DevToolsをうまく活用すれば、複雑なJavaScriptの動作も効率よく調査できます。

Best regards, (^^ゞ