- The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports two main sorts of targets: restartless add-ons and workers.
Opening the about:debugging page
There are several different ways to open about:debugging:
- Type "about:debugging" in the Firefox URL bar.
- New in Firefox 47: in the Tools > Web Developer menu, click "Service Workers".
- New in Firefox 47: click the wrench icon (), which is in the main toolbar or under the Hamburger menu (), then select "Service Workers".
When about:debugging opens, on the left-hand side, you'll see a sidebar enabling you to switch between the two main views: one for add-ons and one for workers.
This page enables you to do two things:
- Load an add-on temporarily from disk
- Connect the Add-on Debugger to any restartless add-ons
Connecting the Add-on Debugger
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.
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.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
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.
Loading a temporary add-on
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.
The big advantages of this method, compared with installing an add-on from an XPI, are:
- you don't have to rebuild an XPI and reinstall when you change the add-on's code
- you can load an add-on without signing it and without needing to disable signing.
Updating a temporary add-on
If you install the add-on in this way, what happens when you update the add-on's files?
Before Firefox 48
- If you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
- If you change files that stay loaded the whole time, like background scripts, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.
- If you change files that are only parsed at install time, like the manifest.json file, you'll need to restart Firefox, then load the add-on again.
Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.
Firefox 48 onwards
From Firefox 48 onwards:
- as before: if you change files that are loaded on demand, like content scripts or popups, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.
- there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says:
Note that at the moment, "Reload" does not update the add-on's name and description that are displayed in about:debugging and about:addons. We're working on this in bug 1267870.
The Workers page shows your workers, categorised as follows:
- All registered Service Workers
- All registered Shared Workers
- Other workers, including Chrome Workers and Dedicated Workers
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.
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:
Before Firefox 47, service workers were only shown when they were actually running.
Unregistering service workers
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 to service workers
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:
Service workers disabled
In Firefox 49 a warning message will be displayed in Service Workers if service workers are unavailable
Service workers and service workers debugging can be unavailable for several reasons:
- If you are using a Private Browsing window
- If your History preference is set to "Never Remember History" or "Always use private browsing mode"
- If the preference
dom.serviceWorkers.enable is set to false