Google Git
Sign in
chromium / devtools / devtools-frontend / f880a70cb75785ca46997355c61faef7b38cf921
commitf880a70cb75785ca46997355c61faef7b38cf921[log] [tgz]
authorTim van der Lippe <tvanderlippe@chromium.org>Tue Dec 10 14:11:24 2019
committerCommit Bot <commit-bot@chromium.org>Tue Dec 10 14:25:56 2019
treed17b01e25d95a8573014ecd4536c77b3f8d0216a
parent26afc1e4f9279af89987bd76e1f6686198a7b2cc [diff]
Reland "Migrate test_runner/ to ESM"

This is a reland of 5d36acc6cb4bf949e65b8d1ff800cc7219b12206

Problematic timeout logic has been removed for now, pending resolution
of crbug.com/1032477

Original change's description:
> Migrate test_runner/ to ESM
>
> The TestRunner logic breaks when trying to load as an ES module. This
> was the root cause for the failures we saw when we were migrating main/
> to ESM.
>
> Since TestRunner directly relies on main/ existence, we first have to
> migrate the test_runner to ESM. However, this uncovered a lot of
> problems. Most importantly, symbols were sometimes overwritten and
> ordering was important.
>
> The bootstrap methods of TestRunner are now moved to the top. This
> includes setting up the error-catching logic and adding results.
>
> All other symbols are exported but also put on the global scope, as that
> is what the layout tests still require.
>
> A pre-existing bug is the fact that tests time out if there is any
> (syntax) issue in TestRunner itself. We will need to fix that issue, as
> it makes debugging TestRunner itself very difficult. However, I will
> punt that to a follow-up CL, as this CL is already quite difficult to
> reason about.
>
> Bug: 1006759, 1019182
> Change-Id: Id64422968171888dbdbcc927dfd174d7868f333e
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1953583
> Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
> Reviewed-by: Paul Lewis <aerotwist@chromium.org>

Bug: 1006759, 1019182, 1032477
Change-Id: I26bbda9a39f28291d88fb56a2d5b68899314f212
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1958992
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
6 files changed
tree: d17b01e25d95a8573014ecd4536c77b3f8d0216a
  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. AUDITS_OWNERS
  18. BUILD.gn
  19. DEPS
  20. DESIGN_GUIDELINES.md
  21. ENG_REVIEW_OWNERS
  22. htaccess
  23. INFRA_OWNERS
  24. karma.conf.js
  25. LICENSE
  26. OWNERS
  27. package-lock.json
  28. package.json
  29. PRESUBMIT.py
  30. protocol.json
  31. README.md
  32. tsconfig.json
  33. 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.

Workflows

In order to make changes to DevTools frontend, build, run, test, and submit changes, several workflows exist. Having depot_tools set up is a common prerequisite.

Standalone workflow

As a standalone project, Chrome DevTools frontend can be checked out and built independently from Chromium. The main advantage is not having to check out and build Chromium. However, there is also no way to run layout tests in this workflow.

Checking out source

To check out the source for DevTools frontend only, follow these steps:

mkdir devtools
cd devtools
fetch devtools-frontend
Build

To build, follow these steps:

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

The resulting build artifacts can be found in out/Default/resources/inspector.

Update to latest

To update to latest tip of tree version:

git fetch origin
git checkout origin/master
gclient sync
Run in Chromium

These steps work with Chromium 79 or later. To run the production build, use

(Requires brew install coreutils on Mac.)

<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)

You can inspect DevTools with DevTools by undocking DevTools and then open the developers tools (F12 on Windows/Linux, Cmd+Option+I on Mac).

Test

Test are available by running scripts in scripts/test/.

Create a change

Usual steps for creating a change work out of the box.

Managing dependencies
  • To sync dependencies from Chromium to DevTools frontend, use scripts/deps/roll_deps.py.
  • To roll the HEAD commit of DevTools frontend into Chromium, use scripts/deps/roll_to_chromium.py.
  • To update DevTools frontend's DEPS, use roll-dep.

Chromium workflow

DevTools frontend can also be developed as part of the full Chromium checkout.

Checking out source

Follow instructions to check out Chromium. DevTools frontend can be found under third_party/devtools-frontend/src/.

Build

Refer to instructions to build Chromium. To only build DevTools frontend, use devtools_frontend_resources as build target. The resulting build artifacts for DevTools frontend can be found in out/Default/resources/inspector.

Consider building with the GN flag debug_devtools=true to symlink to the original unminified source.

Run

Run Chrome with DevTools frontend bundled:

out/Default/chrome
Test

Test are available by running scripts in third_party/devtools-frontend/src/scripts/test/. After building content shell, we can also run layout tests that are relevant for DevTools frontend:

autoninja -C out/Default content_shell
third_party/blink/tools/run_web_tests.py http/tests/devtools
Create a change

Usual steps for creating a change work out of the box, when executed in third_party/devtools-frontend/src/.

Integrate standalone checkout into Chromium

If you prefer working on a standalone checkout of DevTools frontend, but want to build, test, and run inside the full Chromium checkout. This way, you combine the best of both worlds.

Disable gclient sync for DevTools frontend inside of Chromium by editing .gclient config. From chromium/src/, simply run

vim $(gclient root)/.gclient

In the custom_deps section, insert this line:

"src/third_party/devtools-frontend/src": None,

Then run

gclient sync -D

This removes the DevTools frontend dependency. We now create a symlink to refer to the standalone checkout:

(Note that the folder names do NOT include the trailing slash)

ln -s path/to/standalone/devtools-frontend third_party/devtools-frontend/src

Running gclient sync in chromium/src/ will update dependencies for the Chromium checkout. Running gclient sync in chromium/src/third_party/devtools-frontend/src will update dependencies for the standalone checkout.

Testing

Please refer to the overview document. The current test status can be seen at the test waterfall.

Additional references

Merges and Cherry-Picks

Merge request/approval is handled by Chromium Release Managers. DevTools follows The Zen of Merge Requests. In exceptional cases please get in touch with hablich@chromium.org.

Step-by-step guide on how to merge:

  1. Request and receive approval to merge
  2. Backmerges are done to the chromium/xxxx (e.g. chromium/3979) branch respectively on the DevTools frontend repo
  3. Use Omahaproxy to find out what branch a major Chromium version has (column true_branch). Open the to-be-merged commit in Gerrit e.g. Example
  4. Click hamburger menu on the top right and select Cherry Pick
  5. Select branch to merge to e.g. chromium/3968
  6. Cherry Pick CL is created e.g. Example
  7. Get it reviewed if necessary
  8. Click hamburger menu on the cherry pick CL and select Submit
  9. Done

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

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