), который находится на главной панели инструментов или под меню Hamburger (
), затем выбери "Service Workers".Есть несколько способов открыть страницу about:debugging:
), который находится на главной панели инструментов или под меню Hamburger (), затем выбери "Service Workers".Когда about:debugging открывается, с левой стороны будет видна боковая панель , позволяющая переключаться между двумя основными видами : один вид для "add-ons" и второй для "workers".
The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.
This page enables you to do two things:
Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.
The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".
If the "Debug" button is disabled, check the "Enable add-on debugging" box.
If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.
{{EmbedYouTube("tGGcA3bT3VA")}}
See the page on the Add-on Debugger for all the things you can do with this tool.
The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.
You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the Developer Tools Settings.
With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory.
You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.
{{EmbedYouTube("sAM78GU4P34")}}
The big advantages of this method, compared with installing an add-on from an XPI, are:
If you install the add-on in this way, what happens when you update the add-on's files?
Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.
From Firefox 48 onwards:
permissions, content_scripts, browser_action or any other keys will take effect.Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.
In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.
Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.
Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.
The Workers page shows your workers, categorised as follows:
You can connect the developer tools to each worker, and send push notifications to service workers.
This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.
For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.
Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:
{{EmbedYouTube("Z8ax79sHWDU")}}
At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:
{{EmbedYouTube("wy4kyWFhFF4")}}
Before Firefox 47, service workers were only shown when they were actually running.
New in Firefox 48.
Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:
Click the link to unregister the service worker.
Sending push events in about:debugging is new in Firefox 47.
To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:
{{EmbedYouTube("62SkLyA-Zno")}}
In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.
Service workers can be unavailable for several reasons:
dom.serviceWorkers.enable preference is set to false in about:config.