なぜかうまく動かない...そんな時はデバッグだ！

みなさん、開発は順調に進んでいますか？
ちゃんと動くはずなのに、なぜかうまく動かない...なんて状況に陥っていませんか？
そんな時はデバッグしてみましょう！

デバッグでは以下のようなことが確認できます。

なんだかうまく動かないぞ
　　→「おかしな値」が入っていないか、「エラーが出ていないか」を確認できます
NAVITIME APIへのリクエスト、ちゃんと送れているのかな
　　→リクエストが上手くいったか、どのような情報が取れたのかを確認できます
デザインを整えたはずなのに崩れちゃう...
　　→どのようにスタイルが設定されているかを確認できます

今回はGoogle Chromeを例にデバッグ方法を確認してみましょう！

ブラウザ上でデバッグをするには「開発者ツール」を開く必要があります。
開発者ツールは、ブラウザ上で右クリック→検証を選択することで開けます。


●エラー確認方法

debugimg01.png

consoleタブでは、変数に値が上手く入っていなかったり、呼び出しているメソッドが存在しなかったり、エラーが出ているかどうかを確認することができます。

debugimg02.png

APIのレスポンスがエラーとなっていた場合も、Consoleログで確認することが可能です。上記は、API名を間違えてしまっているために404エラーでレスポンスが返ってきてしまっている例です（○：route/shape、×：routa/shape）。
APIのレスポンスが返ってきていないかも...？と思った場合は、まずエラーが出ていないか確認しましょう！


●ブレークポイントを用いたデバッグ方法

debugimg03.png

Sourcesのタブでは、ブレークポイントを用いたデバッグが可能です。上記の例では、63行目で処理が一時停止します。
変数にどういった値が入っているか確認したい場合は、該当の変数にカーソルを当てるか、以下のようにConsoleタブに変数名を入力すると確認することができます。

debugimg04.png

処理を一行進めたいときは、次のブレークポイントまで（ブレークポイントが無ければ最後まで）進めたいときはをクリックします。


●ログを用いたデバッグ方法

debugimg05.png

コンソールのログとして、任意の文字を表示させることも可能です。

debugimg06.png

このように「console.log([ログに表示させたい内容]);」とJavascriptに書くと、Consoleタブに表示されます。処理がどこまで進んでいるのかなどを確認する際に便利です。


●スタイル設定を確認する方法

どのようにスタイルが設定されているのかを確認する方法をご紹介します。
まずは開発者ツールの左上にあるをクリックします。
その状態で、確認したい要素の上にカーソルを移動させると、以下左のようにHTMLタグ要素の情報を確認することができます。さらにクリックすると、開発者ツールでスタイルの設定も確認できます。

debugimg07.png

開発者ツール上でスタイルを追加/削除、修正することも可能です。
実際のファイルには反映されずリロードしたら消えてしまいますので、ご注意ください。


処理が上手く動かないときは、ぜひ開発者ツールを使ってデバッグしてみてください！