You are here: Home > Google Chrome Tutorial

How to remote debug with Chrome developer tools

May 10, 2011 19:23 PDT

Posted by Andrew.

As you might know, Google Chrome uses the WebKit rendering engine, which is shared by other browsers such as Apple's Safari. WebKit Web Inspector(Chrome Developer Tools) is implemented as an HTML + CSS + JavaScript web application. What you might not know is that Developer Tools can run outside of the browser environment and still provide complete set of its features to the end user. It has a special binding available at JavaScript runtime that allows interacting with chrome pages and instrumenting them. Interaction protocol consists of commands that are sent to the page and events that the page is generating. Although Chrome Developer Tools is the only client of this protocol, there are ways for third parties to bypass it and start instrumenting browser pages explicitly.

Debugging over the wire

Now that Web Inspector is functioning out-of-process over the serialized-message-channel, attaching Web Inspector window to the remote browser is possible. Here is an example of the remote debugging session using Chrome:

  1. Start your target browser with the remote-debugging-port command line switch:
  2. chrome.exe --remote-debugging-port=9222 

    Start your target browser with the remote-debugging-port command line switch

  3. Navigate to the given port from your client Chrome instance and attach to any of the discovered tabs for debugging.
  4. http://localhost:9222 
  5. Follow any of these links to start remote debugging session for the corresponding page.

 start remote debugging session for the corresponding page

Remote Debugging Protocol

Under the hood, Web Inspector front-end is talking to the browser backend by means of the Remote Debugging Protocol. This protocol is based on the JSON-RPC 2.0 specification. It is bidirectional: clients send asynchronous requests to the server, server responds to these requests and/or generates notifications. More details about Remote Debugging Protocol, please visit the document of WebKit Remote Debugging.

Other resources about Chrome Remote Debugging


No any comments
Leave your comment
If you want to leave your comment on this article, simply fill out the next form:
Name: * Requirement
E-mail: Optional (won't be published)
Website / Blog: Optional
Are you a human? For anti spammer, please calculate following expression:
3 x 5 + 2 = * Requirement
Comment:
* Requirement
You can use these tags:
[b] Text [/b]: Bold text
[quote] Text [/quote]: Quote text

Social News