AngularJS・JavaScriptのデバッグ方法まとめ＆使い分け

デバッグ方法

今回はお作法や概念ではなく、私が普段デバッグをする時に使用している方法をメモ書き程度にまとめてみました。
私は大きく分けて3個のデバッグ方法を用いてます。
下記から一つづつ紹介し、最後に私の使い分け方を記述してあります。

console.log

これは一般的なデバッグ方法だと思います。
JSファイル内の特定行に下記のコードを記述すると、開発者ツールのConsoleタブに
ログの結果とconsole.logを書いたファイル名、行数が表示されます。
私はログの結果と行数を見ながらバグ原因を探ります。

console.log({{デバッグしたい変数}});

console.logは下記のように,を途中で記述すると一つのconsole.logに複数の値が表示できるので
何箇所もconsole.logを表示したい場合は先に関数名を書き、後ろに表示したい変数を記述しています。

console.log('debug', 'test');
console.log({{変数A}}, {{変数B}});

console.log('functionName', {{変数}}); //先に関数名など位置が特定できる名前をつけておくと、いちいち行数等を見なくて済む

AngularJsでconsole.logを使用する際にひとつ注意点があります。
下記のコードでデバッグをするとどうなるでしょうか？

var test = 'test';
console.log('1', test);
test = 'Z';
console.log('2', test);
test = 'ZZ';
console.log('3', test);

実は結果は1,2,3の変数testは全て'ZZ'になってしまいます。
ですので、回避方法として以下のように記述すると各行時の変数の値が出力してくれます。

console.log(angular.copy({{デバッグしたい変数}})); //AngularJsの特殊ケース

Request, Response

こちらは開発者ツールのNetworkタブ内の機能を利用してデバックをする方法です。※開発者ツールはchromeだと「F12」
送受信したオブジェクトの構造を確認できます。以下が見る方法。

• 送信したオブジェクトの内容確認をしたい場合：上から順にNetworkタブ、Headersタブ内のRequest Headers
• 受信したオブジェクトの内容確認をしたい場合：上から順にNetworkタブ、Responseタブ

console.logでも代用は出来ますが、送受信した実際のデータが確認出来るので
「もしconsole.logを記述した行が間違って～」などのケアレスミスを回避することが出来ます。

preタグ

こちらは画面上にオブジェクトをJSON形式で表示して、デバッグを行う方法です。
htmlに直接書いているので上記の2つと違い、動的に値が変更できます。
以下のように記述すると画面に対象のデータが表示されます。

<pre>{{表示したいdata属性・form属性など | json}}</pre>
<pre>{{data|json}}</pre> //具体例

またRequest, Responseでもオブジェクトは見れるのですが、階層が深いと見たい値を探すのに苦労します。
ですが、JSON形式だとすぐに見つけられるので便利です。

使い分け

個人的に上記３つのデバッグ方法の使い分け方を書いてみました。
※絶対にこれが正解という事では無いので、使いながら自分の使い分け方を見つけて下さい。

• console.log：処理途中のデータ確認
• Request, Response：APIに送受信したオブジェクトの内容確認
• preタグ：構造が複雑な連想配列の内容確認・input系のエラーチェック