開発者ツール上で、手軽に値や関数の戻り値をリアルタイム監視できる機能、Live Expressionが実装されています。
頻繁には使用しませんが、覚えておくとデバックする際に少し役に立つかもしれません。
Live Expressionの実装はChrome 70から
参考：https://developers.google.com/web/updates/2018/08/devtools
使用方法
DevTools（F12キーで表示）のコンソール内にある目玉のマークをクリックする事で、新しく監視する式を入力できます。
監視したい式（変数のみでも可）を入力し、他の箇所をクリックすることで監視が開始されます。
250ミリ秒ごとに更新が行われ値が再表示されます。
Sourcesパネル Watch機能との使い分け
DevToolsには同様の機能として、SourcesパネルのWatchセクションに値の監視機能があります。
この機能も同様で、式を入力しその式の値を画面上に表示する機能になっています。
Live Expressionとの違いは
- 表示位置
- リフレッシュタイミング
の二点です。
表示位置
それぞれLive Expressionはコンソールの上部、WatchはSourvesパネルの該当セクションになります。
Live Expressionを表示するコンソールは、どのパネルでも表示されるので常に監視しておきたい値を表示させるのに適しています。
反面、コンソール表示とのトレードオフなデザインになっているため、複数の式を監視するのには適していません。
Watchは専用のセクションに収まっていて、複数の式を表示するのに適したデザインをしています。
リフレッシュタイミング
Live Expressionは250ミリ秒毎、Watchは更新ボタンを押した際か、ブレークポイントで止めた後ステップ実行の時になります。
使い分け
Live Expressionは少ない数の式を、画面を操作しながら監視する用途に適しています。
使用例としては、画面全体で使用する頻繁に書き換わる変数を監視するのに使用しています。
Watchはステップ実行でのデバック中に変更される変数などを監視するのに向いています。
使用例としては、バグの調査の際におかしくなる変数を入れておき、ステップ実行で変数の変化を確認するような例が挙げられます。
注意
副作用のある関数を使用している場合、リフレッシュが走るたびに実行されてしまうため注意が必要です。
関数を監視する場合には、副作用のないgetterなどに留めておきましょう。