[Sources] での変数の監視

By Jonathan Garbee

Google Developer Expert for Web Technology

Chrome DevTools では、アプリケーション全体での複数の変数を簡単に確認できます。[Sources] 内で変数を監視することにより、コンソールにアクセスすることなくコードの改善に集中できます。

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

変数の追加

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

監視機能により、追加された時点の変数の値が表示されます。変数が設定されていないか、見つからない場合は、その値に対して <Not Available> が表示されます。

変数のアップデート

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

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

変数の削除

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