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