Let’s デバッグ

JavaScriptのデバッグはブラウザがあれば出来るので非常に取っ付き易く簡単です。ブラウザによってデバッグ方法が若干異なります。またブラウザの開発ツールは、JavaScriptのデバッグだけでなく、HTTP通信の中を見たり通信速度を計測したりlocal storageの中を確認したりなど、色々な機能が付いています。今回はchromeを使用したデバッグ方法だけを紹介しますが、他にもどんなことが出来るのか色々調べてみると面白いと思います。

Chromeのデバッグツール

Chromeには開発者ツールが標準として備わっています。ブラウザ上で下記を実行するとツールが立ち上がります。 JavaScriptのデバッグに使用するタブは、SourcesとConsoleの2つです。 * Ctrl + Shift + I（Windows）
* ⌘ + ⌥ + I（Mac）

アラート出力

昔からあるデバッグ方法の1つです。プログラムの中に下記のようなコードを埋め込み、アラート出力して変数の中身などを確認したりします。アラート出力する場合、OKボタンをクリックするまではプログラム的にもそこで停止した状態となっているので、意識的に止めて何かを確認したい場合などに使用するのもいいかと思います。但し、アラートを埋め込みすぎると、立て続けにダイアログが表示されるので逆にデバッグがしづらくなるので気をつけて下さい。

コンソール出力

ブラウザのコンソールタブに出力する方法です。ログレベルなどもあるので、alertよりも細かい設定で出力することができます。アラート出力と違い、コンソール出力時にプログラムが止まることもないので、一通りログ出しして後でまとめて確認するという使われ方が多いです。逆にコンソールの消し忘れも多いので、リリース前などはgrepなどしてまとめて消す対策などを入れるといいです。

ブレークポイントを使ったデバッグ

ブラウザ上でブレイクポイントを貼って、コードを止めながら変数の中身や処理フローの確認などを行います。例えば、ボタンのクリックイベントに対して何かしらの処理が実行されるような画面があるとします。ボタンがクリックされた時のイベントをデバッグしたいときは、まずchromeのSourcesタブを開きます。次に、デバッグで止めたいソースを開きます。（⌘+o or Ctrl+o）
クリックイベントの行数の上でクリックすると、ブレイクポイントを貼ることができます。ボタンをクリックしてみると、ブレイクポイントで止まるはずです。

ソースをその場で変更しつつ試すことも可能です。Sourcesタブの中で変更したいソースを表示して、ソースを変更し保存（⌘+s or Ctrl+s）して下さい。上記の例では、ボタンクリック時のイベントを変更して保存して、ボタンをクリックすると、変更後の処理で実行されます。

debugger;を使ったデバッグ

ソースに「debugger;」と記載することで、記載した部分を通る時に止まってくれます。例えば、画面表示時のイベントに対して何かしらの処理が実行されるような画面があるとします。画面表示時のイベント部分に「debugger;」のコードを追記します。
chromeでSourcesタブを開いて画面を表示します。「debugger;」と記載しているところでデバッグが止まります。

まとめ

デバッグはうまく使うことによって、プログラムの理解が早まり深まります。ただ、逆に自分でプログラミングをするときに最初からデバッグに頼りすぎると、あまり考えずに手を動かすため遅くなることもあります。
他人が書いたソースを読んだり、新しいフレームワークを触ったりするときには非常に有効な手段なので、状況に合わせてうまく使えるようになっておくと、レベルアップに繋がると思います。

次回からは、いよいよSencha フレームワークの解説に入ります！

お楽しみに！