デバッグツール比較＆活用 - Chrome DevToolsを使ったJavaScriptデバッグの基本：ステップ実行とブレークポイント活用法

Chrome DevToolsを使ったJavaScriptデバッグの基本：ステップ実行とブレークポイント活用法

Tags: Chrome DevTools, JavaScript, デバッグ, フロントエンド, 開発者ツール

デバッグは、Web開発プロセスにおいて避けては通れない重要な工程です。特にジュニア開発者にとって、発生したバグの原因特定やエラーメッセージの解読は、時に大きな壁となることがあります。効率的なデバッグ手法を身につけることは、開発効率を向上させ、より堅牢なアプリケーションを構築するために不可欠です。

この記事では、Web開発で広く利用されているChromeブラウザに標準搭載されている開発者ツール（Chrome DevTools）を用いたJavaScriptのデバッグ方法に焦点を当てます。特に、デバッグの核となる「ブレークポイント」と「ステップ実行」の概念と実践的な使い方を、具体的な手順を交えて解説します。

Chrome DevToolsを開く

Chrome DevToolsは、開発中のウェブページの内部状態を詳細に調査するための強力なツール群です。デバッグを開始するには、まず開発者ツールを開く必要があります。

一般的な開き方は以下の通りです。

対象のウェブページをChromeブラウザで開きます。
Windows/Linux の場合は F12 キー、macOS の場合は Option + Command + I キーを押します。
または、ページ上の任意の場所を右クリックし、コンテキストメニューから「検証」を選択します。

開発者ツールが開くと、ページの要素構造を表示する「Elements」、コンソール操作を行う「Console」、ネットワーク通信を表示する「Network」など、様々なパネルが表示されます。JavaScriptのデバッグで主に使用するのは「Sources」パネルです。

JavaScriptデバッグの基本概念

デバッグとは、プログラム中に存在する「バグ」（不具合）を発見し、その原因を特定・修正する作業のことです。闇雲にコードを眺めたり、大量の console.log を仕込んだりするデバッグ手法は、非効率であり、複雑なバグの特定には向きません。

効率的なデバッグのためには、以下の基本的な概念を理解することが重要です。

ブレークポイント (Breakpoint): プログラムの実行を意図的に一時停止させる場所です。特定のコード行にブレークポイントを設定することで、その行が実行される直前でプログラムの動きを止めることができます。これにより、その時点での変数やプログラムの状態を確認することが可能になります。
ステップ実行 (Step Execution): プログラムがブレークポイントで一時停止した後、コードを1行ずつ、または関数単位で実行していく機能です。これにより、プログラムの実行フローを詳細に追いかけ、どこで想定外の動作が発生しているのかを確認できます。

これらの機能を活用することで、プログラムの実行パスをトレースし、変数の値の変化を監視し、バグの原因となっている箇所をピンポイントで特定することが可能になります。

Sourcesパネルを使ったデバッグ実践

Chrome DevToolsの「Sources」パネルは、ウェブページで使用されているスクリプトファイルを表示し、ブレークポイントの設定やステップ実行などのデバッグ操作を行うための中心的な場所です。

Sourcesパネルの構成

Sourcesパネルは主に以下の領域で構成されています。

ファイルツリー: デバッグ対象のファイル（JavaScriptファイル、HTMLファイルなど）がツリー構造で表示されます。
コード表示エリア: 選択したファイルのソースコードが表示されます。
デバッグコントロールパネル: プログラムの一時停止/再開、ステップ実行、ブレークポイントの管理などを行うためのボタンや情報表示エリア（Scope, Call Stackなど）があります。

ブレークポイントの設定方法

特定のコード行でプログラムの実行を一時停止させたい場合、ブレークポイントを設定します。

行番号のクリック: Sourcesパネルのコード表示エリアで、ブレークポイントを設定したい行の左側にある行番号をクリックします。クリックした行番号の上に青いマーカーが表示されれば、ブレークポイントが設定されています。もう一度クリックすると解除されます。
debugger; ステートメント: JavaScriptコードの中に直接 debugger; という1行を記述することもできます。この行が実行されると、Chrome DevToolsが開いていれば、自動的にその場所でプログラムの実行が一時停止します。これはコード中に一時的にブレークポイントを仕込みたい場合に便利ですが、コミット時に消し忘れないように注意が必要です。
条件付きブレークポイント: 行番号を右クリックし、「Add conditional breakpoint...」を選択すると、特定の条件が真となる場合にのみ停止するブレークポイントを設定できます。これは、ループ処理の中で特定の値になったときだけ停止させたい場合などに非常に有効です。

ブレークポイントを設定したら、そのコードが実行されるような操作（例: ボタンクリック、ページロード完了など）をブラウザで行います。プログラムがブレークポイントの行に到達すると、実行が一時停止し、Sourcesパネルがアクティブになります。

ステップ実行の操作

プログラムがブレークポイントで一時停止している間に、デバッグコントロールパネルのボタンやショートカットキーを使って、プログラムの実行を細かく制御できます。

デバッグコントロールパネルには、以下の主要なボタンがあります（左から順に）。

Continue (F8): 次のブレークポイントまで、またはブレークポイントがなくなるまでプログラムの実行を再開します。
Step Over (F10): 現在実行しようとしている行を実行し、関数呼び出しの中に入らずに次の行に進みます。関数全体を一つのステップとして扱いたい場合に使用します。
Step Into (F11): 現在実行しようとしている行を実行し、その行に関数呼び出しが含まれている場合は、関数の内部の最初の行に移動します。関数の中の処理を追いたい場合に使用します。
Step Out (Shift + F11): 現在実行中の関数の残りの部分をすべて実行し、その関数を呼び出した場所の次の行に戻ります。関数内部の詳細な実行を終えて、呼び出し元に戻りたい場合に使用します。
Toggle breakpoints (Ctrl + F8): すべてのブレークポイントを一時的に無効化/有効化します。設定したブレークポイントを解除せずに、一時的に無視したい場合に便利です。

これらのステップ実行機能を使って、プログラムの実行フローを追いながら、変数の値がどのように変化していくかを確認することで、バグの原因となっているロジックの誤りを発見しやすくなります。

変数とスコープの確認

プログラムが一時停止している間、ScopeパネルとWatchパネルを使って、現在のスコープにある変数や、監視したい特定の変数の値を確認できます。

Scopeパネル: 現在実行中の関数内（Local scope）、その関数が含まれるスコープ（Closure scope）、そしてグローバルスコープにある変数とその値が表示されます。プログラムの状態を把握するために非常に重要です。
Watchパネル: 特定の変数名やJavaScriptの式（例: myArray.length > 5）を追加して、その値や評価結果を常に監視できます。Scopeパネルで表示されない、より深いネストにあるオブジェクトのプロパティなどを追跡するのに便利です。

また、一時停止中にConsoleパネルを開いて、現在のスコープにある変数の値を入力して確認したり、関数を実行してみたりすることも可能です。これは、特定の処理を試したり、変数の値を動的に評価したりするのに役立ちます。

コールスタックの確認

プログラムが一時停止しているとき、Call Stackパネルには、現在の実行位置に至るまでの関数の呼び出し履歴が表示されます。これは、どのような関数がどのような順番で呼び出されて現在の場所に到達したのかを理解するのに役立ちます。エラー発生時には、コールスタックを見ることで、エラーが発生した関数がどの関数から呼び出されたのかを遡って確認し、エラーの根本原因を探る手がかりを得られます。

デバッグ実践シナリオ：ボタンクリック時の値の不一致

ここでは、簡単な例を通して、これらのデバッグ機能がどのように役立つかを見てみましょう。

次のようなHTMLとJavaScriptがあるとします。

<!-- index.html -->
<button id="myButton">カウントアップ</button>
<p id="countDisplay">0</p>

<script src="script.js"></script>

// script.js
let count = 0;

document.getElementById('myButton').addEventListener('click', function() {
  count++;
  // ここで何かがおかしい？
  updateDisplay(count * 2); // 想定外の値を渡している？
});

function updateDisplay(value) {
  document.getElementById('countDisplay').textContent = value;
}

このコードはボタンをクリックするたびにカウントアップし、その値を画面に表示するはずですが、なぜかクリックするたびに表示される値が2ずつ増えてしまいます。期待しているのは1ずつ増えることです。

このバグを特定するために、Chrome DevToolsを使ってみましょう。

index.html をChromeで開きます。
F12 を押してDevToolsを開き、「Sources」パネルに移動します。
ファイルツリーから script.js を選択します。
count++ の次の行、updateDisplay(count * 2); の行番号をクリックしてブレークポイントを設定します。
ブラウザ上で「カウントアップ」ボタンをクリックします。
プログラムがブレークポイントで一時停止します。
Scopeパネルを確認します。count 変数がどのように表示されているかを見ます。おそらく、ボタンを1回クリックした直後なら count は 1 と表示されているでしょう。
updateDisplay(count * 2); の行が一時停止しています。ここで count * 2 がどのような値になるかを確認します。Consoleパネルを開き、count * 2 と入力してEnterを押すと、2 と表示されるでしょう。
あるいは、Watchパネルに count * 2 を追加して監視することもできます。
Step Into (F11) を押して、updateDisplay 関数の中に入ってみます。
updateDisplay 関数の中（document.getElementById('countDisplay').textContent = value; の行）で一時停止します。
Scopeパネルで value 変数の値を確認します。先ほど確認した count * 2 の値、つまり 2 が表示されているはずです。
ここで、なぜ value が期待する count の値ではなく、その2倍になっているのかが明らかになります。updateDisplay 関数を呼び出す際に、誤って count * 2 という値を渡していることが原因だと特定できます。

このように、ブレークポイントで一時停止し、ScopeやWatchパネルで変数の値を確認しながら、ステップ実行でプログラムの動きを追跡することで、バグの原因箇所を効率的に発見することができます。

まとめ

この記事では、Chrome DevToolsのSourcesパネルを使ったJavaScriptデバッグの基本的な手順として、ブレークポイントの設定とステップ実行の活用方法を解説しました。これらの機能を使いこなすことは、バグの原因特定にかかる時間を大幅に短縮し、よりスムーズな開発を実現するために非常に重要です。

デバッグは経験を積むことで上達します。まずは簡単なスクリプトから始めて、意図的にバグを仕込んでデバッグの練習をしてみるのも良いでしょう。今回紹介した機能以外にも、条件付きブレークポイント、DOM変更時のブレークポイント、XHR/Fetchブレークポイントなど、Chrome DevToolsには様々な高度なデバッグ機能が備わっています。これらを活用することで、さらに複雑な問題にも対応できるようになります。

バグは開発につきものです。恐れず、Chrome DevToolsという強力なツールを使いこなして、効率的に解決していきましょう。