[ソース] で変数を監視

Chrome DevTools を使用すると、アプリケーション全体の複数の変数を簡単に確認できます。[Sources] で変数を監視することで、コンソールから離れてコードの改善に集中できます。

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

変数を追加する

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

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

変数の更新

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

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

変数を削除する

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