Better debugging of the Protocol

[paulirish]

Any requests here on what everyone's debugging needs are and how things could be better?

To get started.. here's some docs that I can drop into a real markdown file..

Inspecting DevTools' Protocol Traffic

1. close yr tabs
2. open voicememos in a tab
3. open http://localhost:9222 in a tab
4. maybe reload it once. sometimes its stale.
5. select the voice memos target from Inspectable Pages
6. This'll open a devtools inspecting voicememos (VM DT).
7. And you'll see this sorta URL in the omnibox:
   http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/8532blahblah
8. inspector inception time! Hit cmd-shift-i to open a new DevTools (DT^2) that's inspecting the VM DT.
9. In DT^2 go to Network panel. filter to look at just websocket
10. While your focus is in DT^2, hit cmd-r. This will reload VM DT (because in devtools, cmd-r reloads the page it inspects, rather than itself (which is actually bound to alt-r))

Getting Device Mode UI

From Chrome DevTools Contribution Guide comes a technique for getting DeviceMode UI in the above approach:

• Add can_dock=true&dockSide=right& into the query parameters.
  • It'll now look like http://localhost:9222/devtools/inspector.html?experiments=true&can_dock=true&dockSide=right&ws=localhost:9222/devtools/page/8532blahblah

[brendankenny]

flags to start with?
something about right docking so you can turn on mobile emulation? Or is that no longer needed

[paulirish]

something about right docking so you can turn on mobile emulation? Or is that no longer needed

good call. added to the above.