Skip to content

Better debugging of the Protocol #184

@paulirish

Description

@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

image

  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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions