Google Git
Sign in
chromium / devtools / devtools-frontend / 36ab40d0bfb153e691873b892a98c0be34f083f7
commit36ab40d0bfb153e691873b892a98c0be34f083f7[log] [tgz]
authorPhilip Rogers <[email protected]>Mon Oct 28 22:04:01 2019
committerCommit Bot <[email protected]>Tue Oct 29 16:11:57 2019
tree8d07cbe0459d063b1ffdee5fe0f0e67fff73e0c9
parentb63ee70a8e5cf65967e0ce26cdfc72ce85004728 [diff]
Add main-thread scrolling reasons to 3d layers view in the inspector

This is the devtools-frontend patch of a two-patch series to add main-
thread scrolling reasons to the 3d layers view in the inspector. The
inspector has a feature for showing the 3d layers of the page under
More tools > Layers. This 3d layer view includes an option for "Slow
scroll rects", and this visualization did not include main-thread
scrolling reasons such as background-attachment: fixed. This patch adds
plumbing to add main-thread scrolling reasons to the "Slow scroll rects"
visualization.

This patch also fixes a bug in the string format used for the slow
scroll rects. It was previously printed as:
  [x] x [y] (at [width], [height])
With this patch it is printed as:
  [width] x [height] (at [x], [y])

Bug: 1015918
Change-Id: I3cff6414c5f18bb9ed14a0705221d8012ccc18d1
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1884529
Reviewed-by: Jan Scheffler <[email protected]>
Commit-Queue: Philip Rogers <[email protected]>
4 files changed
tree: 8d07cbe0459d063b1ffdee5fe0f0e67fff73e0c9
  1. build_overrides/
  2. docs/
  3. front_end/
  4. node_modules/
  5. scripts/
  6. test/
  7. third_party/
  8. v8/
  9. .clang-format
  10. .eslintignore
  11. .eslintrc.js
  12. .gitattributes
  13. .gitignore
  14. .gn
  15. .npmignore
  16. .style.yapf
  17. BUILD.gn
  18. DEPS
  19. ENG_REVIEW_OWNERS
  20. htaccess
  21. karma.conf.js
  22. LICENSE
  23. OWNERS
  24. package-lock.json
  25. package.json
  26. PRESUBMIT.py
  27. protocol.json
  28. README.md
  29. tsconfig.json
  30. WATCHLISTS
README.md

Chrome DevTools frontend

NPM package

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

Source code

The frontend is available on chromium.googlesource.com.

Getting Started (Standalone)

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

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

Run in Chromium (from M79 onwards)

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)

Getting Started (as part of Chromium)

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/.

Build as part of Chromium

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

Integrate standalone DevTools into Chromium

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

Hacking

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 yapf or if you want to enable multiprocessing in Python 2.7, pip install futures

Development

NPM package

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.

Getting in touch