OLD | NEW |
1 # Chrome DevTools frontend | 1 # Chrome DevTools frontend |
2 | 2 |
3 The client-side of the Chrome DevTools, including all JS & CSS to run the DevToo
ls webapp. | 3 The client-side of the Chrome DevTools, including all JS & CSS to run the DevToo
ls webapp. |
4 | 4 |
5 It is available on NPM as the [chrome-devtools-frontend](https://www.npmjs.com/p
ackage/chrome-devtools-frontend) package. It's not currently available via CJS o
r ES2015 modules, so consuming this package in other tools may require [some eff
ort](https://github.com/paulirish/devtools-timeline-model/blob/master/index.js). | 5 It is available on NPM as the [chrome-devtools-frontend](https://www.npmjs.com/p
ackage/chrome-devtools-frontend) package. It's not currently available via CJS o
r ES2015 modules, so consuming this package in other tools may require [some eff
ort](https://github.com/paulirish/devtools-timeline-model/blob/master/index.js). |
6 | 6 |
7 #### Package versioning | 7 #### Package versioning |
8 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 Chro
mium commit, however the package is updated roughly daily. | 8 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 Chro
mium commit, however the package is updated roughly daily. |
9 | 9 |
10 | |
11 ### Source code | 10 ### Source code |
12 The frontend is available through a git subtree mirror on [chromium.googlesource
.com](https://chromium.googlesource.com/chromium/src/third_party/WebKit/Source/d
evtools/), with a regularly updating GitHub mirror at [github.com/ChromeDevTools
/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend). The co
debase's true location is in `third_party/WebKit/Source/devtools/` in [Chromium'
s git repo](https://chromium.googlesource.com/chromium/src/). | 11 The frontend is available through a git subtree mirror on [chromium.googlesource
.com](https://chromium.googlesource.com/chromium/src/third_party/WebKit/Source/d
evtools/), with a regularly updating GitHub mirror at [github.com/ChromeDevTools
/devtools-frontend](https://github.com/ChromeDevTools/devtools-frontend). The co
debase's true location is in `third_party/WebKit/Source/devtools/` in [Chromium'
s git repo](https://chromium.googlesource.com/chromium/src/). |
13 | 12 |
| 13 ### Getting Started |
14 | 14 |
| 15 1. Clone the repo |
| 16 2. Go to repo root and run: `npm start` |
| 17 - This launches Chrome Canary and starts the dev server with 1 command |
| 18 3. Go to http://localhost:8090 |
| 19 |
| 20 > **Power user tips:** |
| 21 > |
| 22 > You can customize the port for the dev server: e.g. `PORT=8888 npm start`. |
| 23 > |
| 24 > You can also launch chrome and start the server separately: |
| 25 > - `npm run chrome` |
| 26 > - `npm run server` |
| 27 > |
| 28 > When you start Chrome separately, you can pass extra args to Chrome: |
| 29 > ``` |
| 30 > npm run chrome -- https://news.ycombinator.com |
| 31 > ``` |
| 32 > (e.g. this launches Hacker News on startup) |
15 | 33 |
16 ### Hacking | 34 ### Hacking |
17 * DevTools documentation: [devtools.chrome.com](https://devtools.chrome.com) | 35 * DevTools documentation: [devtools.chrome.com](https://devtools.chrome.com) |
18 * [Debugging protocol docs](https://developer.chrome.com/devtools/docs/debugger-
protocol) and [Chrome Debugging Protocol Viewer](http://chromedevtools.github.io
/debugger-protocol-viewer/) | 36 * [Debugging protocol docs](https://developer.chrome.com/devtools/docs/debugger-
protocol) and [Chrome Debugging Protocol Viewer](http://chromedevtools.github.io
/debugger-protocol-viewer/) |
19 * [awesome-chrome-devtools](https://github.com/paulirish/awesome-chrome-devtools
): recommended tools and resources | 37 * [awesome-chrome-devtools](https://github.com/paulirish/awesome-chrome-devtools
): recommended tools and resources |
20 * Contributing to DevTools: [bit.ly/devtools-contribution-guide](http://bit.ly/d
evtools-contribution-guide) | 38 * Contributing to DevTools: [bit.ly/devtools-contribution-guide](http://bit.ly/d
evtools-contribution-guide) |
21 | 39 |
22 | 40 |
23 #### Development | 41 #### Development |
24 * All devtools commits: [View the log], [RSS feed] or [@DevToolsCommits] on Twit
ter | 42 * All devtools commits: [View the log], [RSS feed] or [@DevToolsCommits] on Twit
ter |
25 * [All open DevTools tickets] on crbug.com | 43 * [All open DevTools tickets] on crbug.com |
26 * File a new DevTools ticket: [new.crbug.com](https://bugs.chromium.org/p/chromi
um/issues/entry?labels=OS-All,Type-Bug,Pri-2&components=Platform%3EDevTools) | 44 * File a new DevTools ticket: [new.crbug.com](https://bugs.chromium.org/p/chromi
um/issues/entry?labels=OS-All,Type-Bug,Pri-2&components=Platform%3EDevTools) |
27 * Code reviews mailing list: [devtools-reviews@chromium.org] | 45 * Code reviews mailing list: [devtools-reviews@chromium.org] |
28 | 46 |
29 ### Getting in touch | 47 ### Getting in touch |
30 * [@ChromeDevTools] on Twitter | 48 * [@ChromeDevTools] on Twitter |
31 * Chrome DevTools mailing list: [groups.google.com/forum/google-chrome-developer
-tools](https://groups.google.com/forum/#!forum/google-chrome-developer-tools) | 49 * Chrome DevTools mailing list: [groups.google.com/forum/google-chrome-developer
-tools](https://groups.google.com/forum/#!forum/google-chrome-developer-tools) |
32 | 50 |
33 [devtools-reviews@chromium.org]: https://groups.google.com/a/chromium.org/foru
m/#!forum/devtools-reviews | 51 [devtools-reviews@chromium.org]: https://groups.google.com/a/chromium.org/foru
m/#!forum/devtools-reviews |
34 [RSS feed]: https://feeds.peter.sh/chrome-devtools/ | 52 [RSS feed]: https://feeds.peter.sh/chrome-devtools/ |
35 [View the log]: https://chromium.googlesource.com/chromium/src/third_party/Web
Kit/Source/devtools/+log/master | 53 [View the log]: https://chromium.googlesource.com/chromium/src/third_party/Web
Kit/Source/devtools/+log/master |
36 [@ChromeDevTools]: http://twitter.com/ChromeDevTools | 54 [@ChromeDevTools]: http://twitter.com/ChromeDevTools |
37 [@DevToolsCommits]: http://twitter.com/DevToolsCommits | 55 [@DevToolsCommits]: http://twitter.com/DevToolsCommits |
38 [all open DevTools tickets]: https://bugs.chromium.org/p/chromium/issues/list?
can=2&q=component%3APlatform%3EDevTools&sort=&groupby=&colspec=ID+Stars+Owner+Su
mmary+Modified+Opened | 56 [all open DevTools tickets]: https://bugs.chromium.org/p/chromium/issues/list?
can=2&q=component%3APlatform%3EDevTools&sort=&groupby=&colspec=ID+Stars+Owner+Su
mmary+Modified+Opened |
OLD | NEW |