UI ツアー

本記事は、JavaScript デバッガのユーザインターフェイスの主要部を紹介するクイックツアーです。デバッガの UI は 6 つの主要なセクションに分かれており、順番に説明していきます:

ツールバーは 4 つのセクションで構成されます:

左側にある 4 つのボタンは、以下の機能を実行します:

停止/復帰 (F8): デバッグ中のスクリプトの実行を停止および再開します。上図のようにボタンが青色で "押し込まれている" ときは、ボタンを押して停止したかブレークポイントにヒットしたことにより、スクリプトが停止していることを表します。
ステップオーバー (F10): JavaScript コードで現在の行をステップ実行します。
ステップイン (F11): JavaScript で現在の行にある関数呼び出しにスキップします。
ステップアウト (Shift-F11): 現在の関数を抜けるまで、スクリプトを実行します。

コールスタックの可視化では、実行を停止している時点のコールスタックを表示します。

ソースリストペイン

ソースリストペインでは、ページに読み込まれたすべての JS ソースファイルを一覧表示しており、デバッグするファイルを選択できます。ソースリストペインとコールスタックペインは画面上の場所を共有しており、ペインの上部にあるタブでこれらを切り替えできます。

ソースファイルは、読み込み元に応じたさまざまな見出しによってグループ化しています。これらから任意のファイルを選択でき、選択したファイルはソースペインに読み込みます。

ソースファイルに設置したブレークポイントはすべて、ファイル名の下に一覧表示します。各ブレークポイントの隣にあるチェックボックスで、ブレークポイントの有効化/無効化が可能です。リストにあるブレークポイントの項目を右クリックすると、以下の操作が可能なコンテキストメニューを表示します:

ソースリストの項目にコンテキストメニューがあり、ソースの提供元の URL をコピーしたり、URL を新しいタブで開くことができます:

デバッガの左側にあるもうひとつのタブでは、コールスタックを縦に並べて表示します:

各行でコールスタックのレベルを示しており、現在のスタックフレームが最上段に置かれます。行では現在実行している関数の名前と、ソースファイルおよび行番号へのリンクを表示します。

ここでは、現在読み込んでいる JavaScript ファイルを表示します。ブレークポイントは青色の矢印を行番号に重ねて表示しており、またヒットしているブレークポイントは緑色の矢印で表示します:

ソースペインでは、コンテキストメニューで以下の操作が可能です:

Firefox 44 より、関数を呼び出している箇所から関数を定義している箇所へジャンプできます。control キー (Mac OS X では command キー) を押下しながら、関数名をクリックしてください。

ソースペインで変数にマウスポインタを載せると、現在の変数の値を表示するポップアップが現れます:

この機能により変数ペインを開いて検索することなく、すばやく変数の値を確認できます。

変数ペインはスクリプトの実行中に、内部状態の調査や変更が可能です:

変数ペインは画面領域をイベントペインと共有しており、ペイン上部のタブでそれらを切り替えることができます。

イベントペインでは、現在コードからリスナが割り当てられている、すべての DOM イベントを一覧表示します:

これは画面領域を変数ペインと共有しており、ペイン上部のタブでそれらを切り替えることができます。

イベントはタイプごとにグループ化します。前出のスクリーンショットでは 4 つのタイプがあります: Interaction、Keyboard、Mouse、Navigation です。各タイプの下に、コードにリスナが存在するすべてのイベントを以下の構文で列挙します:

[イベント名] on [イベントターゲット] in [ソースファイル]

イベント名の隣にあるチェックボックスにチェックを入れると、デバッガはイベントリスナの最初の行でブレークします。イベントタイプの隣にあるチェックボックスにチェックを入れると、デバッガはタイプの下に列挙しているすべてのイベントでブレークします。