[DevTools] 入門講座 #03：Sourcesパネル完全ガイド！ブレークポイント、ステップ実行、リアルタイム編集

🛠 はじめに：DevToolsだけでコードを追い詰める世界

フロントエンドの開発者であれば、誰もが一度はお世話になっているであろう Chrome DevTools（デベロッパーツール） 。

その中でも、普段は「Console」や「Elements」パネルばかり使っているけど、
「Sources パネル」って開いたことあるけど、ちゃんと使いこなせてないかも…？
という人は意外と多いのではないでしょうか。

💡 実はこのパネル、VSCodeと遜色ないレベルでコードを追跡＆デバッグできます。

  • 実行中のコードにブレークポイントを設定して、ステップ実行
  • ウォッチ式やコールスタックを使って、変数の中身をリアルタイムで監視
  • DOMイベントやPromiseチェーンの非同期処理もトレース可能
  • さらには、その場でコードの一部を書き換えて再実行なんてことも

実際、私もある時、ZIPファイル読み込みまわりのバグで詰まっていた際、
DevToolsのSourcesパネルでしか見抜けない非同期バグの存在 に気付き、そこから使用頻度が一気に上がりました。

この記事では、そんなChrome DevTools の「Sources パネル」 にフォーカスして、
JavaScriptのデバッグにどれだけ役立つか、そして、どう使えばいいのか を、
初心者にもわかりやすく、かつ現場視点でお伝えしていきます。

🔍 Sources パネルの基本構造：3つのエリアを理解しよう

Chrome DevTools の「Sources」パネルを開くと、画面は大きく3つのエリアに分かれています。 ここを把握するだけでも、デバッグ効率が一気に上がります。

🗂️ 1. 左：ファイルナビゲーター（Navigator）

ここには現在読み込まれている HTML・CSS・JavaScript などの 全てのリソース が一覧表示されます。

  • localhost などのドメインごとにツリー表示される
  • ソースマップが有効な場合は、元のファイル構造 で表示されることも
  • 自分で作成したファイル以外に、ライブラリや拡張のスクリプトも含まれる

🔧Tips： 右クリック → Reveal in Sources panel で Console から直接ファイルを開くことも可能！

🧾 2. 中央：コードエディタ

選択したファイルの ソースコードを表示・編集 するエリアです。

  • JavaScript の中身を確認・編集可能
  • ブレークポイントの設定もここで行います（行番号クリックでOK）
  • 非同期処理などは行単位で停止し、ステップ実行もここで進行
  • ライブ編集が可能：一時的に書き換えてその場で挙動を試せる！

✍️ 編集してもリロードで元に戻るので、試験的な改造に最適。

🧠 3. 右：デバッグペイン（Debugger Pane）

ここは、実行中のコードの状態をリアルタイムに観察するためのエリア です。

  • スコープ（Scope） ：現在の関数・変数の値を一覧で表示
  • コールスタック（Call Stack） ：現在の関数呼び出しの履歴
  • ウォッチ式（Watch） ：監視したい変数や式を追加可能
  • ブレークポイント一覧 ：条件付きやDOMイベントにも対応

🔎 スコープ変数を展開して、内部オブジェクトの階層構造をその場で調査可能です。

💬 補足：Pauseボタンとスローモード

パネル上部の ▶️ 一時停止ボタンをクリックすれば、任意のエラーや例外発生時に自動で止まるモードにも。

この3つのエリアを頭に入れておけば、 次に解説する 「ブレークポイントを使った実践的なデバッグ」 にスムーズに進めます。

🛑 ブレークポイントを使ってみる：コードを止めて、見て、理解する

「バグの原因がわからない…」 そんな時こそ、ブレークポイント（breakpoint） の出番です。 これは、コードの途中で実行を一時停止 させ、内部状態をじっくり観察するための機能です。

✅ ブレークポイントの基本操作

  1. Sources パネルを開く
  2. 左のナビゲータから調査したい .js ファイルをクリック
  3. 中央のコードエディタで止めたい行番号をクリック 　→ 青いマークが付き、ブレークポイントが設定される
  4. 該当コードが実行されると、その手前で実行が止まる！

💡「今、何が入ってる？」「どこまで実行された？」を確実に確認できます。

🔄 ステップ実行で「追えるコード」に

実行が止まったら、右上のコントロールボタンで1行ずつ進めることができます：

ボタン 機能 説明
▶️ 続行 次のブレークポイントまで進める
⬇️ ステップイン 関数の中に入る
⬇️⤵️ ステップオーバー 関数呼び出しをスキップして次の行へ
⬆️ ステップアウト 関数の外へ抜ける

🔍 実行中の状態を確認する

ブレーク中に見られるもの：

  • 📦 スコープ（今の関数やグローバルの変数）
  • 👁️ Watch（監視したい変数や式を手動で追加可能）
  • 📜 Call Stack（どの関数から呼ばれたか）

例：

function greet(name) {
  let message = `Hello, ${name}`;
  console.log(message); // ← ここにブレークポイントを付けて確認
}
greet("lain");

👀 name や message の中身を確認しながら、関数の流れを完全に把握できます！

✨ 条件付きブレークポイントも可能！

行番号を右クリック → 条件付きブレークポイント 例：user.id === 0 のときだけ止めたい！などにも対応。

これだけで、「なんとなく書いたけど動かない」コードが、“見えるコード”になります。

次回は、ウォッチ式や例外ブレークなど、より実践的な観察方法に踏み込んでいきます！

👁️ ウォッチ式と例外検出の活用：バグの“気配”を先に知る方法

Sourcesパネルのブレークポイントと並んで、“今、何が起きているのか”を把握するための2大機能 がこちら：

  • ウォッチ式（Watch Expressions）
  • 例外時の自動停止（Pause on Exceptions）

どちらも**“問題の兆候”を事前にキャッチできる**、極めて強力なツールです。

🔭 ウォッチ式（Watch Expressions）とは？

ウォッチ式は、関心のある変数や式を常にモニターできる機能 です。 コードが止まっていなくても値の変化を追えるため、ロジックミスやタイミングバグの発見 に有効です。

使い方

  1. Sourcesパネルの右側「Watch」セクションを開く

  2. + を押して、任意の変数や式を追加する

    • 例：currentAsset.title や file.name

  3. 実行がブレークした時、その値がリアルタイムで表示される！

🧠 配列やオブジェクトのプロパティも展開して見られます。

⚠️ Pause on Exceptions（例外で停止）

コードが throw を起こしたり、未捕捉のエラーが出た時、自動的に止まってくれるモード です。

使い方

  • Sources パネルの左上にある ⏸️「Pause on Exceptions」ボタンをONにする
  • サブモードで「Caught exceptions（try…catchで捕捉済み）」を含めるか選べる

例：

try {
  throw new Error("なにかおかしい");
} catch (e) {
  console.log("例外キャッチ", e);
}

このようなコードでも、「Caught exceptions」にチェックを入れておけば、 throwの直前で止まって内部状態を確認できます！

✨ 応用例：非同期処理の途中変数を監視

async function loadData() {
  const data = await fetch(url);
  const json = await data.json(); // ← ここで止めて json をウォッチ！
  renderUI(json);
}
  • json に何が入ってるか
  • renderUI に渡す前の状態はどうか

ブレーク + ウォッチ で、見えなかった内部が 手に取るように観察可能 になります。

この2つの機能が使いこなせるようになると、 コードは“暗号”ではなく、“ストーリーボード”のように見えてきます。

✏️ リアルタイム編集（ライブ編集）と即反映の注意点

DevTools の Sources パネルには、まるでエディタのようにJavaScriptファイルをその場で書き換える機能 が備わっています。 これは、素早くアイデアを試したり、ちょっとした修正を確認するには非常に便利です。

🧪 「試してみるだけ」なら最強の開発補助ツール

ライブ編集の手順

  1. Sources パネルで任意の .js ファイルを開く
  2. 編集したい行をクリック → キーボードで直接編集
  3. Ctrl+S（またはCommand+S）で保存
  4. ブレークポイントを置いて、動作確認！

🧠 編集した内容はすぐに反映され、再読み込みしない限りは有効 です。

🎯 使いどころ例

  • console.log() を即時に挿入 → 状態確認してすぐ削除
  • if (debug) → if (true) に変えてデバッグモードを強制オン
  • ループの中の変数の処理を一時的にコメントアウトして動作を検証

⚠️ 注意点：「保存」は本当の保存ではない

これは一時的なブラウザ上の仮保存 にすぎません。

状況 結果
編集→保存→リロード 変更は失われる
編集→再実行 一時的には反映される
DevToolsを閉じる 内容はクリアされることが多い

💥 つまり、「本番コードに書き戻されるわけではない」ことに注意！

📥 ワークスペース機能もある（上級者向け）

DevToolsには、ローカルのVSCodeプロジェクトと連携して 、 実際のファイルへ保存する「Workspace機能」もあります。

が、これは設定や権限の調整が必要でやや玄人向けです。 まずは「試す→反映してコピペ→VSCodeへ戻す」でOK！

✅ おすすめの使い方：仮実装 or プロトタイピング

DevTools上で：

  • 変数のロジックを組み替えて動作検証
  • UI系処理の値だけ書き換えて演出調整
  • エラーハンドリングの発生条件を手動で作る

など、一時的に“未来のコード”を試せる実験場 として活用するのがベストです。

🧠 補足：CSSやHTMLのライブ編集も可能

  • Elementsパネルで HTML / CSS を書き換えて即確認
  • スタイルや構造の微調整に最適
  • もちろんリロードで消えるが、感覚で学べる実装プロトタイプ として優秀

「修正してから保存」ではなく、「試してから反映する」 という思考が自然になります。 これが Sources パネル最大の魅力かもしれません。

🧪 実際にどう使ってるか？体験談：ZIP読み込みのバグ調査に活用

私自身、Sourcesパネルの真価に気づいたのは、
ZIPファイルの読み込み処理でバグが出た時でした。

🧩 症状

<input type="file"> から ZIP を選んでも何も反応がない

もしくは、同じ ZIP を2回連続で選んだ時に処理が多重実行される

Console でログは出てるが、肝心の非同期処理が どこで止まっているか見えない

この時点では、何が原因かまったく掴めませんでした。

🔦 Sourcesパネルでやったこと

zipInput.addEventListener(“change”, async (e) => {…} の中にブレークポイントを設置

ファイルを選んで、await loadZipFile(file) の手前で停止

スコープを確認しながら file.name や imageMap の中身をチェック

すると、なぜか毎回処理が2回呼ばれていることに気付く

💥 原因の発見

ブレークポイントの中でウォッチ式を追加し、 zipInput にイベントが何個バインドされているか確認

getEventListeners(zipInput) を Console で実行した結果、 → change イベントが複数回登録されていた！

🎯 解決策（その場で即確認）

Sourcesパネルで：

該当行の addEventListener を一時的にコメントアウト

編集して保存（Ctrl+S）

ブレークポイントを通しながら、一度だけ処理されるかを検証

結果、ライブ編集でコードを修正→即再実行→バグ解決を確認 → その後、VSCodeに反映した本番コードを更新。

💡 感じたこと

普段であれば「ファイルの中身おかしい？」「ライブラリが悪い？」と外に原因を求めがちですが、
Sourcesパネルは 「本当にその行が何回呼ばれたか」を目に見える形で証明してくれる 。

まさに「バグの気配を掴むための顕微鏡」みたいな存在でした。

あなたの実装スタイルがどんなに試行錯誤型でも、
Sources パネルがあれば、そのすべての試行が可視化され、意味のある調査になる。

🎯 おわりに：DevToolsはあなたの“もう1つのIDE”

多くのフロントエンド開発者にとって、IDE（統合開発環境）といえば VSCode や WebStorm を思い浮かべるかもしれません。 でも、この記事をここまで読んだあなたには、もうわかっているはずです。

Chrome DevTools は、単なる“検証ツール”ではない。 実行中のコードに入り込める、“もうひとつのIDE” なんだ。

🚀 DevTools × 開発者の進化

Sources パネルを使えば、

  • 実行中のコードの中で一時停止し、
  • 内部状態をウォッチし、
  • 非同期の流れを可視化し、
  • ライブで編集し、反映できる。

つまり、「コードを書く」だけではなく 「コードを観察し、対話し、読み解く力」を磨ける 。

それが DevTools の真の強さです。

🧠 このツールが導いてくれること

コードはただの文字列ではありません。 それはあなたの思考であり、感情であり、時には人生そのものです。

DevTools は、そのコードと正面から対話するための場所 。 表面だけでは見えなかった問題の“根”を照らし、 1行の裏にある意図やミスに、あなた自身が気づく手助けをしてくれます。

🌱 最後に

今、あなたが開発しているアプリやゲーム。 その1行1行に込められたこだわりや情熱は、 きっといつか、誰かの心に届くはずです。

そしてその1px、1stepを整える手助けとして、 DevToolsは今日もブラウザの片隅で、静かにあなたを待っています 。

観察せよ。読み解け。踏み出せ。 あなたのコードの井戸を深く掘るために、DevToolsは今日もそこにある。

🛠️ Chrome DevTools：Sourcesパネルは、もう1つの開発室。 🧭 そして、あなた自身を映し出す鏡かもしれない。

関連リンク