Hacking Chrome Developer Tools

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

• :
• Clone WebKit git repo from git://git.webkit.org/WebKit.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://git.webkit.org/WebKit.git

> cd c:\

> git clone git://git.webkit.org/WebKit.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');

connect.createServer(

    connect.static(__dirname)

).listen(8090);

• The __dirname basically serves the files relative to c:\WebKit\Source\WebCore\inspector
• Ran the server like so

> node front-end-server.js

• Followed rest of the instructions on the page Contributing to Chrome Developer Tools
• Download and run Chrome Canary

> ...\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...