The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

The frontend is available on chromium.googlesource.com.

As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium.

Get depot_tools first.

mkdir devtools
cd devtools
git clone https://chromium.googlesource.com/devtools/devtools-frontend
gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged

cd devtools-frontend
gclient sync
gn gen out/Default
autoninja -C out/Default

To run the production build, use

<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector)

To run the debug build (directly symlinked to the original unminified source files), build both Chromium and DevTools frontend with the GN flag debug_devtools=true, and use

<path-to-chrome>/chrome --custom-devtools-frontend=file://$(realpath out/Default/resources/inspector/debug)

DevTools frontend can also be developed as part of Chromium.

Follow instructions to check out Chromium. DevTools frontend can be found under chromium/src/third_party/devtools-frontend/src/.

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target.

Change your working directory to the integrated DevTools frontend:

cd path/to/chromium/src/third_party/devtools-frontend/src

Add standalone DevTools frontend as remote:

git remote add standalone file://path/to/devtools/devtools-frontend/
git fetch standalone
git checkout standalone/branch-of-your-choice

• DevTools documentation: devtools.chrome.com
• Debugging protocol docs and Chrome Debugging Protocol Viewer
• awesome-chrome-devtools: recommended tools and resources
• Contributing to DevTools: bit.ly/devtools-contribution-guide
• Contributing To Chrome DevTools Protocol: docs.google.com

Formats your Python code using yapf

Note: Yapf is a command line tool. You will have to install this manually, either from PyPi through pip install yapf or if you want to enable multiprocessing in Python 2.7, pip install futures

• All devtools commits: View the log or follow @DevToolsCommits on Twitter
• All open DevTools tickets on crbug.com
• File a new DevTools ticket: new.crbug.com
• Code reviews mailing list: [email protected]
• Test waterfall

DevTools frontend is available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES2015 modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

• @ChromeDevTools on Twitter
• Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools