開発者ツールのブレークポイントでJSのコードをデバッグする

デバッグが大変な時にブレークポイントが役に立ちます

コードが思い通り動かない時には、その原因を探って正常な動作に直していきます。このことをデバッグする、というような言葉で表現します。デバッグには様々な方法がありますが、ここではブレークポイントという方法を使ってのデバッグをしてみます。

今回はJavaScriptを題材にGoogleChromeの開発者ツールを利用して行っていますが、ブレークポイントは様々な言語の開発環境で実現されている汎用的な機能です。

ブレークポイント

ブレークポイントは、プログラムを途中で一時停止することができる機能です。コードを途中で止めた上でその時の変数の中身を確認して、想定の値が入っているかどうかを確認したりすることで、間違いを効果的に見つけることができます。

さらにステップ実行という機能を利用して、処理を１行ずつ進めてプログラムをコマ送りするように少しずつ動作を確認することもできます。

開発者ツールについて

WindowsではF12、MacではCommand + Option + J などで開くことができます。

Chromeの開発者ツールではブレークポイントで一時停止しているところでESCキーを押すと、簡単にプログラムのコードを実行できるコンソールが表示されます。

開発者ツールはとても便利なので、特にJavaScriptを学習している方は理解しておくと助けになることが多いです。

そのほかのデバッグ

console.log のような関数を使って、変数の中身を表示して動作させながら確認する方法がよく取られます。表示しながら確認するのと、他の言語ではprintというような名前の関数を使ってよくやることもあり、プリント・デバッグというような呼ばれ方もします。