#102 Chrome開発ツールを使ったJSのデバッグ方法

なんとなく変数の確認くらいは、やっていたけれど、なんとなくすぎるので、勉強してみます。

ブレークポイントでできること

• 変数の状態の確認

• コールスタック（関数の呼び出し経路）の確認

デバッグのやり方

• sourceタブを開く

• 該当のjsファイルをクリック

• 変数の行などにブレークポイントを置く

• リロードする

リロードするとブレークポイントの行のところで処理がストップする
リロード後に処理を進める方法は次の３つ

ステップオーバー：次の行に進める

（もし現在の行に関数呼び出しがあっても関数へジャンプせずに関数の処理を行い、次の行に進む）
（次の行に進むだけで、次の行は実行されない）

ステップイン：現在の行に呼び出し関数があったら、その関数の内部に進む

ステップアウト：現在の行の呼び出し元の関数が終了するまで実行し、関数を抜ける

こうやって、各デバッグ機能を見てみると、下矢印のマークのステップインが関数の処理も追えるし、変数の状態も確認できるから使いやすそう。

他に、youtubeみたいなマークは、処理の再開と一時停止ができる
あと、電池残量にスラッシュがついたようなマークは、ブレークポイントの有効／無効を切り替えることができる

右側のペイン

• Scopeパネル：変数の値が見れる

• Call Stackパネル：どういう関数を経由して現在の行が呼ばれているかという関数のコールスタックが記録される

（一番上に現在実行されている関数が表示されており、
その下に呼ばれた関数が順番に並ぶ。
無名関数はanonymous functionと表示される）

（Call Stackパネルの各関数をクリックすると、その関数のところまで飛べる）