ちゃんと学ぶ、JavaScriptGoogle Chrome開発者ツールでデバッグをしよう

JavaScriptは、ルールが厳格で少しでも間違えたことを書くと、全く動作しなくなります。画面にはなにも表示されず、なにが起こったのか、なにが悪かったのかも分からない状態です。

このような状態を「バグがある」などといい、このバグを修正する作業を「デバッグ作業」などといいます。幸い、Google Chromeにはデバッグ作業を助けてくれる「デバッグツール」が搭載されているため、これを使って間違いを発見してみましょう。

間違えたプログラムを書いてみよう

ここでは、あえて間違えたプログラムを書いて、デバッグ作業を体験してみましょう。HTMLを準備したら次のようなプログラムを追加します。

<script>
document.write(こんにちは);
</script>

ここでは、文字列を出力するのに両端のクオーテーション記号を忘れてしまっているため、正しく動作しません。これをデバッグしていきましょう。

デバッグツールを利用しよう

ではここでは、デバッグツールを使ってみましょう。Google Chromeの右上のメニューボタン（…）をクリックしたら、「その他のツール→デベロッパーツール」メニューをクリックします。

すると、画面の下側や右側にデベロッパーツールのパネルが表示されます。

この時、右上に赤い×アイコンが表示されています。これは、今画面に表示しているJavaScriptなどで「エラー」が発生していることを表します。

このアイコンをクリックしてみましょう。すると、赤い文字でエラーのメッセージが表示されます。例えばここでは、次のようなメッセージが表示されました。

Uncaught ReferenceError: こんにちは is not defined

「こんにちはは定義されていません」と言われています。メッセージの内容の意味は現状ではちょっと分からないと思いますがいったん気にしないで大丈夫です。ここでは、右端のファイル名と数字に注目しましょう。

この数字は、エラーが発生した箇所の行番号。クリックすると、実際のソースコードが表示されて、エラーが発生した場所が示されます。

これをヒントに、どこにバグがあるかを探して、プログラムコードを修正していきます。

エラーの箇所とバグの箇所の違いに注意

このように便利なデバッグツールですが、気をつけなければならないのはデバッグツールが示してくれる場所やメッセージは、あくまで「正しく動作しなくなった箇所（エラー）」の箇所です。今回のケースは、エラーが発生している場所と実際に間違い（＝バグ）がある場所が一致していたので分かりやすいのですが、もう少し複雑なプログラムになってくると一致していないケースがあります。

そうすると、エラーが発生した箇所をいくら見ても間違いを見つけることはできず、実際のバグはそれよりも何行も前だったということがよく起こります。これについては、ある程度慣れていくしかありません。慣れてくると、エラーの箇所や内容を見るだけで、大体どこにバグがあるかを探ることができます。

最初のうちは、どうしてもバグの箇所や内容が分からない場合は、プログラムをざっくり削除してしまって、書き直してしまった方が早いこともあるでしょう。とはいえ、少しずつエラーメッセージやバグとも仲良くなっていくと、プログラムが開発しやすくなりますので頑張っていきましょう。