はじめに
以前の記事でDevToolsのドキュメントを読んで学びがあったため続編。
日々フロントエンドで戦っているエンジニアには当然の知識かもしれませんが
バックエンドからたまに出てくるくらいの方には発見があるかもしれません。
「Javascript」の項目あたりからいくつかピックアップします。
https://developers.google.com/web/tools/chrome-devtools/javascript/
※上記リファレンスのデモページが使いやすいためサンプルとして利用します
活用できていなかった機能
ブレークポイントの使い分け
DevtoolsのSourcesタブ上にソースを表示して
該当行をクリックしてやると青色の矢印が表示され、ブレークポイントを置けます。
実行時にはここで処理が一時停止し、関連する変数や処理の確認ができます。
debuggerステートメントをソースに書いたときにも同じ動作になります。
この状態からステップ実行してデバッグができます。
ここまでは流石に知っていましたが、画面の右下を見るとさらにメニューがあります。
例えば今回のデモにはボタンのクリックイベントによって発火する処理があるため
ここをデバッグするためにはイベントリスナー用のブレークポイントを設定します。
この状態でデモ上のボタンをクリックすると、ソースの15行目で処理が一時停止しました。
他にもDOMの変更やXHRの内容に応じて動作するブレークポイントなどがあるようです。
条件付きブレークポイント
ブレークポイントを置きたい行をクリックではなく右クリックすると
「条件付きブレークポイント（Conditional breakpoint）」を選択できます。
ここでは addend1 の値が1を超える場合のみ一時停止させる設定をしています。
設定が完了すると該当行に黄色の矢印が表示されます。
同じ処理が何度も呼ばれるが特定の条件下でのみ確認したい というときに使えそうです。
（粘り強くステップ実行で進めても良いですが、非常に手間…。
ソースのブラックボックス化
ブレークポイントからステップインなどで細かく処理を進めていると
サードパーティのライブラリのようなデバッグの必要のないコードに入り込むときがあります。
ソースコード上で右クリックするとメニュー上でブラックボックス化が可能です。
これによって、デバッガがこのスクリプトを無視するようになります。
ブラックボックス化されたスクリプトは↓このように設定されていきます。
ログの出力
条件付きブレークポイントと同様に行を右クリックするとログポイントの設定メニューがあります。
試しに３つの変数を記載して確定すると、この行にも黄色い矢印が設定されます。
該当行が実行されるときにはconsoleタブに変数の中身が出力されています。
変数の監視
ログポイントでは該当行実行時の変数の中身を表示することができましたが
特定の変数をしばらく追い続けたい状況もあると思います。
Sourcesタブにある「Watch」には監視したい変数を設定します。
変数名を設定しておくと、処理が一時停止されるたびに内容が更新されます。
「Scope」にも同様の表示がありますが、実行箇所ごとに表示が大きく変化するため
継続的に変化を追うためには「Watch」で監視をした方が良いと思います。
もっと頻繁に変化する値をデバッグしたい場合は
Consoleタブにある目玉ボタン（Live Expression）を利用します。
静止画なのでわかりませんが、記載した処理が250msごとに実行され表示されます。
ロジックを左右するローカル変数の変化などの監視はできませんが
タイマー処理や座標の調整などのデバッグに活用できそうです。
ブラウザ上でのコード編集
ブレークポイントで一時停止している状態においては
consoleタブ上で実行時のローカル変数にも触れることができます。
例として、32行目でコードを一時停止しておきます。
この状態でconsoleタブに移動すると、ローカル変数の内部を表示できました。
直後に「こう変えたら正しい挙動になるのでは…？」という検証もできます。
ちなみにSourcesタブ上で直接ソースを書き換えてしまうことも可能です。
大元のソースとブラウザを何度も行き来する必要がなくなりました。
まとめ
console.log()やalert()を埋めていた日々は何だったんでしょう。
まだまだ効率の良い開発を追求できそうです。