GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.

Home Page:https://developer.chrome.com/docs/lighthouse/overview/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Better debugging of the Protocol

paulirish opened this issue · comments

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

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

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

good call. added to the above.