UI ツアー
本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。
ソースリストペイン
ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。
Ctrl + P (Mac では Cmd + P) を使用して ファイルを検索 できます。
興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。
これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。
アウトラインビュー
アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。
ソースペイン
これは、現在読み込んでいる JavaScript ファイルを表示します。
ソースペインにフォーカスがあるときに、Ctrl + F (Mac では Cmd + F) を使用して ファイル内の文字列を検索 できます。
ブレークポイント は、青色の矢印を行番号に重ねて表示します。条件付きブレークポイント は、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:
- 19 行目は通常のブレークポイントです。
- 40 行目は通常のブレークポイントであり、デバッガーはここで停止しています。
- 22 行目は条件付きブレークポイントです。
ツールバー
右側のペインの上部にツールバーがあります:
ツールバーの構成は以下のとおりです:
- スクリプト内でデバッガーの動作を制御する 4 つのボタン:
- 復帰/停止 (F8): デバッグ中のスクリプトの実行を停止および再開します。[復帰] アイコンが表示されているときは、このボタンを使用して停止したかブレークポイントに当たったためにスクリプトが停止しています。
- ステップオーバー (F10): JavaScript コードで現在の行をステップ実行します。
- ステップイン (F11): JavaScript で現在の行にある関数呼び出しにスキップします。
- ステップアウト (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。
- (1) すべての例外を無視する、(2) キャッチしていない例外で停止する、(3) すべての例外で停止する を切り替えるボタン
ブレークポイント一覧
ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、ブレークポイントの有効/無効を切り替える チェックボックスがあります:
コールスタック
デバッガーが停止したときに、コールスタックを表示します:
コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。
スコープ
右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:
オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。