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