JavaScriptのデバッグは必ず覚えておきたいWeb開発の必須スキルの一つです。プログラムの実行をデバッグすることで現在の変数の値や、処理がどのように進んでいるのかを確認します。これを利用してプログラムが意図した動作になっているかの分析に役立てることができます。

本記事ではChromeブラウザーの「Chrome Developer Tools」(以下「デベロッパーツール」)を使用してJavaScriptをデバッグする際の基本的な使い方を解説します。「今までデベロッパーツールを使ったことのない」という方でもこの記事を読めば理解できるよう、チュートリアル形式になっています。次の項目を20分ほどで理解できるようまとめているので、一つ一つ順番に試しながら読み進めてください。

  1. デベロッパーツールの表示
  2. ブレークポイントの設定
  3. 変数の確認
  4. プログラムのステップ実行

本記事では、下記のサンプルを例に、デベロッパーツールを使用してJSプログラムをデバッグします。このサンプルを別ウィンドウで開いた状態で読み進めてください。

デバッグのサンプルページ

▲セレクトボックスを選択すると、フォームに入力した2つの数値に対して選択した方法で計算するJavaScriptのサンプルです。

※本記事で使用するChromeのバージョンは2016年5月現在の最新のバージョン「50.0」です。

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

Chromeブラウザーでウェブサイトを表示し、[右クリック] → [検証]を選択することで、デベロッパーツールが表示されます。ショートカットキーはWindowsの場合[F12]キー(macOSの場合は[Command]+[Option]+[I]キー)を入力します。

開発者ツールを開く

まず、JavaScript(JS)のファイルを開くために、画面上にある[Sources]タブを選択します。

[sources]タブを開く

ここで画面左にある[Sources]ツリーから、対象のJSのファイルを選択します。するとメインエリアに選択したファイルの内容が表示されます。例として下記のリンクを開き、デベロッパーツールを表示してブラウザーに読み込まれているmain.jsというJSファイルを表示します。

JSファイルを開く

次のページではブレークポイントを設定することでプログラムの実行を一時駅に停止させる方法を解説します。