Google Git
Sign in
chromium / devtools / devtools-frontend / 0e0de1db43cf94840bec724f14a21674d455b8ca
commit0e0de1db43cf94840bec724f14a21674d455b8ca[log] [tgz]
authorGuangyue Xu <guangyue.xu@microsoft.com>Tue Jul 08 23:58:28 2025
committerDevtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>Wed Jul 09 18:31:05 2025
treeffeab64e2bc4f57b857b7ef8bd9fa0689c57dd7b
parenta53fa821284d7ebea743f1322357dc3abadc7921 [diff]
Show number of CSS invalidation in DevTools performance panel

In the Selector stats table, a new column is added to display the number
of invalidated nodes for each selector.

With the information, developers can identify the CSS rules that
invalidate a large number of nodes to reduce over-invalidation, so that
they can improve long Recalculate style events by rewriting expensive
selectors.

More details can be found in this design doc:
https://docs.google.com/document/d/1K7ng5TdeyJemKqXP2I7r1IQPYz4Xb059E6d7M2B8SxY/edit?tab=t.0

Bug: 379886422
Change-Id: I57daf28191cd002624f1fbbfd843c6b009316eaf
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6333633
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Guangyue Xu <guangyue.xu@microsoft.com>
14 files changed
tree: ffeab64e2bc4f57b857b7ef8bd9fa0689c57dd7b
  1. .github/
  2. .vscode/
  3. build_overrides/
  4. config/
  5. docs/
  6. extension-api/
  7. extensions/
  8. front_end/
  9. inspector_overlay/
  10. node_modules/
  11. scripts/
  12. test/
  13. third_party/
  14. v8/
  15. build
  16. buildtools
  17. .clang-format
  18. .clang-format-ignore
  19. .editorconfig
  20. .git-blame-ignore-revs
  21. .gitallowed
  22. .gitattributes
  23. .gitignore
  24. .gitmodules
  25. .gn
  26. .mailmap
  27. .npmignore
  28. .npmrc
  29. .style.yapf
  30. .stylelintignore
  31. .stylelintrc.json
  32. AUTHORS
  33. BUILD.gn
  34. codereview.settings
  35. CONTRIBUTING.md
  36. DEPS
  37. DIR_METADATA
  38. eslint.config.mjs
  39. favicon.ico
  40. LICENSE
  41. OWNERS
  42. package-lock.json
  43. package.json
  44. PRESUBMIT.py
  45. README.md
  46. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

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

Source code and documentation

The frontend is available on chromium.googlesource.com. Check out the Chromium DevTools documentation for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation.

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES 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

There are a few options to keep an eye on the latest and greatest of DevTools development: