about:debugging ページは、1 か所からさまざまなデバッグ対象に Firefox の開発ツールを接続できる場所を提供します。現在サポートしているデバッグ対象は、リスタートレスアドオン、タブ、Worker の 3 種類です。
about:debugging ページを開く
about:debugging を開く方法がいくつかあります:
- Firefox の URL バーに "about:debugging" と入力します。
- Firefox 47 の新機能: メニューの [ツール] > [ウェブ開発] で、[Service Worker] をクリックします。
- Firefox 47 の新機能: メインツールバーまたはハンバーガーメニュー (
) の中にあるレンチのアイコン (
) をクリックして、[Service Worker] を選択します。
about:debugging を開くと左側に、2 つの主要なビュー (アドオンと Worker) を切り替えることができるサイドバーがあります。
アドオン
about:debugging のアドオンセクションは、基本的なブートストラップ型拡張機能、Add-on SDK を使用したアドオン、WebExtensions を含む、リスタートレスアドオンのみサポートしています。
このページでは 2 つのことを行えます:
- ディスクから一時的にアドオンを読み込む
- アドオンデバッガー をリスタートレスアドオンに接続する
アドオンデバッガーを接続する
現在、WebExtensions のデバッグにはアドオンデバッガーではなくブラウザーツールボックスを使用することを推奨していますので注意してください。詳しくは WebExtensions のデバッグ をご覧ください。
about:debugging のページに、現在インストールされているリスタートレスアドオンを一覧表示します (注記: このリストには、Firefox のプリインストールアドオンも含まれます)。アドオン名の隣に、[デバッグ] ボタンがあります。
[デバッグ] ボタンが無効化されている場合は、[アドオンのデバッグを有効化] にチェックを入れてください。
[デバッグ] をクリックすると、接続を許可するかを尋ねるダイアログボックスが表示されます。[OK] をクリックすると、アドオンデバッガー を新しいウィンドウで表示します。時々、デバッガーのウィンドウが Firefox のメインウィンドウの裏に隠れる場合がありますので注意してください。
このツールでできることについては、アドオンデバッガー のページをご覧ください。
[アドオンのデバッグを有効化] は、設定項目 devtools.chrome.enabled および devtools.debugger.remote-enabled を有効化することにより動作します。アドオンのデバッグを有効にするため、両方の設定を有効にしなければなりません。チェックボックスにチェックを入れると両方の設定を true に、またチェックを外すと両方の設定を false に変更します。
about:config で設定項目を変更する、あるいは 開発ツールのオプション で [ブラウザーとアドオンのデバッグを有効] および [リモートデバッガーを有効] にチェックを入れる方法も使用できます。
一時的にアドオンを読み込む
[一時的なアドオンを読み込む] ボタンを使用して、任意の種類のリスタートレスアドオンを、ディスク上のディレクトリーから一時的に読み込むことができます。ボタンをクリックして、アドオンのファイルがあるディレクトリーに移動してファイルを選択してください。
アドオンのパッケージングや署名は不要です。Firefox を再起動するまで、アドオンがインストールされた状態になります。
XPI からアドオンをインストールする場合と比較して、この方法には以下の大きな利点があります:
- アドオンのコードを変更したときに、XPI をリビルドして再インストールする必要はありません。
- 署名機能を無効化する必要なしに、未署名のアドオンを読み込むことができます。
一時的なアドオンを更新する
この方法でアドオンをインストールした場合に、アドオンのファイルを更新するとどうなるのでしょうか?
Firefox 48 より前
- content scripts や ポップアップ といったオンデマンドで読み込むファイルを変更した場合は、変更箇所は自動的に取り込まれて、次に content script を読み込むときやポップアップを表示するときに確認できます。
- background scripts といった終始読み込まれているファイルを変更した場合は、about:addons ページでアドオンを無効化および再有効化することにより、変更箇所を取り込むことができます。
- manifest.json ファイルといったインストール時にのみパースされるファイルを変更した場合は、Firefox を再起動してアドオンを再度読み込まなければなりません。
Firefox 48 より前のバージョンでは、Firefox を再起動せずに [一時的なアドオンを読み込む] ボタンを押してアドオンを再度読み込むことはできませんので注意してください。
Firefox 48 以降
Firefox 48 から以下のようになります:
- 従来どおり: content scripts や ポップアップ といったオンデマンドで読み込むファイルを変更した場合は、変更箇所は自動的に取り込まれて、次に content script を読み込むときやポップアップを表示するときに確認できます。
- 上記以外の場合のよりよい方法: [デバッグ] ボタンの隣にある [再読み込み] をクリックします。これは以下のことを行います:
- background scripts のような、永続的なスクリプトを再読み込みします。
- manifest.json ファイルを再度解析しますので、
permissions、content_scripts、browser_actionなどのキーの変更点の効果が生じます。
Firefox 49 より、再読み込みボタンは一時的なアドオンに限り使用できますので注意してください。他のアドオンでは無効になります。
タブ
Firefox 49 より、about:debugging で タブ ページを使用できます。これは現在の Firefox のインスタンスで開いている、デバッグ可能なすべてのタブを一覧表示します。
それぞれの項目の隣に、デバッグ ボタンがあります。ボタンをクリックするとそのタブに特化したツールボックスが開き、タブの内容をデバッグできます。
この機能は、デスクトップ版のタブのデバッグで即座に有用なものではありません。すでに十分なほど簡単に、タブをデバッグするためのツールボックスを開くことができます。一方、リモートデバッグのサポートを始めるために about:debugging を使うときはとても有用であり、またこのページは、モバイルデバイスのブラウザーやシミュレーターなどでデバッグが可能なタブを表示します。この作業の最新状況については バグ 1212802 をご覧ください。
Worker
Worker ページでは、Worker を以下のようにカテゴライズして表示します:
- すべての登録済み Service Worker
- すべての登録済み Shared Worker
- Chrome Worker や Dedicated Worker を含む、その他の Worker
それぞれの Worker に開発ツールを接続する、および Service Worker にプッシュ通知を送ることができます。
Service Worker の状態
Firefox 52 より Service Worker のリストで、Service Worker の ライフサイクル における状態を表示します。以下の 3 種類の状態に分類します:
- "登録中": これは Service Worker の初期登録から、ページを制御するまでの間のすべての状態を示します。すなわち "installing"、"activating"、"waiting" の状態を含みます。
- "実行中": Service Worker は、現在実行中です。Service Worker はインストールおよびアクティベーション済みであり、現在イベントを処理しています。
- "停止": Service Worker はインストールおよびアクティベーション済みですが、アイドル状態の後に終了されました。
この章では https://serviceworke.rs/push-simple/ にある、シンプルな Service Worker のデモを使用しています。
Worker をデバッグする
すでに Service Worker が実行中である場合は、Worker の隣に [デバッグ] ボタンおよび [プッシュ] ボタンがあります。Worker が未実行である場合は、[開始] ボタン 1 つだけがあります。ボタンをクリックすると Service Worker が開始します。
[デバッグ] ボタンを押すと、JavaScript デバッガーとコンソールを Worker に接続します。ブレークポイントを設置する、コードをステップ実行する、変数を確認する、コードを評価するなどの操作ができます:
Worker を登録する
最初は、Service Worker や Shared Worker の配下に Worker が表示されていないでしょう。Worker を登録すると、リストが更新されます:
Firefox 47 より前のバージョンでは、Service Worker が実際に動作したときにのみ表示します。
Service Worker の登録を解除する
Firefox 48 の新機能
Firefox 48 より、登録済みの Service Worker の隣に [登録解除] という名称のリンクがあります:
リンクをクリックすると、Service Worker の登録を解除します。
Service Worker に Push イベントを送る
about:debugging での Push イベント送信は、Firefox 47 の新機能です。
プッシュ通知をデバッグするには、PushEvent のリスナーにブレークポイントを設定してください。ただし、プッシュ通知のデバッグはサーバーが不要であり、ローカルで実施できます。[プッシュ] ボタンをクリックすると、Service Worker に Push イベントを送信できます:
互換性がない Service Worker
Firefox 49 より、現在のブラウザーの設定に対して互換性がないため使用やデバッグが行えない Service Worker について、Worker ページの Service Worker セクションで警告メッセージを表示します。
Service Worker は、いくつかの理由で使用できない場合があります:
- プライベートブラウジングウィンドウを使用しているとき
- 履歴の設定を、[履歴を一切記憶させない] または [常にプライベートブラウジングモード] に設定しているとき
about:configで設定項目dom.serviceWorkers.enableを false に設定しているとき