Mozilla Firefoxの使用方法JavaScript デバッガ (JavaScript Debugger)
JavaScriptのコードにブレークポイントを設定して、ステップ実行などを行えます。名前が同じで混同しそうですが、JavaScript Debugger (Venkman) ではありません。
SyntaxErrorなどのエラーが含まれるファイルは、デバッグできません。目的のファイルをJavaScript デバッガで見つけられない場合には、ブラウザコンソールでエラーが発生していないか確認します。
基本
起動方法
JavaScript デバッガは、そのデバッグ対象によって起動方法が異なります。それぞれ[Firefoxボタン]のメニューから、
- Firefoxで実行しているWebコンテンツ … 【Web開発 → デバッガ】
- Firefoxのシステム関連 (アドオンなど) … 【Web開発 → ブラウザツールボックス
(ブラウザデバッガ)】 - Firefox OSなどの外部デバイス … 【Web開発 → 接続】
と選択することで起動できます。なおメニューに「ブラウザデバッガ」の項目が表示されないときには、ブラウザデバッガの起動方法を参照してください。
デバッグ対象のソースを編集したときは、それを反映するにはJavaScript デバッガを再起動する必要があります。
Firefoxを再起動したときは、JavaScript デバッガも再起動させる必要があります。
オプション設定
ツールバー右側の[デバッガオプション]をクリックすると、以下の設定ができます。
| 設定 | 有効にした場合の作用 |
|---|---|
| 例外発生で停止 (Pause on exceptions) |
例外が発生したときにスクリプトが停止する |
| キャッチした例外を無視 (Ignore caught exceptions) |
例外が捕捉されなかった場合のみ、スクリプトが停止する (例外発生で停止のオプションと同時に使用する) |
| 起動時にデバッガを開く (Show panes on startup) |
起動時に変数ペインが表示される |
| 計算可能なプロパティのみ表示 (Show only enumerable properties) |
列挙可能ではないプロパティが表示されなくなる |
| 変数フィルタボックスを表示 (Show variables filter box) |
変数ペインに検索ボックスが表示される |
| 元のソースを表示 (Show original sources) |
コンパイルされたJavaScriptの場合、それの元のソースが表示される |
ショートカットキー
| 機能 | キー |
|---|---|
| 停止/復帰 | F8 |
| ステップオーバー | F10 |
| ステップイン | F11 |
| ステップアウト | Shift + F11 |
| スクリプト選択 | Ctrl + P |
フォントサイズ
デバッガのフォントサイズは、ショートカットキーで変更できます。
| 操作 | キー |
|---|---|
| サイズを大きく | Ctrl + + |
| サイズを小さく | Ctrl + - |
| サイズを元に戻す | Ctrl + 0 |
なおドキュメントにはフォントのサイズを変更すると記載されていますが、実際にはアイコンや表示領域のサイズも変更されます。
ウィンドウ構成
ツールバー右側の[左右のウィンドウを表示]をクリックすると、対象とするスクリプトの変数や関数の一覧が表示されます。
 |
→ |  |
ソースペイン (Source pane)
ソースペインには、JavaScript デバッガの起動前に読み込まれていないファイルは表示されません。
ソースペインでのコンテキストメニュー
ブラックボックス化 (Black boxing)
外部のライブラリなど、デバッグする必要のないソースをデバッグの対象から除外できます。ソースのブラックボックス化 - デバッガ - 開発ツール | MDN
ソースをブラックボックス化するには、対象のソースを選択した状態で、ウィンドウ左下の目玉アイコンをクリックします。
ソースを整形 (Prettify Source)
ソースペインのコンテキストメニューから[ソースを整形]を選択することで、ソースの書式を整えられます。これは難読化されたソースに対して特に有効です。(この機能はFirefox 27で追加されました。762761 – An option to deobfuscate javascripts in the debugger)
コールスタック ペイン (Call stack pane)
コールスタックを確認できます。しかしこのペインを開かなくても、ウィンドウ上部のリストでもコールスタックは確認できます。
これはFirefox 29で追加された機能です。それより前の環境ならば、コンソールAPIのスタックトレースでブラウザコンソールへ出力して確認できます。
変数ペイン (Variable pane)
デバッガ右側のペインには、現在のスコープで使用できる変数が表示されます。このペインが表示されないときには、ツールバー右側の[左右のウィンドウを表示]をクリックします。
ウォッチ式 (Watch expressions)
ウォッチ式には、任意のJavaScript式を記述できます。よって関数の結果を確認することにも利用できます。ただし式が評価されるのは、コードの実行が停止しているときに限られます。
式の評価のタイミング
ウォッチ式は、いずれかのウォッチ式を編集するか、またはコードの実行が停止するたびに評価されます。それは、たとえば数値型の変数xに対してx++というウォッチ式を記述すれば、その数値の変化で評価されるタイミングを確認できます。
式の削除
式の右に表示される「×」アイコンをクリックするか、式にフォーカスを合わせた状態でDeleteまたはBackspaceを押下することで、追加したウォッチ式を削除できます。
変数を検索 (Filter variables)
デバッガオプションで[変数フィルタボックスを表示]を有効にすることで、変数ペインの表示をフィルタできるようになります。フィルタは、変数の名前と値に適用されます。
変数によっては、フィルタが適用されないことがあります。展開されて表示されたことのない変数には、検索ではマッチしないようです。
イベントペイン (Events pane)
イベントペインでは、イベントハンドラが割り当てられているイベントを一覧できます。このペインは、変数ペインの上部のタブを切り替えることで表示できます。(この機能は、Firefox 27で追加されました。)
イベントはイベントタイプごとに分類され、各イベントは、
イベント名 on イベントターゲット in ソースファイル
の書式で表示されます。そして各イベントのチェックボックスにチェックを入れることで、そのイベントがハンドルされる関数でブレークさせることができます。
スクリプトフィルタ (Script Filter)
スクリプトフィルタでは、
- ファイル
- テキスト
- 関数
- 変数
を対象に、条件を指定して検索できます。
| 検索対象 | 演算子 | キー |
|---|---|---|
| ファイル名でファイルを検索※1 | なし | Ctrl + P |
| すべてのファイルから、ファイル内のテキストを検索 | ! | Ctrl + Alt + F |
| すべてのファイルから、関数を検索 | @ | Ctrl + D |
| 現在のファイルから、ファイル内のテキストを検索 | # | Ctrl + F |
| 現在の実行スコープで、変数を検索 (変数を検索と同じ) | * | Ctrl + Alt + V |
※1 JavaScript デバッガの起動前に読み込まれていないファイルは、検索の対象となりません。また起動後に作成されたファイルや、ファイル名を変更されたファイルも同様に対象となりません。目的のファイルが見つからない場合には、FirefoxとJavaScript デバッガの両方を再起動させてから、再度検索を試みます。
ブレークポイント (Breakpoints)
ブレークポイントは、行番号をクリックすることで設定できます。
ブレークポイントで制御を停止させたときは、そこから復帰させるまでブラウザの操作はできません。
スクリプトがブレークポイントで停止しないときには、Firefoxを再起動することで改善できることがあります。それでも停止しないときは、停止させたい場所に
try { throw null; }
catch(e) {}
のように例外を投げるコードを追加して、デバッガオプションで[例外発生で停止]にチェックを入れ、[キャッチした例外を無視]のチェックを外します。こうすることで、このコード部で停止するようになります。
ブレークポイント以外で停止するときは、デバッガオプションの[例外発生で停止]がチェックされていないか確認します。
イベント
イベントの発生時にブレークさせるには、イベントペインから設定します。