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 three main sorts of targets: restartless add-ons, tabs, and workers.
Opening the about:debugging page
There are several different ways to open about:debugging:
- Type "about:debugging" in the Firefox URL bar. 在firefox地址栏输入 "about:debugging"
- New in Firefox 47: in the Tools > Web Developer menu, click "Service Workers". 在Firefox 47中，从工具>网络开发菜单中点击人工调试
- New in Firefox 47: click the wrench icon (), which is in the main toolbar or under the Hamburger menu (), then select "Service Workers". 在firefox47中，点击扳手图标，它在主工具栏或者三杠菜单下，然后点击人工调试。
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". 关于组件附加页面， 调试列出当前安装的所有无重启加载项（请注意，此列表可能包含预装在Firefox中的加载项）。 每个条目旁边都有一个标签为“调试”的按钮
If the "Debug" button is disabled, check the "Enable add-on debugging" box.
如果“Debug”按钮被禁用，请选中“Enable add-on debugging”框。
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. 如果您点击“debug ”，您会看到一个对话框，要求您接受传入的连接。 点击“OK”，调试附加组件将在一个单独的窗口中开始。 请注意，有时调试器窗口被Firefox主窗口隐藏。
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.
优先选用用devtools.chrome.enabled和devtools.debugger.remote来启用“启用附加调试”按钮。 这两个首选项都必须是一定能启用附加程序调试。 选中该框将两个偏好设置为true，并取消选中它们都设置为false。
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. The temporary add-on will be displayed under the "Temporary Extensions" header. 通过使用“Load Temporary Add-on”按钮，您可以从磁盘上的某个目录临时加载任何无需重启组件。 只需点击按钮，导航到包含组件文件的目录，然后选择该目录中的任何文件。 临时插件将显示在“临时扩展”标题下
You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox. 您不必打包或启动组件。 附加组件将保持安装状态，直到您重新启动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 您不必重建XPI，并在更改组件的代码时要重新安装
- 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 在firefox48之前
- 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. 如果您更改一直会更新的文件（如后台脚本），则可以通过在about：addons页面中禁用它然后在about：addons页面重新启用插件
- 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. 如果您仅在安装了的解析文件上更改（如manifest.json文件），则需要重新启动Firefox，然后重新加载组件。
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 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:
- 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.
Service worker state
From Firefox 52, the list of service workers shows the state of the service worker in its lifecycle. Three states are distinguished:
- "Registering": this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the "installing", "activating", and "waiting" states.
- "Running": the service worker is currently running. It's installed and activated, and is currently handling events.
- "Stopped": the service worker is installed and activated, but has been terminated after being idle.
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 not compatible
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:
- 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
dom.serviceWorkers.enablepreference is set to false in