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

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

この記事で学べること
・デベロッパーツールの使い方
・JavaScriptのブレークポイントの使い方
・実行中の変数の状態を調べる方法
・プログラムのステップ実行のやり方

デバッグはプログラム習得で必ず知っておくべきノウハウの一つです。この記事で紹介していることは、JavaScriptだけでなく、他のプログラム言語でも役立つ内容です。

この記事で解説するサンプル

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

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

※本記事で使用するChromeのバージョンは2018年6月現在の最新のバージョン67です。

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

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

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

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

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