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

ソースリストペイン

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

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

 

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

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

アウトラインビュー

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

 

ソースペイン

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

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

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

  • 19 行目は通常のブレークポイントです。
  • 40 行目は通常のブレークポイントであり、デバッガーはここで停止しています。
  • 22 行目は条件付きブレークポイントです。

ツールバー

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

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

ブレークポイント一覧

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

コールスタック

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

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

スコープ

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

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

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto, wbamberg, yyss
最終更新者: silverskyvicto,