Friday, March 01, 2013

Hacking Chrome Developer Tools

In the Contributing to Chrome Developer Tools > Setting up section it talks about:

  • :
  • Clone WebKit git repo from git://
  • Set up a local web server that would serve files from WebKit/Source/WebCore/inspector on some port (8090)
I wanted a simple web server. To do this here is what I did:
  • Cloned WebKit git repo from git://
> cd c:\
> git clone git://
  • Installed node,js
  • Installed connect like so
> cd c:\WebKit\Source\WebCore\inspector
> npm install connect
  • Created a front-end-server.js file with content which basically sets up a simple web server:
var connect = require('connect');
  • The __dirname basically serves the files relative to c:\WebKit\Source\WebCore\inspector
  • Ran the server like so
> node front-end-server.js
> ...\chrome.exe --user-data-dir=C:\canary-profile --remote-debugging-port=9222 --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html". BTW, it is a good idea to run with --user-data-dir=C:\canary-profile parameter so that this instance does not interfere with your desktop Chrome you use for your regular use.

  • Launch another Chrome (this does not have to be the Chrome Canary) window on http://localhost:9222 . This shows a grid menu of pages to select from to debug. Please note that this menu is served by a small Web server running inside the first instance of Chrome Canary due to the --remote-debugging-port=9222 command line parameter passed to it when it was started

  • Clicking on test.html launches the debugger which is using my copy of devtools from C:\WebKit\Source\WebCore\inspector\front-end . Please note that the link address of the test.html in the http://localhost:8090/front-end/inspector.html?ws=localhost:9222/devtools/page/1. Why http://localhost:8090/front-end/inspector.html you ask? That is because of the --remote-debugging-frontend="http://localhost:8090/front-end/inspector.html" command line parameter passed in when first instance of Chrome canary was started.

  • I was able to edit the Chrome Developer Tools front-end code in the following directory iteratively  C:\WebKit\Source\WebCore\inspector\front-end
Voila! I was in business...

No comments: