Hacking Chrome DevTools

Front-end only, lightweight way

— The post is updated as of Chrome 55 —

There’s a lightweight way to hack on Chrome DevTools without checking out the whole gigantic chromium repository and spending hours compiling it. This might be useful if you’d like to hack on DevTools front-end without touching its backend (the complete DevTools contribution guide could be found here).

Getting sources: simple

The simple way to get sources is just to clone the Chrome DevTools Frontend mirror.

git clone https://github.com/ChromeDevTools/devtools-frontend

One downside is that our Github mirror lags behind the actual tip-of-tree (usually, however, no more then a day).

Getting sources: bullet-proof

These is a relatively easy and fast way to get tip-of-tree DevTools sources with the help of git sparse-checkout feature. Here’s how:

1. Create folder and initialize a git repo:

mkdir devtools-frontend && cd devtools-frontend
git init

2. Add chromium remote and initialize sparse checkout:

git remote add upstream https://chromium.googlesource.com/chromium/src
git config core.sparsecheckout true
echo third_party/WebKit/Source/devtools >> .git/info/sparse-checkout

3. Finally, pull DevTools:

git pull upstream master --depth 1

Run Chrome with custom DevTools front-end

In order to debug webpages using your custom front-end, you’ll have to run our custom static server and point Chrome to it as a source for devtools front-end.

1. Run devtools front-end static server

cd devtools-frontend && npm run server

This will run a static server on port 8090.

2. Run chrome with remote debugging on

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

3. In a new chrome, navigate to http://localhost:9222/#localhost:8090/front_end/inspector.html?experiments=1 and choose a target you’d like to debug.

The DevTools front-end should show up in a new tab — this is the one you serve with “npm run server”. It’s just a webapp, so you can easily inspect it with bundled chrome DevTools.

Happy hacking!