[ソース] で変数を監視

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

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

変数の追加

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

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

変数の更新

変数の値は、アプリの継続的な動作によって変更される場合があります。ウォッチリストは、実行をステップ実行している場合を除き、変数のライブビューではありません。breakpointsを使用して実行をステップ実行すると、監視対象の値が自動的に更新されます。リスト内の変数を手動で再確認するには、セクションの見出しの右側にある更新ボタンを押します。

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

変数の削除

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