Getting sources
These is a relatively easy and fast way to get 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/blink
git config core.sparsecheckout true
echo Source/devtools >> .git/info/sparse-checkout
git pull upstream master --depth 1
Run Chrome with custom DevTools front-end
In order to debug webpages using your custom front-end you have to serve it via any static content server locally and point Chrome to it as a source for devtools front-end.
1. Serve DevTools front-end locally
cd Source/devtools && python -m SimpleHTTPServer 8088
2. Run chrome with remote debugging on and point it into your custom DevTools front-end
google-chrome --remote-debugging-port=9222 --remote-debugging-frontend="http://localhost:8088/front_end/inspector.html?experiments=true"
In just-opened Chrome window, navigate to localhost:9222 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 your static server. It’s just a webapp, so you can easily inspect it with bundled chrome DevTools.
Update
As of Chrome M35, the runtime flag `—remote-debugging-frontend` was removed. Instead, custom frontend url should be specified after a pound sign in address of remote debugging server, i.e. instead of navigating to “localhost:9222", go to “localhost:9222#http://localhost:8088/front_end/inspector.html?experiments=true”.
Email me when Andrey Lushnikov publishes or recommends stories