UI ツアー

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

• ツールバー
• ソースリストペイン
• コールスタックペイン
• ソースペイン
• 変数ペイン
• イベントペイン

ツールバー

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

• スクリプト内での動きを制御する ボタン
• コールスタックの可視化
• スクリプトフィルター
• 以下の操作を行うボタン:
  • 変数ペイン や イベントペイン の展開/折りたたみ
  • デバッガーの 設定

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

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

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

ソースリストペイン

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

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

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

• 当該ブレークポイント、すべてのブレークポイント、あるいは他のブレークポイントを有効化、無効化、あるいは削除する
• 当該ブレークポイントを条件付きにする (すでに条件付きである場合は、条件を変更する)

ソースリストの下部にある 3 個のアイコンで、ソースのブラックボックス化、圧縮された JS ファイルの整形、すべてのブレークポイントの有効/無効 の切り替えが可能です。

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

コールスタックペイン

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

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

ソースペイン

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

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

• ブレークポイントを設置
• 条件付きブレークポイントを設置
• 選択範囲のウォッチ式を追加
• スクリプトフィルター を使用して検索やフィルターを行う

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

変数のポップアップ

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

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

変数ペイン

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

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

イベントペイン

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

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

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

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

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