【JavaScript】Chrome Developer Toolsを使ったデバッグ入門｜Flaskアプリでの実践

はじめに

本記事では、Google ChromeのDeveloper Toolsを使って
JavaScriptをデバッグする方法をまとめます。

FlaskアプリにJavaScriptを組み込んだ際、
ブラウザ上でのみ発生する挙動の確認や変数の追跡に
Developer Toolsを実際に活用したため、その手順を記録します。

VSCodeのデバッグ機能ではなくブラウザを推奨する理由
VSCodeでも同様のデバッグは可能ですが、
デバッグ中に変数の値を一時的に書き換えた場合、
元の値に戻し忘れるリスクがあります。
ブラウザのDeveloper Toolsはページをリロードすれば
すべてリセットされるため、安全に確認作業が行えます。

実行環境

項目	内容
ブラウザ	Google Chrome
対象	FlaskアプリのJavaScript

---

1. Developer Toolsを開く

OS	ショートカット
Windows / Linux	Ctrl + Shift + I
Mac	Command + Shift + I

または画面右クリック→「検証」でも開けます。

---

2. ブレークポイントによるデバッグ

特定の行で処理を一時停止して、変数の状態を確認する方法です。

1. Developer Toolsの**「Sources」タブ**を開く
2. 左側のファイルツリーからデバッグしたいJavaScriptファイルを選択
3. 停止させたい行番号をクリックしてブレークポイントを設定（青い丸が表示される）
4. ページを操作してその行に到達すると処理が一時停止する

停止中にできること

操作	場所	内容
変数の確認	右側「Scope」セクション	ローカル・グローバル変数の現在値を確認
変数の一時変更	変数をダブルクリック	値を書き換えて挙動を確認（リロードで元に戻る）
次の行へ進む	F10 / Step over	関数に入らずに次の行へ
関数の中へ入る	F11 / Step into	関数の内部処理を追跡
ブレークポイント解除	青い丸を再クリック	ブレークポイントを削除

---

3. debuggerステートメント

コードに直接debugger;を書くことで、
その行に到達したタイミングで自動的に処理が一時停止します。

function calcTotal(x, y) {
    debugger; // ここで一時停止。xとyの値をScopeで確認できる
    return x + y;
}

ブレークポイントとの使い分け

• ブレークポイント：ファイルを都度開いて設定する手間があるが、コードを変更しない
• debugger;：コードに直接書くため素早く設定できる。投稿前・本番前に必ず削除すること

---

4. Consoleタブでの確認

Sourcesタブほど厳密ではなく、手軽に値を確認したい場合は
console.log()をコードに仕込む方法が便利です。

function calcTotal(x, y) {
    console.log("x:", x, "y:", y); // Consoleタブに出力される
    return x + y;
}

Developer Toolsの**「Console」タブ**を開くと出力が確認できます。

console.log()も本番前に削除してください。
セキュリティ上、内部の変数名や値がブラウザで丸見えになります。

---

まとめ

手法	向いているケース
ブレークポイント	処理の流れを丁寧に追いたい場合
debugger;	特定の関数に素早くブレークを仕込みたい場合
console.log()	値の確認だけ手軽に行いたい場合

さいごに

Flaskアプリでは、サーバー側（Python）とクライアント側（JavaScript）の
両方でバグが発生し得ます。
Developer Toolsでクライアント側に切り分けてから
Pythonのデバッグに移る流れが効率的です。