ブラウザDevToolsをマスター！知っておきたい高度なJavaScriptデバッグテクニック

開発者なら、コードのデバッグが必要になる場面は頻繁にあるでしょう。これまでのチャレンジの中でも console.log を使ったことがあるかもしれませんね。これは最もシンプルなデバッグ手法ですが、実はブラウザにはもっと強力な武器が備わっています。

本記事では、ブラウザが標準で搭載しているデバッグツールを使いこなすための、特に便利なテクニックをいくつかご紹介します。

freeCodeCampコードエディタの裏側

デバッグの話に入る前に、freeCodeCamp（FCC）の「優秀なコードチェックエンジン」に関するちょっとした内部事情をお話ししましょう。

FCCでは、カスタマイズされた CodeMirror をコードエディタとして採用しています。エディタに入力されたJavaScriptコードは文字列として扱われ、eval() 関数によって評価・実行されます。eval() が呼び出されると、ブラウザはそのコードをネイティブに実行します。この仕組みがなぜ重要になるのかは、記事の後半で明らかになります。

さっそく本題：DevTools活用テクニック

Google Chrome は最も人気のあるブラウザの一つで、V8 という組み込みJavaScriptエンジンを搭載し、Chrome DevTools という強力な開発者向けツールセットを提供しています。Googleが公開している公式のJavaScriptデバッグ完全ガイドも、あわせて読んでみることをおすすめします。

1. DevToolsの基本

Chrome DevToolsの起動方法

F12 キーを押すだけで起動できます。キーボードショートカットでは、Windows・Linuxの場合は Ctrl + Shift + I、Macの場合は Cmd + Shift + I を押してください。マウス操作がお好みなら、メニューから「その他のツール ＞ デベロッパーツール」を選択してもOKです。

SourcesタブとConsoleタブを理解する

この2つのタブは、デバッグ作業における最強の相棒となるでしょう。Sources タブでは、表示中のウェブページ上のすべてのスクリプトを視覚的に確認できます。コードウィンドウ、ファイルツリー、コールスタック、ウォッチウィンドウなど、デバッグに必要なセクションがひと通り揃っています。

Console タブにはすべてのログ出力が集まります。さらに、コンソールのプロンプトから直接JavaScriptコードを実行することも可能です。イメージとしては、WindowsのコマンドプロンプトやLinuxのターミナルのようなものです。

ヒント：DevToolsを開いている状態なら、Esc キーでいつでもコンソールの開閉を切り替えられます。

2. よく使うショートカットと機能

ショートカットの完全なリストは公式ドキュメントで確認できますが、ここでは特によく使われるものをまとめておきます。

3. ソースマップでコードをデバッグする

中でも特に便利なのが、ソースマップ（Source Maps）を使った動的スクリプトのリアルタイムデバッグです。

すべてのスクリプトはDevToolsのSourcesタブで確認できます。SourcesタブにはJavaScriptのソースファイル一式が表示されますが、エディタから入力されたコードは eval() を経由して、ブラウザプロセス内の「仮想マシン（VM）」と呼ばれるコンテナの中で実行されます。

もうお気づきかもしれませんね。つまり私たちのコードは、ファイル名を持たないスクリプトとして実行されているため、Sourcesタブには表示されないのです。

ここからがハックの出番です！

Source Maps の仕組みを利用すれば、エディタ内のJavaScriptに任意のファイル名を割り当てることができます。方法はとても簡単です。

例えば、Factorialize（階乗計算）チャレンジに取り組んでいて、コードが次のようになっているとしましょう。

function factorialize(num) {
 if(num <= 1){
 ...
}
factorialize(5);

必要なのは、コードの先頭（1行目）に次の1行を追加するだけです。

//# sourceURL=factorialize.js
function factorialize(num) {
 if(num <= 1){
 ...

はい、これだけ！

あとはDevToolsを開いて、付けたファイル名を検索するだけです。ブレークポイントを設定して、思う存分デバッグを楽しんでください。

デバッグについてさらに学ぶ

• 初心者向けバグ退治ガイド
• 初心者のためのデバッグのコツとテクニック
• ブラウザのデバッグコンソールを最大限に活用する方法

無料でプログラミングを学びませんか？freeCodeCampのオープンソースカリキュラムは、これまでに40,000人以上の人々を開発者の仕事へと導いてきました。あなたも今日から始めてみましょう。