This documentation is about debugging the Browser Toolbox or Omniscient Browser Toolbox.
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.
| /* Any copyright is dedicated to the Public Domain. | |
| http://creativecommons.org/publicdomain/zero/1.0/ */ | |
| "use strict"; | |
| // Test the TargetList API | |
| const { DebuggerClient } = require("devtools/shared/client/debugger-client"); | |
| const { DebuggerServer } = require("devtools/server/debugger-server"); |
API consistency between Front and TargetList
Fronts have onFront(type, callback), offFront(type, callback).
The TargetList has listen(type, createCallback, destroyCallback) and unlisten(type, createCallback, destroyCallback).
The two APIs seem to care about similar lifecycles, so it would be great if the API had a similar shape. Having a single method with 2 callbacks means all consumers need to attach their listeners for creation and destruction at the same spot. It might not be flexible enough in all situations?
Proposal 1:
| // Content page script | |
| window.value = "init-value"; | |
| document.querySelector("input").addEventListener("input", () => { | |
| // Slow down the handler a bit | |
| for (var i = 0 ; i < 1000; i++) { | |
| console.log(i); | |
| } | |
| // Update the value that will be checked by the test | |
| window.value = document.querySelector("input").value; |
| (async() => { | |
| const browser = await startPuppeteerBrowser(process.argv); | |
| console.log('Create page'); | |
| const page = await browser.newPage(); | |
| console.log('Go to https://rounded-haze.glitch.me/'); | |
| await page.goto('https://rounded-haze.glitch.me/'); | |
| console.log('Wait for 1 second'); |
Note
This no longer works in browser! If you absolutely need to use browser instead of desktop app, use an extension to add the string Electron/ anywhere in your user-agent.
How to use this script:
| async onAnimationsMutation(changes) { | |
| if (!this.isPanelVisible()) { | |
| return; | |
| } | |
| // ... | |
| } | |
| async onTargetAvailable({ isTopLevel, targetFront }) { | |
| if (isTopLevel) { | |
| this.animationsFront = await targetFront.getFront("animations"); |
I realize it is hard/impossible to follow the discussions around the JsWindowActor work that is currently ongoing in DevTools. I think a small overview of the DevTools architecture before and after will help.
First of all a warning, I am going to mostly talk about the "easy" scenario, where you have one toolbox that debugs one tab. Things can get really complicated if you start mixing local toolboxes and remote toolboxes, plus a few exotic clients such as aboutdebugging. If things seem overly complicated for no reason, it's probably because of one of those scenarios (although it's always good to challenge it!)
Let's start with the current state.
| /Users/jdescottes/Development/hg/fx-team-artifact/devtools/client/aboutdebugging/src/actions/debug-targets.js | |
| 308:30 error Unexpected `await` inside a loop. no-await-in-loop (eslint) | |
| /Users/jdescottes/Development/hg/fx-team-artifact/devtools/client/aboutdebugging/src/actions/runtimes.js | |
| 496:9 error Unexpected `await` inside a loop. no-await-in-loop (eslint) | |
| 514:9 error Unexpected `await` inside a loop. no-await-in-loop (eslint) | |
| /Users/jdescottes/Development/hg/fx-team-artifact/devtools/client/accessibility/accessibility-view.js | |
| 164:24 error Unexpected `await` inside a loop. no-await-in-loop (eslint) | |
| 168:13 error Unexpected `await` inside a loop. no-await-in-loop (eslint) |