TBR=machenbach@chromium.org Change-Id: Icc4e94c16f099c2883418c63d46a79497b907fa8 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1869655 Reviewed-by: Michael Achenbach <machenbach@chromium.org> Commit-Queue: Yang Guo <yangguo@chromium.org>
Chrome DevTools frontend
The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.
It 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.
Package versioning
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.
Source code
The frontend is available on chromium.googlesource.com.
Getting Started
As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium.
Checking out source
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
Build
gclient sync
gn gen out
autoninja -C out
Run in Chromium (from M78 onwards)
Build Chromium with the GN flag debug_devtools=true
<path-to-chrome>/chrome --custom-devtools-frontend=$(realpath out/resources/inspector)
Hacking
- 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
Useful Commands
npm run format-py
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 yapfor if you want to enable multiprocessing in Python 2.7,pip install futures
Development
- All devtools commits: View the log, RSS feed or @DevToolsCommits on Twitter
- All open DevTools tickets on crbug.com
- File a new DevTools ticket: new.crbug.com
- Code reviews mailing list: devtools-reviews@chromium.org
- Test waterfall
Getting in touch
-
@ChromeDevTools on Twitter
-
Chrome DevTools mailing list: groups.google.com/forum/google-chrome-developer-tools