Skip to content

Instantly share code, notes, and snippets.

@juliandescottes

juliandescottes/browser_toolbox_debugging.md

Created November 5, 2019 14:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save juliandescottes/1f029386ce2b53e61e30fbe2f54bfb82 to your computer and use it in GitHub Desktop.
Save juliandescottes/1f029386ce2b53e61e30fbe2f54bfb82 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
browser_toolbox_debugging.md

Debugging the Browser Toolbox

This documentation is about debugging the Browser Toolbox or Omniscient Browser Toolbox.

Debugging the UI

If you need to debug the client side of the Browser Toolbox, you can simply open another Browser Toolbox from your current Browser Toolbox. Make sure "Enable Remote Debugging" is checked in the DevTools setting of the Browser Toolbox, and then use the regular Browser Toolbox shortcut. It will open another Browser Toolbox (running in yet another Firefox instance).

Let's call this the Browser Toolbox Toolbox.

Debugging actors

If you need to debug an actor, you can't use the same solution as for the client. Quick reminder about the architecture here. We have a first Firefox instance. Then we have a second instance, created for the Browser Toolbox. In terms of DevTools code, while the DevTools UI runs in the Browser Toolbox instance, the server code (including actors) runs in the original Firefox instance.

The server living in the original Firefox instance is created in devtools/client/framework/ToolboxProcess.jsm. If you look at how the server is started, it first creates a dedicated DevTools loader with new DevToolsLoader({ invisibleToDebugger: true });. This means that the sources in this loader can't be visible to any debugger.

The first thing to do is to flip this to false, so that we can actually see the sources in a Debugger. https://searchfox.org/mozilla-central/rev/3300072e993ae05d50d5c63d815260367eaf9179/devtools/client/framework/ToolboxProcess.jsm#126-128

But even with that we can't debug the actors from the Browser Toolbox itself, because a "debugger" and a "debuggee" need to live in separate compartments. We also can't use the Browser Toolbox Toolbox (of the Debugging the UI section), because this toolbox targets the instance of the Browser Toolbox while our actors live in the initial Firefox instance.

One solution is to target the main process of the initial Firefox instance with remote debugging. This way, it will be in another compartment and will be able to see and break in the actors of the Browser Toolbox.

To do so:

  • start your local build with --start-debugger-server 6000
  • open the Browser Toolbox
  • in another Firefox (eg a regular Nightly), open about:debugging
  • in the Setup page add "localhost:6000" under Network Locations
  • connect to localhost:6000 from the about:debugging sidebar
  • select localhost:6000 in the sidebar
  • Inspect the "Main Process" (last item of the page)

In the about:devtools-toolbox tab that opens, you will be able to see the actor files used by the Browser Toolbox and you can debug them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment