Skip to content

Inspect the inspector

Jump to bottom
Andrea Cardaci edited this page Apr 22, 2022 · 2 revisions

Chrome DevTools uses the CDP under the hood, if you plan to implement some DevTools features using chrome-remote-interface it may be useful to inspect the protocol messages exchanged between Chrome and DevTools:

  1. Start headless Chrome:

    google-chrome --remote-debugging-port=9222 --headless

  2. Start regular Chrome and navigate to http://localhost:9222/devtools/inspector.html

  3. Select "about:blank".

  4. Optionally navigate to the page you want to use DevTools with using the URL box inside the page.

  5. Open regular DevTools with F12.

  6. In the network tab of the latter set the filter to WebSocket (WS) then reload the page.

  7. Select the only WebSocket entry and select the "Messages" tab.

  8. Interact with the former DevTools and inspect the WebSocket messages using the latter DevTools.

Clone this wiki locally