開発ツール

UI ツアー

このページは、Firefox 52 以降の Firefox Nightly および Firefox Developer Edition で使用できる JavaScript デバッガーについて説明します。

これより前のバージョンの Firefox や Firefox Beta および Release については、デバッガー (Firefox 52 より前) をご覧ください。

このバージョンのデバッガーを使用できる環境で旧デバッガーに戻す必要がある場合は、about:config で設定項目 "devtools.debugger.new-debugger-frontend" に false を設定してください。

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

ソースリストペイン

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

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

ソースペイン

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

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

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

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

ツールバー

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

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

ブレークポイント一覧

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

コールスタック

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

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

スコープ

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

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

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

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