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!