Chrome Remote Debugging Protocol

Created by Vladimir Petriko


  • How dev tool works
  • Single page applications

Look here first

Google Chrome Canary

* For presentation launch both Chrome Canary instances with --disable-web-security flag also

Under the hood...

When you navigate your client browser to the remote's Chrome port, Developer Tools front-end is being served from the host Chrome as a Web Application from the Web Server.

...Under the hood

Once loaded, Developer Tools establishes a Web Socket connection to its host and starts interchanging JSON messages with it.

Commands & Events

Remote Debugging Protocol tip-of-tree

Debugger extension API

chrome.debugger reference

  • attach
  • detach
  • sendCommand
  • getTargets
  • --------------------
  • onEvent
  • onDetach

Time to Code!



(Results will be here)

* Open sample/index.html page in your host Chrome Canary browser