Javascriptデバッグ入門
Javascriptでちょっとしたアプリを作っている時、エラーで処理が進まないなどデバッグの必要がでてくることはよくあります。
今回はそういったとき、どう対処していったらいいかの参考になればと思います。
ブラウザ
chrome
- chromeの DeveloperTools の機能はとても優秀です。今回紹介する機能はほかのブラウザでも実装されていたりしますので気になる方は調べて、僕に教えて下さい！
デバッグのススメ方
とりあえず、なんか動かないなと思ったら DeveloperTools を立ち上げます。
Windowsだと F12、Macだと alt+Command+i ですぐに表示できます。
次に Console を確認します。
エラーがある場合
あ。なにかエラーがコンソールにでました。
こういう時はまず どんなエラーがでているのか を確認するのが大事です。
変数名 is not defined.
たとえば、上記のようなエラーが出た場合は変数名が未定義だとわかります。
これは変数名のタイポミスなどの可能性が高いので、該当エラーが示した変数名などをよく調べましょう。
またよくわからないエラーが出た場合でも、ググったり StackOverflow で検索すると意外と先人達のノウハウがあったりで、解決できる場合があるので根気よく調べましょう。
エラーがjQueryのライブラリの中で起きてる！助けて！
まずは落ち着きましょう。
こういう場合はエラーが起きている処理を読んでいる箇所を調べましょう。
DeveloperTools > Console のエラーの横にプルダウン用の三角があるのでこれを押して関数の呼び出しの流れを確認します。
自作のコードが起因のエラーであれば、関数の呼び出し元でそのコードの箇所がわかるかもしれません。
エラーがない場合
jQueryなどでクエリセレクターで取得したDOMがない場合でもエラー処理などで処理が中断されないように設計されています。
これはこれで非常に便利なのですが、エラーがでないため、問題箇所の特定が難しくなります。
こういう場合は問題がありそうな処理をどんどんさかのぼって、 期待通りに処理が行われているか を確認して行きます。
こういうときconsole.logで確認するのは骨が折れますが、JSを直接編集せずに確認できる機能があります。
それは BreakPoint です。
BreakPoint
1) Console > Sources で該当JSファイルを開きます。
2)そして行番号のところをクリックすると青い矢印がでてきます。
3)この青い矢印の行で処理を停止し、そのときの変数の値などを確認できるようになります。
変数の確認方法は、右のパネルの Watch Expressions に変数名を入力して、ブラウザを最読み込みします。
ここでは試しに isHalfHour を確認してみましょう。
isHalfHour:false
と出力されました。
こうやって変数の値に期待通りの値が入っているか確認して行きます。
BreakPoint補足
またブラウザ上に表示された上のコントローラーは、
左の再生ボタンを押せば、BreakPoint で停めた処理を再生することができ、
右のステップ実行ボタンを押せば、ブレイクポイントで停めた処理の次の処理にジャンプすることができます。
こうやってどこまで正しく（期待通りに）動いているかを確認していくことで、バグをつぶしていくことができると思います。
スマートフォンのデバッグ
上記のBreakPoint機能はMacのSafariにもあるのでiOS端末であればMacとiOS端末を接続し、同等の機能を使うことができると思います。
AndroidのChromeもAndroidDebugBridgeの機能を用いて同等の機能を使うことができるはずです。
「Android標準ブラウザ？知らない子ですね！」