| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 1 | # Chrome DevTools frontend |
| 2 | |
| 3 | <!-- [START badges] --> |
| 4 | [](https://npmjs.org/package/chrome-devtools-frontend) |
| 5 | <!-- [END badges] --> |
| 6 | |
| 7 | The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp. |
| 8 | |
| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 9 | ### Source code |
| 10 | The frontend is available on [chromium.googlesource.com](https://chromium.googlesource.com/devtools/devtools-frontend). |
| 11 | |
| Yang Guo | 2b9efe8 | 2019-10-21 10:06:34 | [diff] [blame^] | 12 | ### Getting Started (Standalone) |
| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 13 | |
| 14 | As standalone project, Chrome DevTools front-end can be checked out and built independently from Chromium. |
| 15 | |
| 16 | #### Checking out source |
| 17 | |
| 18 | [Get depot_tools](https://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/docs/html/depot_tools_tutorial.html#_setting_up) first. |
| 19 | |
| 20 | ```bash |
| 21 | mkdir devtools |
| 22 | cd devtools |
| 23 | git clone https://chromium.googlesource.com/devtools/devtools-frontend |
| 24 | gclient config https://chromium.googlesource.com/devtools/devtools-frontend --unmanaged |
| 25 | ``` |
| 26 | |
| 27 | #### Build |
| 28 | ```bash |
| 29 | gclient sync |
| 30 | gn gen out |
| 31 | autoninja -C out |
| 32 | ``` |
| 33 | |
| Yang Guo | 2b9efe8 | 2019-10-21 10:06:34 | [diff] [blame^] | 34 | #### Run in Chromium (from M79 onwards) |
| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 35 | ```bash |
| 36 | <path-to-chrome>/chrome --custom-devtools-frontend=$(realpath out/resources/inspector) |
| 37 | ``` |
| 38 | |
| Yang Guo | 2b9efe8 | 2019-10-21 10:06:34 | [diff] [blame^] | 39 | ### Getting Started (as part of Chromium) |
| 40 | |
| 41 | DevTools frontend can also be developed as part of Chromium. |
| 42 | |
| 43 | Follow [instructions](https://www.chromium.org/developers/how-tos/get-the-code) to check out Chromium. |
| 44 | DevTools frontend can be found under `chromium/src/third_party/devtools-frontend/src/`. |
| 45 | |
| 46 | #### Build as part of Chromium |
| 47 | |
| 48 | Refer to [instructions](https://www.chromium.org/developers/how-tos/get-the-code) to build Chromium. |
| 49 | To only build DevTools frontend, use `devtools_frontend_resources` as build target. |
| 50 | |
| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 51 | ### Hacking |
| 52 | * DevTools documentation: [devtools.chrome.com](https://devtools.chrome.com) |
| 53 | * [Debugging protocol docs](https://developer.chrome.com/devtools/docs/debugger-protocol) and [Chrome Debugging Protocol Viewer](http://chromedevtools.github.io/debugger-protocol-viewer/) |
| 54 | * [awesome-chrome-devtools](https://github.com/paulirish/awesome-chrome-devtools): recommended tools and resources |
| 55 | * Contributing to DevTools: [bit.ly/devtools-contribution-guide](http://bit.ly/devtools-contribution-guide) |
| 56 | * Contributing To Chrome DevTools Protocol: [docs.google.com](https://docs.google.com/document/d/1c-COD2kaK__5iMM5SEx-PzNA7HFmgttcYfOHHX0HaOM/edit?usp=sharing) |
| 57 | |
| 58 | ### Useful Commands |
| 59 | |
| 60 | #### `npm run format-py` |
| 61 | Formats your Python code using [yapf](https://github.com/google/yapf) |
| 62 | |
| 63 | > 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` |
| 64 | |
| 65 | ### Development |
| 66 | * All devtools commits: [View the log], [RSS feed] or [@DevToolsCommits] on Twitter |
| 67 | * [All open DevTools tickets] on crbug.com |
| 68 | * File a new DevTools ticket: [new.crbug.com](https://bugs.chromium.org/p/chromium/issues/entry?labels=OS-All,Type-Bug,Pri-2&components=Platform%3EDevTools) |
| 69 | * Code reviews mailing list: [devtools-reviews@chromium.org] |
| 70 | * [Test waterfall] |
| 71 | |
| Yang Guo | 2b9efe8 | 2019-10-21 10:06:34 | [diff] [blame^] | 72 | ### NPM package |
| 73 | |
| 74 | DevTools frontend is available on NPM as the [chrome-devtools-frontend](https://www.npmjs.com/package/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](https://github.com/paulirish/devtools-timeline-model/blob/master/index.js). |
| 75 | |
| 76 | 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. |
| 77 | |
| Yang Guo | 4fd355c | 2019-09-19 08:59:03 | [diff] [blame] | 78 | ### Getting in touch |
| 79 | * [@ChromeDevTools] on Twitter |
| 80 | * Chrome DevTools mailing list: [groups.google.com/forum/google-chrome-developer-tools](https://groups.google.com/forum/#!forum/google-chrome-developer-tools) |
| 81 | |
| 82 | [[email protected]]: https://groups.google.com/a/chromium.org/forum/#!forum/devtools-reviews |
| 83 | [RSS feed]: https://feeds.peter.sh/chrome-devtools/ |
| 84 | [View the log]: https://chromium.googlesource.com/devtools/devtools-frontend/+log/master |
| 85 | [@ChromeDevTools]: http://twitter.com/ChromeDevTools |
| 86 | [@DevToolsCommits]: http://twitter.com/DevToolsCommits |
| 87 | [all open DevTools tickets]: https://bugs.chromium.org/p/chromium/issues/list?can=2&q=component%3APlatform%3EDevTools&sort=&groupby=&colspec=ID+Stars+Owner+Summary+Modified+Opened |
| 88 | [Test waterfall]: https://ci.chromium.org/p/devtools-frontend/g/main/console |
