[ソース] で変数を監視

Chrome DevTools を使用すると、アプリケーション全体の複数の変数を簡単に確認できます。ソース内で変数を監視すると、コンソールを使用せずコードの改善に集中できます。

[Sources] パネルでは、アプリケーション内の変数を監視できます。デバッガ サイドバーの [watch] セクションにあります。この機能を使用すると、オブジェクトをコンソールに繰り返し記録する必要がなくなります。

変数の追加

ウォッチリストに変数を追加するには、セクション見出しの右側にある追加アイコンを使用します。インライン入力が開き、監視する変数名を指定します。入力したら、Enter キーを押してリストに追加します。

ウォッチャーには、追加された変数の現在の値が表示されます。変数が設定されていないか見つからない場合は、値に が表示されます。

変数の更新

変数の値は、アプリケーションが動作し続けるにつれて変化する可能性があります。実行をステップ実行しない限り、ウォッチリストは変数のライブビューではありません。ブレークポイントを使用して実行をステップ実行すると、監視対象の値が自動的に更新されます。リスト内の変数を手動で再チェックするには、セクション見出しの右側にある更新ボタンを押します。

更新がリクエストされると、現在のアプリケーションの状態が再確認されます。監視対象アイテムはすべて現在の値で更新されます。

変数の削除

作業を高速化するために表示対象を最小限に抑えるには、ウォッチリストから変数を削除する必要がある場合があります。これを行うには、変数にカーソルを合わせてから、右側に表示される削除アイコンをクリックします。