Better debugging of the Protocol
paulirish opened this issue · 2 comments
paulirish commented
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
- close yr tabs
- open voicememos in a tab
- open http://localhost:9222 in a tab
- maybe reload it once. sometimes its stale.
- select the voice memos target from Inspectable Pages
- This'll open a devtools inspecting voicememos (VM DT).
- And you'll see this sorta URL in the omnibox:
http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/8532blahblah
- inspector inception time! Hit cmd-shift-i to open a new DevTools (DT^2) that's inspecting the VM DT.
- In DT^2 go to Network panel. filter to look at just websocket
- 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 toalt-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
- It'll now look like
brendankenny commented
flags to start with?
something about right docking so you can turn on mobile emulation? Or is that no longer needed
paulirish commented
something about right docking so you can turn on mobile emulation? Or is that no longer needed
good call. added to the above.