Google Git
Sign in
chromium / devtools / devtools-frontend.git / 41e89a50811eabb65517bcb3f7662bde80432ee6
commit41e89a50811eabb65517bcb3f7662bde80432ee6[log] [tgz]
authorOlivia Flynn <t-olfly@microsoft.com>Sat Aug 01 00:28:18 2020
committerCommit Bot <commit-bot@chromium.org>Sat Aug 01 00:50:18 2020
tree37f5c66aa00f3342482f466f6742c39c8dc9932a
parent8eec09fbdd2b45d00612d3ff64df72435a4f33bd [diff]
Source Order Viewer UI

This CL adds:
- UI to turn the source order view on/off for an element
- Routing of node information from UI -> Overlay Model -> CDP
- An experiment dedicated to this tool

Gif: https://imgur.com/a/8bduCOY

This CL is part of creating a Source Order Viewer, which was identified
as a customer ask on The Web We Want
The Web We Want submission: https://webwewant.fyi/wants/64
Explainer: https://docs.google.com/document/d/1t33UTIpW46MGor70W8mdBJVRio8eo3p76w3FH8MjV7A/edit?usp=sharing

Back-end CLs for drawing in the overlay
Outlines: https://chromium-review.googlesource.com/c/chromium/src/+/2250504
Labels: https://chromium-review.googlesource.com/c/chromium/src/+/2250883
Front-end CL for drawing in the overlay:
https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2250404

Bug: 1094406
Change-Id: Ic494fa3c50bfb55d1837d3903c8124f89089acc2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2251080
Commit-Queue: Olivia Flynn <t-olfly@microsoft.com>
Reviewed-by: Vidal Diazleal <vidorteg@microsoft.com>
Reviewed-by: Songtao Xia <soxia@microsoft.com>
Reviewed-by: Brandon Goddard <brgoddar@microsoft.com>
9 files changed
tree: 37f5c66aa00f3342482f466f6742c39c8dc9932a
  1. back_end/
  2. build_overrides/
  3. docs/
  4. front_end/
  5. node_modules/
  6. scripts/
  7. test/
  8. third_party/
  9. v8/
  10. .clang-format
  11. .editorconfig
  12. .eslintignore
  13. .eslintrc.js
  14. .gitattributes
  15. .gitignore
  16. .gn
  17. .npmignore
  18. .npmrc
  19. .style.yapf
  20. .stylelintignore
  21. .stylelintrc.json
  22. all_devtools_files.gni
  23. all_devtools_modules.gni
  24. AUTHORS
  25. BUILD.gn
  26. COMMON_OWNERS
  27. DEPS
  28. devtools_grd_files.gni
  29. devtools_image_files.gni
  30. devtools_module_entrypoints.gni
  31. ENG_REVIEW_OWNERS
  32. INFRA_OWNERS
  33. LICENSE
  34. LIGHTHOUSE_OWNERS
  35. OWNERS
  36. package-lock.json
  37. package.json
  38. PRESUBMIT.py
  39. protocol.json
  40. README.md
  41. tsconfig.base.json
  42. tsconfig.json
  43. 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 here.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found here.

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