JavascriptのChromeでのデバッグ方法個人的まとめ2016

# はじめに
Javascript開発でよく使ってるデバッグ方法についての個人的なまとめです。
当たり前の事ばかりですが、これからJavascript開発をやる方や興味がある方に少しでもお役に立てればと思います。

# デバッグの鉄板 console.log
Javascriptの開発でconsole.logを使わない人を探すほうが難しいくらいだと思います。

```javascript:sample.js
console.log('コンソール出すぜ');
```

## 実行結果
ChromeのDeveloper ToolsのConsoleタブで確認

![スクリーンショット 2016-01-26 10.14.39.png](https://qiita-image-store.s3.amazonaws.com/0/65968/289cee70-c6b7-c046-4c92-1f9fb376e65b.png)

# consoleでデバッグ時の色やアイコンを表示
console.logだと単なるlogですが、用途によってエラーや警告などを出すことが可能です。
これによって、複数のconsoleを設置した場合に何の情報なのか？が分かりやすくなります。

## console.error
エラーハンドリングで引っかかった時にはこれを使っています。

```javascript:sample.js
console.error('エラー出すぜ');
```
### 実行結果
![スクリーンショット 2016-01-26 10.18.14.png](https://qiita-image-store.s3.amazonaws.com/0/65968/fbe4ebbf-9d67-5f88-1e14-abf039f49714.png)

## console.warn
個人的にはあまり使っていません。
処理は続行出来るものの、100%の期待動作でない場合とかで使っていましたが、結局期待動作ではないので、厳しめにconsole.errorにしてしまう事がほとんどです。

```javascript:sample.js
console.warn('警告出すぜ');
```
### 実行結果
![スクリーンショット 2016-01-26 10.19.37.png](https://qiita-image-store.s3.amazonaws.com/0/65968/9e003849-5490-7623-74dd-0109efb6a9fe.png)

## console.info
console.logと一線を画したい時に使っています。
長いメソッドの中で値の変化などを追いたい時に、強調すべきポイントとかで使ったりしています。

```javascript:sample.js
console.info('情報出すぜ');
```

### 実行結果
![スクリーンショット 2016-01-26 10.29.28.png](https://qiita-image-store.s3.amazonaws.com/0/65968/0c987c69-379f-e39a-59a7-524d3070f2a2.png)

こんな感じで、途中で一番見なければいけない値を見落とさないように使ってます。
(値3の内容が一番のポイントである場合)
![スクリーンショット 2016-01-26 10.35.32.png](https://qiita-image-store.s3.amazonaws.com/0/65968/536e48b8-d08b-4bd3-0ef8-7e0e28122049.png)

# 配列はconsole.tableが見やすい

以下のような配列があったとします。

```javascript:sample.js
var array=[{
  key1:'value1',
  key2:'value2',
  key3:'value3',
}];
```

配列の中身をconsole.logすると、こんな感じになります。

```javascript:sample.js
console.log(array);
```

## 実行結果

![スクリーンショット 2016-01-26 10.50.57.png](https://qiita-image-store.s3.amazonaws.com/0/65968/3172f237-bad6-2b39-d971-b708b3eadf29.png)

ちょっと見難いですよね。

これを解決するのがconsole.tableです。

```javascript:sample.js
console.table(array);
```

## 実行結果

![スクリーンショット 2016-01-26 11.04.42.png](https://qiita-image-store.s3.amazonaws.com/0/65968/dc64e7ef-c639-b11a-3ef9-f7120327707d.png)

かなり見やすくなりました！

# 実行時間を計測
プログラムを書く上で実行速度は大切です。
Javascriptでももちろん処理速度を計測する方法があります。

```javascript:sample.js
console.time('timer');

// 計測したい処理を記載

console.timeEnd('timer');
```

## 実行結果
![スクリーンショット 2016-01-26 11.08.47.png](https://qiita-image-store.s3.amazonaws.com/0/65968/692da8cb-4fce-9d95-c3ef-37df0f4cbb78.png)

# 関数の呼び出し元を調べる

console.traceを使います。

ここまで紹介したconsole兄弟の最後の紹介です。
その他、consoleについてはまだまだたくさんあるのでご興味ある方は調べてみてください。


```javascript:sample.js
function saba() {
  function aji() {
    function maguro() {
      // console.trace実行
      console.trace();
    }
    maguro();
  }
  aji();
}

// さば function実行
saba();
```

## 実行結果
![スクリーンショット 2016-01-26 16.23.38.png](https://qiita-image-store.s3.amazonaws.com/0/65968/b321c324-1c78-c069-f3b5-1cb299968ae1.png)

このようにどのメソッド経由か？が分かります。

# ブレークポイントを使う
ブレークポイントを使用すると、プログラムの実行中に途中で停止、再開が行えます。

Developer ToolsのSourceタブを開いて、ブレークポイントを仕込みたい行をクリックします。

![スクリーンショット 2016-01-26 11.27.54.png](https://qiita-image-store.s3.amazonaws.com/0/65968/52557633-9e26-9130-3e5f-1ddd1438e60f.png)

この状態でページをリロードすると、設定したブレークポイントで処理が止まるので、ステップ実行が可能です。

## ブレークポイントからの処理再開
ブレークポイントから処理を再開する場合は、ブレークポイントをセットしたSourceタブの右側に以下のようなボタン群があるかと思いますが、こちらから実行していきます。

<img width="386" alt="スクリーンショット 2016-01-26 13.47.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/0b3d07fd-19aa-6e05-0b62-b4a0f4fca585.png">

### 処理再開
そのままです。これを押すと実行が再開されます。

### ステップオーバー
関数呼び出しがあった場合でも、関数へ処理遷移しないで次の行に進みます。

### ステップイン
関数呼び出しがあった場合、その関数へ処理遷移をして、関数内の処理に進みます。

### ステップアウト
関数が終了するまで実行し関数を抜けます。

### 画面上からの操作
ブレークポイントを設定した場合、Developer Toolsだけでなく、画面上にも
処理の再開とステップオーバーのボタンが表示されるので、そこからの操作も可能です。

<img width="194" alt="スクリーンショット 2016-01-26 13.37.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/7092676b-5a05-b2bc-8270-2286b12ce8c2.png">

## 実行中に値の変更
ブレークポイントをセットして、``sampleArray``に``[1,2,3,4]``をセットします。
通常に実行すると、console.logの結果は``[1, 2, 3, 4]``となるはずです。

![スクリーンショット 2016-01-26 16.52.46.png](https://qiita-image-store.s3.amazonaws.com/0/65968/70bfde97-d19f-59ea-d681-6f8536266fcc.png)


Developer Tools右側のScopeのsampleArrayには

```
Array[4]
0:1
1:2
2:3
3:4
```
とセットされている事が確認できます。

![スクリーンショット 2016-01-26 16.55.14.png](https://qiita-image-store.s3.amazonaws.com/0/65968/ac4bcdf2-9192-488f-1f50-6ea961a97717.png)


このScope内の``sampleArray``を``[100,200,300,400]``と変更してみます。

![スクリーンショット 2016-01-26 16.56.38.png](https://qiita-image-store.s3.amazonaws.com/0/65968/c1bc9a05-651b-5cf7-fc61-d744fa01d32d.png)

この状態で次に処理を進めます

すると、Sourcesタブ内の結果も``[100,200,300,400]``となり、
![スクリーンショット 2016-01-26 16.57.03.png](https://qiita-image-store.s3.amazonaws.com/0/65968/bd6ff0e6-c732-8380-2ca1-0380a99ed04e.png)

さらにConsoleタブの処理結果も以下のようになります。

![スクリーンショット 2016-01-26 16.58.23.png](https://qiita-image-store.s3.amazonaws.com/0/65968/2e23ad03-0923-645e-e607-7ef374057e75.png)

このようにブレークポイントをセットして、ステップ実行しながら値を変更していく事が可能です。

これにより、開発時にイレギュラーな値を渡してテストしながらの実装なども容易に行えるようになります。

# Networkで通信をチェック
どういったHTTP通信がされているのか？
ちゃんとステータスコードやレスポンスが返ってきているのか？を確認する場合に、Networkタブの利用をします。

以下、http://qiita.com/ にアクセスした例です。
ちゃんと200 OKが返ってきている事が分かります。

![スクリーンショット 2016-01-26 14.18.55.png](https://qiita-image-store.s3.amazonaws.com/0/65968/239c1cb9-c7b8-7778-1919-108c8f0e74d9.png)

デフォルトでHeadersタブが開いていますが、Responseタブを開くと以下のようにHTMLファイルが表示されている事が分かります。

![スクリーンショット 2016-01-26 14.20.48.png](https://qiita-image-store.s3.amazonaws.com/0/65968/f0a07734-22a0-e15d-09cb-fe8b2ccf3d70.png)

実際に受け取るレスポンスとして、Javascriptの開発の場合、JSON形式でのAPIレスポンスなどが多いかと思いますが、その場合はこのResponseのタブにJSON形式のデータが表示されます。


# 生の通信はDHC
通信処理を書いている時に、コードが悪いのか、通信のパラメータが不正なのか？
問題の切り分けをする為には通信したい内容をJavascriptのコード外で実行するのが最適です。

そこで使うのがDHCというChromeのエクステンションです。

インストールURL
https://chrome.google.com/webstore/detail/dhc-resthttp-api-client/aejoelaoggembcahagimdiliamlcdmfm

インストールするとChromeのアプリのところにアイコンが表示されているはずなのでこちらをクリックします。

<img width="137" alt="スクリーンショット 2016-01-26 14.01.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/860b4e05-4ec0-e6e1-3649-5191091dcd04.png">

## 使い方
### リクエスト先の設定

<img width="689" alt="スクリーンショット 2016-01-26 14.08.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/32a243be-d244-7929-ecee-936ec0013358.png">

HTTPまたはHTTPSが選択可能です。

### ヘッダーのセット

<img width="377" alt="スクリーンショット 2016-01-26 14.10.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/a6808de3-2727-583d-3681-1bb500b6b3c0.png">

リクエストヘッダーのセットをします。

### メソッドの選択
<img width="172" alt="スクリーンショット 2016-01-26 14.11.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/69e0a9d7-ed81-43d7-46f1-0158adf245dd.png">

### リクエストBODYの入力
<img width="563" alt="スクリーンショット 2016-01-26 14.12.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/3cb266ed-fec9-575b-ea31-53a9c5cc4011.png">

### リクエスト送信
<img width="126" alt="スクリーンショット 2016-01-26 14.13.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/4e4a0796-5236-560a-5453-c985d20f4a24.png">

### レスポンス
HTTPのステータスコードとレスポンス内容が返ってきます。
また、リクエスト時内容もレスポンスのところに表示されます。

<img width="377" alt="スクリーンショット 2016-01-26 14.14.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/acd7c1f1-f88e-f615-f054-a512edf45a11.png">


# クッキーはEdit This Cookie
クッキーの閲覧、操作はEditThisCookieを使っています。
とにかく使いやすくて、個人的にはクッキーのデバッグはこれ以外に考えられません。

インストールURL
https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ja

## 使い方
インストールして有効にしたら、Chromeの右上にクッキーのアイコンが表示されているはずなので、これをクリックします。

<img width="30" alt="スクリーンショット 2016-01-26 14.25.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/76396506-d5a3-6cd1-8a7d-998f5e891c71.png">

クリックすると、そのサイトのクッキーの一覧が表示されます。
あとはデバッグ時に削除したり、値を変えたり色々とやってみてください。

<img width="538" alt="スクリーンショット 2016-01-26 14.26.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/4b945642-4cf3-640b-2877-c340d910533b.png">

# ローカルストレージの操作
クッキーだけでなく、ローカルストレージを使用するサービスも最近増えていると思います。
ChoromeのDeveloper Toolsでももちろん使えます。

ResourcesタブのLocal Strageから自由にKeyとValueの変更、追加、削除が行えます。

![スクリーンショット 2016-01-26 14.39.57.png](https://qiita-image-store.s3.amazonaws.com/0/65968/2ff2c985-22a7-2d8d-0faa-c6e12e44e409.png)

同様にSession Strageについてもここから操作が行えます。

# あきらめないで！minifyされたソース
Javascriptで開発していると、minifyされたソースをお目にかかる機会が多いと思います。

![スクリーンショット 2016-01-26 14.28.45.png](https://qiita-image-store.s3.amazonaws.com/0/65968/f4547f24-9166-1c6e-8ec0-09dc79cab367.png)


デバッグしていたらminifyのソースが関連していそうだ。しかし、見れない・・・。
と諦める事はありません。

Sourceタブの左下にある
![スクリーンショット 2016-01-26 14.30.53.png](https://qiita-image-store.s3.amazonaws.com/0/65968/e28b63d8-8cc9-f2cb-7746-585ca3641eb3.png)
をクリックしてみてください。

すると、ファイルが ``:formatted``という形式で展開されます。

![スクリーンショット 2016-01-26 14.32.00.png](https://qiita-image-store.s3.amazonaws.com/0/65968/aed4fc69-c355-5d8e-ac5b-ce01e539cf6f.png)

# (AngularJS固有) ng-inspector
普段AngularJSを書く機会が多いのでこちらも紹介します。

インストールURL
https://chrome.google.com/webstore/detail/ng-inspector-for-angularj/aadgmnobpdmgmigaicncghmmoeflnamj

## 使い方
インストールして有効にしたら、Chromeの右上にAのアイコンが表示されているはずなので、これをクリックします。

<img width="25" alt="スクリーンショット 2016-01-26 14.35.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/1ee594a8-6707-9e0f-826c-61dd47113057.png">

AngularJSで書かれたサイトの場合、``$rootScope``,``$scope``の中身がここから確認出来ます。

https://angularjs.org/ にアクセスした例
<img width="1189" alt="スクリーンショット 2016-01-26 14.36.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/054fff1c-473d-6e13-baa2-d9eafbc53e43.png">

# ササッと見た目を修正出来るElements
レイアウトの確認MTGなんかで、「ここ、もうちょっとこんな感じのほうが」など意見が出る事があると思います。

そんな時にいちいちソースを開いてというのも面倒なので、ElementsタブでHTMLを変更して対応したりしています。

http://qiita.com/ をElementsタブで開いた一部
![スクリーンショット 2016-01-26 14.44.11.png](https://qiita-image-store.s3.amazonaws.com/0/65968/6094b7c1-edae-c7ce-8c89-68d0b27e5147.png)

画面上は
<img width="343" alt="スクリーンショット 2016-01-26 14.45.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/03ffd98d-f4c2-7fa4-a0ab-bc3796b3b442.png">
と表示されています。

ここの

```html:sample.html
<h2>プログラミング知識を共有しよう。</h2>
```
を``<h1>``にして、``共有``を``シェア``に変えてみます。

![スクリーンショット 2016-01-26 14.46.23.png](https://qiita-image-store.s3.amazonaws.com/0/65968/888e50b5-55eb-4d8d-2491-aa02bb95f541.png)

## 実行結果

すると、変えたタイミングで画面上も変更されます。

<img width="653" alt="スクリーンショット 2016-01-26 14.47.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/65968/e27321ba-3a24-692d-1976-4265ed49b65a.png">

今は単純なタグと文字の置き換えだけですが、もっと複雑な事も出来るので、ブレストやデザイン、レイアウトに関するMTGで結構役に立ちます。

# 困ったらソースを読む
個人的によくあるのが、使っているライブラリが意図する動作をしてくれない。
ですが、ライブラリのコードもJavascriptで書かれているので、頑張ってコードを追ってみましょう。

変にトライ&エラーを繰り返すよりもコードを読んでしまって、「ここはこういうパラメータじゃないと動かないのか、間違ってたわー。。」「このライブラリはこういう用途はできないのか。。」と結論を早く導き出せる事もあります。

また、自身が関わっているプロダクトのコードであれば、書いた人に聞くのが一番の近道デバッグだと思います。

# まとめ
ChromeのDeveloper Toolsは強力で、色んなツールもあるので個人的にデバッグは何とかなっているかなあという感覚です。
日々進歩していくはずなので、またどこかの機会でまとめようと思います。

完全に個人的なメモですが、どこかでお役に立てたら幸いです。