UI ツアー

本記事は、JavaScript デバッガーのユーザーインターフェイスの主要部を紹介するクイックツアーです。UI は、縦に 3 つのパネルへ分かれています。

ソースリストペイン

ソースリストペインでは、ページに読み込まれたすべての JavaScript ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースはトップレベルでオリジン別に分類しており、またその配下では、ソースを提供するディレクトリーの構造別に分類しています。

Ctrl + P (Mac では Cmd + P) を使用してファイルを検索できます。

興味のあるディレクトリを右クリックし、[Set directory root] を選択すると、[Source] リストペインのファイルリストが簡素化されます。

これでソースリストペインのルートがプロジェクトのルートになり、よりクリーンで簡単に表示をナビゲートできます。

アウトラインビューには、現在開いているファイルをナビゲートするためのツリーが表示されます。それを使用して、関数、クラスまたはメソッド定義に直接ジャンプします。

これは、現在読み込んでいる JavaScript ファイルを表示します。

ソースペインにフォーカスがあるときに、Ctrl + F (Mac では Cmd + F) を使用してファイル内の文字列を検索できます。

ブレークポイントは、青色の矢印を行番号に重ねて表示します。条件付きブレークポイントは、橙色の矢印です。ブレークポイントで停止すると、行全体が緑色になります。以下のスクリーンショットには、ブレークポイントが 3 か所あります:

右側のペインの上部にツールバーがあります:

ツールバーの構成は以下のとおりです:

スクリプト内でデバッガーの動作を制御する 4 つのボタン:
- 復帰/停止 (F8): デバッグ中のスクリプトの実行を停止および再開します。[復帰] アイコンが表示されているときは、このボタンを使用して停止したかブレークポイントに当たったためにスクリプトが停止しています。
- ステップオーバー (F10): JavaScript コードで現在の行をステップ実行します。
- ステップイン (F11): JavaScript で現在の行にある関数呼び出しにスキップします。
- ステップアウト (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。
(1) すべての例外を無視する、(2) キャッチしていない例外で停止する、(3) すべての例外で停止するを切り替えるボタン

ツールバーの下に、設定したすべてのブレークポイントを表示します。それぞれのブレークポイントの隣に、ブレークポイントの有効/無効を切り替えるチェックボックスがあります:

デバッガーが停止したときに、コールスタックを表示します:

コールスタックはそれぞれのレベルに 1 行ずつ割り当てており、関数名・ファイル名・行番号を表示します。行をクリックすると、ソースペインでソースを開きます。

右側のペインに、展開用の三角印がついている "スコープ" というラベルがあります。デバッガーが停止したときにこのセクションを展開すると、プログラムのその時点でスコープ内に存在するすべてのオブジェクトを確認できます:

オブジェクトはスコープ別に分類します。もっともローカル性が高いオブジェクトを最初に、またグローバルスコープ (ページのスクリプトでは Window) を最後に表示します。