Note: If you want to debug a specific add-on that is restartless or SDK-based then try the Add-on Debugger. Use the Browser Toolbox for add-ons that are neither.
Enabling the Browser Toolbox
The Browser Toolbox is not enabled by default. To enable it you need to check the settings "Enable chrome and addon debugging" and "Enable remote debugging".
Opening the Browser Toolbox
Open the Browser Toolbox through the menu button and the menu items "Developer" then "Browser Toolbox".
From Firefox 39, you can also open it with the Ctrl + Alt +Shift + I key combination ( Cmd + Opt +Shift + I on a Mac).
You'll then be presented with a dialog like this (this can be removed by setting the
devtools.debugger.prompt-connection property to false):
Click OK, and the Browser Toolbox will open in its own window:
- Debugger (Note: If you want to debug a specific add-on that is restartless or SDK-based then try the Add-on Debugger.)
- Style Editor
- Network Monitor
- Page Inspector
You can debug chrome: and about: pages using the normal Debugger, just as if they were ordinary content pages.
Targeting a document
In the normal toolbox, there's a button in the toolbar enabling you to target specific iframes in the document. From Firefox 40 onwards the same button appears in the browser toolbox as well, but this lists all the top-level chrome and content windows as well as any iframes they contain. This enables you to inspect documents in individual chrome windows and popups, as well as in content tabs.
For example, here's what the frame selection popup lists when there are two browser windows open, one with one content tab, and one with two:
It's hard to debug popups, because the browser hides them as soon as you click outside them. Starting in Firefox 47, there's a way to disable this behavior. Just click the button in the Toolbox toolbar that looks like four small squares:
Now if you open any popup, it will stay open until you press Escape. You can use the Inspector's node picker to select that panel, and examine and modify its content:
You can use the same technique to debug popups created by add-ons.
Note that this change is persistent, even across browser restarts.
We're working on addressing this in bug 1251658, but until then you may prefer to re-enable autohide by clicking the button again before you close the Browser Toolbox.
Internally, this button just toggles the
ui.popup.disable_autohide preference, which you can toggle manually using about:config.