Google Git
Sign in
chromium/devtools/devtools-frontend/refs/heads/chromium/5222
commit
6d97228951a6c8884b3ac4b712e966e79f2bdc3c
[log]
author
Jack Franklin <[email protected]>
Wed Aug 03 15:07:00 2022
committer
Devtools-frontend LUCI CQ <devtools-frontend-scoped@luci-project-accounts.iam.gserviceaccount.com>
Fri Aug 05 15:09:10 2022
tree
92a77d74bebd36602be8d66551398e90890edc5e
parent
f6d21b7784d50b8fe372491be9d7468db6c784ee [diff]
Add Interactions to Performance Panel

This CL adds an "Interactions" track that will show interactions. There
is currently no additional highlighting for interactions that are deemed
"long", or to show a website's INP score.

An interaction event will show its ID (useful for linking multiple
events together - e.g. a `pointerdown` and `pointerup` that were the
same user interaction) and the type of event (`pointerdown`).

By rendering these onto the timeline, the user can visually align them
with the main thread tasks, and use that to track down what may be the
issue:

https://imgur.com/a/6epEJUf

Bug: 1347390
Change-Id: Ic38797434172e5e85e3cd993fcd2ca25a9f565ea
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3804685
Owners-Override: Andrés Olivares <[email protected]>
Reviewed-by: Andres Olivares <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>
6 files changed
tree: 92a77d74bebd36602be8d66551398e90890edc5e
  1. .vscode/
  2. build_overrides/
  3. config/
  4. docs/
  5. extension-api/
  6. front_end/
  7. inspector_overlay/
  8. node_modules/
  9. scripts/
  10. test/
  11. third_party/
  12. v8/
  13. .clang-format
  14. .editorconfig
  15. .eslintignore
  16. .eslintrc.js
  17. .gitattributes
  18. .gitignore
  19. .gn
  20. .mailmap
  21. .npmignore
  22. .npmrc
  23. .style.yapf
  24. .stylelintignore
  25. .stylelintrc.json
  26. ARCHITECTURE.md
  27. AUTHORS
  28. BUILD.gn
  29. codereview.settings
  30. DEPS
  31. LICENSE
  32. OWNERS
  33. package-lock.json
  34. package.json
  35. PRESUBMIT.py
  36. README.md
  37. tsconfig.json
  38. 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.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found in docs/triage_guidelines.md.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found in docs/workflows.md.

Additional references

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