From 70710c882068e59678818486337a26c8dfa46377 Mon Sep 17 00:00:00 2001 From: Benedikt Meurer Date: Thu, 12 Oct 2023 12:13:28 +0000 Subject: [PATCH] [docs] Streamline documentation. Previously we had a lot of documentation bundled in the `workflows.md` file, which wasn't necessarily obvious to new users. The getting the code documentation now lives in a dedicated file `get_the_code.md`, which is also directly linked from the toplevel `README.md`, since that's what developers are looking first. It also rearranges the rest of the project documentation a bit to move the most important things to the top, add [TOC]s everywhere and streamlines the documentation around (3rd party) dependencies, as well as updating the documentation on testing. Bug: none Change-Id: I7b5d9121c7f1137eeff7a4ff159816908ef10705 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/4931037 Commit-Queue: Benedikt Meurer Auto-Submit: Benedikt Meurer Reviewed-by: Philip Pfaffe --- README.md | 11 +- docs/README.md | 76 ++++---- docs/contributing_changes.md | 86 +++++++++ ...rd_party_guidelines.md => dependencies.md} | 30 +++- docs/{workflows.md => get_the_code.md} | 168 ++---------------- docs/release_management.md | 2 +- docs/testing.md | 29 +++ 7 files changed, 209 insertions(+), 193 deletions(-) create mode 100644 docs/contributing_changes.md rename docs/{third_party_guidelines.md => dependencies.md} (72%) rename docs/{workflows.md => get_the_code.md} (55%) create mode 100644 docs/testing.md diff --git a/README.md b/README.md index 8a057be23c..57661b7ca9 100644 --- a/README.md +++ b/README.md @@ -6,17 +6,14 @@ -The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp. +The client-side of the Chrome DevTools, including all TypeScript & CSS to run the DevTools webapp. -### Source code +### Source code and documentation The frontend is available on [chromium.googlesource.com](https://chromium.googlesource.com/devtools/devtools-frontend). - -### Project documentation - Check out the [project documentation](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/README.md) -for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural -documentation. +for instructions to [set up](https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/get_the_code.md), use, and +maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation. ### Additional references diff --git a/docs/README.md b/docs/README.md index 9d8574b84b..d55b8d0267 100644 --- a/docs/README.md +++ b/docs/README.md @@ -8,11 +8,52 @@ documentation in [Gitiles-flavored Markdown]. It is automatically [Gitiles-flavored Markdown]: https://gerrit.googlesource.com/gitiles/+/master/Documentation/markdown.md [rendered by Gitiles]: https://chromium.googlesource.com/devtools/devtools-frontend/+/main/docs/ -**If you add new documents, please also add a link to them in the Document Index +**If you add new documents, please also add a link to them in the [Document Index](#Document-Index) below.** [TOC] +## Document Index + +### Design Documents +* See the shared [Design Documents](https://drive.google.com/drive/folders/1JbUthATfybvMQR3yAHC4J0P7n6oftYNq) folder in the Chromium drive. + +### General Development +* [Get the Code](get_the_code.md) +* [Contributing Changes](contributing_changes.md) +* [Chrome DevTools Design Review Guidelines](design_guidelines.md) +* [Release Management](release_management.md) +* [Dependencies](dependencies.md) +* [Localization](l10n.md) +* [V8 debugger support checklist for new language features](https://goo.gle/v8-checklist) +* [Chrome DevTools Protocol](devtools-protocol.md) +* [UMA metrics in DevTools](uma_metrics.md) + * [How to add UMA metrics in DevTools frontend](add_uma_metrics.md) + +### Testing +* [Testing Chromium DevTools](testing.md) +* [E2E test guide](../test/e2e/README.md) +* [Unit test guide](../test/unittests/README.md) + +### Architectural Documentation +* [Architecture of DevTools](architecture_of_devtools.md) +* [Resource management in DevTools](resource_management.md) + +### Chromium +* [Chromium Docs](https://chromium.googlesource.com/chromium/src/+/master/docs/README.md) +* [V8 Documention](https://v8.dev/docs) + +### Useful Commands + +`git cl format --js` + +Formats all code using clang-format. + +`npm run check` + +Runs all static analysis checks on DevTools code. + + ## Creating Documentation ### Guidelines @@ -31,10 +72,10 @@ Assuming that `/path/to/src` contains a chromium checkout, you can run: ```bash # in devtools-frontend checkout -/path/to/src/tools/md_browser/md_browser.py --directory $PWD/docs +/path/to/src/tools/md_browser/md_browser.py --directory $PWD ``` -This is only an estimate. The **gitiles** view may differ. +and preview the result by opening http://localhost:8080/docs/README.md in your browser. This is only an estimate. The **gitiles** view may differ. #### Online with Gerrit's links to gitiles @@ -54,32 +95,3 @@ This is only an estimate. The **gitiles** view may differ. This **gitiles** view is the authoritative view, exactly the same as will be used when committed. - -## Document Index - -### Design Documents -* See the shared [Design Documents](https://drive.google.com/drive/folders/1JbUthATfybvMQR3yAHC4J0P7n6oftYNq) folder in the Chromium drive. - -### General Development -* [Workflows](workflows.md) -* [Chrome DevTools Design Review Guidelines](design_guidelines.md) -* [Release Management](release_management.md) -* [Third-party Guidelines](third_party_guidelines.md) -* [Localization](l10n.md) -* [V8 debugger support checklist for new language features](https://goo.gle/v8-checklist) -* [Chrome DevTools Protocol](devtools-protocol.md) -* [UMA metrics in DevTools](uma_metrics.md) - * [How to add UMA metrics in DevTools frontend](add_uma_metrics.md) - -### Testing -* [E2E test guide](../test/e2e/README.md) -* [Unit test guide](../test/unittests/README.md) -* [Web tests in the DevTools repo guide](../test/webtests/README) - -### Architectural Documentation -* [Architecture of DevTools](architecture_of_devtools.md) -* [Resource management in DevTools](resource_management.md) - -### Chromium -* [Chromium Docs](https://chromium.googlesource.com/chromium/src/+/master/docs/README.md) -* [V8 Documention](https://v8.dev/docs) diff --git a/docs/contributing_changes.md b/docs/contributing_changes.md new file mode 100644 index 0000000000..76a23342e3 --- /dev/null +++ b/docs/contributing_changes.md @@ -0,0 +1,86 @@ +# Contributing changes to Chromium DevTools + +See [Get the Code](get_the_code.md) for details on how to checkout the code, and [Chrome DevTools Design Review Guidelines](design_guidelines.md) for +information regarding our design process. + +[TOC] + +## Creating a change + +Usual [steps](https://chromium.googlesource.com/chromium/src/+/main/docs/contributing.md#creating-a-change) for creating a change work out of the box, when executed in the DevTools frontend repository. + +Tips to create meaningful CL descriptions: +- Provide information on what was changed and why +- Provide before/after screenshots (if applicable) +- Provide relevant link to demo or example (if applicable) +- Provide link to design doc (if applicable) + +Example CL, adapted from [Chromium guidelines](https://chromium.googlesource.com/chromium/src/+/main/docs/contributing.md#uploading-a-change-for-review): + +``` +Summary of change (one line) + +Longer description of change addressing as appropriate: +what change was made, why the change is made, context if +it is part of many changes, description of previous behavior +and newly introduced differences, etc. + +Long lines should be wrapped to 72 columns for easier log message +viewing in terminals. + +How to test: + 1. .. + 2. .. + +Before: https://page-to-before-screenshot.com/before +After: https://page-to-after-screenshot.com/after +Bug: 123456 + +``` +## Merges and cherry-picks + +_Merge request/approval is handled by Chromium Release Managers. DevTools follows [Chromium's merge criteria](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/process/merge_request.md#merge-criteria-phases). In exceptional cases please get in touch with hablich@chromium.org._ + +Step-by-step guide on how to merge: + +1. Request approval to merge by adding the `Merge-Request-XX` label to the relevant crbug. A bot will come by and either ask for more info ([example](https://bugs.chromium.org/p/chromium/issues/detail?id=1123307#c1)) or approve the request. +1. Backmerges are done to the `chromium/xxxx` (e.g. `chromium/3979`) branch on the DevTools frontend repo. + Use or [Omahaproxy](https://omahaproxy.appspot.com/) + to find out what branch a major Chromium version has (column `true_branch`). +1. Open the to-be-merged commit in Gerrit + ([example](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928912)). +1. Click the hamburger menu on the top right and select “Cherry pick”. +1. Select the branch to merge to e.g. `chromium/3968`. +1. The cherry-pick CL is created + ([example](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928913)). +1. Get it reviewed if necessary. +1. Once merge request approval is granted (see step 1), click the hamburger menu on the cherry-pick CL and select “Submit”. (Setting the Commit-Queue bit (+2) has no effect because these branches don’t have a commit queue.) +1. Done. + +### Merge conflicts + +If the approach above causes conflicts that need resolving, you can use an alternative git workflow which allows you to resolve conflicts locally before uploading. This is very similar to the [chromium git merge steps](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/process/merge_request.md#using-git) but with different branch names. These steps will **create the cherry-pick CL via git**. + +_It is suggested to use the Gerrit UI approach when possible, it is more straightforward and automated. Only use this approach if your cherry-pick causes conflicts._ + +For the commands below, replace `xxxx` with the Chromium branch number that you are merging into. + +To set up your local environment run: + +``` +gclient sync --with_branch_heads +git fetch +git checkout -b BRANCH_NAME origin/chromium/xxxx +git cl upstream origin/chromium/xxxx +``` + +You can then cherry-pick your commit from the main branch: + +``` +git cherry-pick -x YOUR_COMMIT +``` + +You can then resolve any conflicts, run tests, build DevTools, etc, locally to verify everything is working. Then run `git cl upload` to upload the CL and get a review as normal. + +**Make sure you remove the Change-ID: line** from the description to avoid issues when uploading the CL. + diff --git a/docs/third_party_guidelines.md b/docs/dependencies.md similarity index 72% rename from docs/third_party_guidelines.md rename to docs/dependencies.md index 5048aa6d3a..d9de3bcf92 100644 --- a/docs/third_party_guidelines.md +++ b/docs/dependencies.md @@ -1,14 +1,36 @@ -# Third-party Guidelines +# Dependencies [TOC] +## Managing dependencies + +If you need to manually roll a git dependency, it's not sufficient to update the revision in the DEPS file. Instead, use +the gclient tool: +```bash +gclient setdep -r DEP@REV # for example build@afe0125ef9e10b400d9ec145aa18fca932369346 +``` +This will simultaneously update both the DEPS entry as well as the gitlink entry for the corresponding git submodule. + +To sync dependencies from Chromium to DevTools frontend, use `scripts/deps/roll_deps.py && npm run generate-protocol-resources`. +Note that this may: +- Introduce unneeded whitespace/formatting changes. Presubmit scripts (e.g. invoked via `git cl upload`) will automatically fix these locally, so just apply the changes directly to your change (e.g. with `git commit --amend`) afterwards. +- Introduce breaking changes to the devtools protocol, causing compilation failures. Unfortunately these need to be handled manually as there are some changes (e.g. removing an enum value) that cannot fail gracefully. + + +The following scripts run as AutoRollers, but can be manually invoked if desired: + +- 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`. + +## Third-party Guidelines + When you want to integrate or use third-party content in DevTools, there are a couple of different ways to do so. Most of the time, we have to make a distinction between "third-party code we use as part of DevTools implementation" and "third-party code we use to build DevTools itself, but is not included in the product". -## Third-party code included in DevTools bundle +### Third-party code included in DevTools bundle All third-party content that you want to ship as part of the DevTools bundle must be included in `front_end/third_party`. The typical way to update these @@ -24,7 +46,7 @@ limitations apply. To make integration feasible, focus on small packages that (preferably) have no dependencies. This will make licensing checks feasible for Chromium reviewers and typically avoids inflating the bundle size. -## Third-party tooling packages +### Third-party tooling packages For all third-party packages that are used either as part of the DevTools build process or to augment engineers workflows (for example linters), we add them to @@ -51,7 +73,7 @@ thus result in smaller repository sizes. > updating either of these tools, update these at the end of a working day to > avoid full rebuilds for other engineers. -## Chromium third-party DEPS +### Chromium third-party DEPS Some packages related to infrastructure are maintained by Chromium infra teams. These packages are typically uploaded to cloud storage buckets or are explicitly diff --git a/docs/workflows.md b/docs/get_the_code.md similarity index 55% rename from docs/workflows.md rename to docs/get_the_code.md index db84ae777c..4ec75a9de6 100644 --- a/docs/workflows.md +++ b/docs/get_the_code.md @@ -1,16 +1,16 @@ -# Workflows - -## Checkouts +# Get the Code: Checkout and Build Chromium DevTools front-end In order to make changes to DevTools frontend, build, run, test, and submit changes, several workflows exist. Having [depot_tools](https://commondatastorage.googleapis.com/chrome-infra-docs/flat/depot_tools/docs/html/depot_tools_tutorial.html#_setting_up) set up is a common prerequisite. -### Standalone checkout +[TOC] + +## Standalone checkout 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, to run layout tests, you need to use the [chromium checkout](#Chromium-checkout) or [integrated checkout](#Integrated-checkout). -#### Checking out source +### Checking out source To check out the source for DevTools frontend only, follow these steps: @@ -20,7 +20,7 @@ cd devtools fetch devtools-frontend ``` -#### Build +### Build To build, follow these steps: @@ -40,7 +40,7 @@ If you want to have faster build by disabling typecheck, consider to use gn gen out/fast-build --args='devtools_skip_typecheck=true' ``` -#### Update to latest +### Update to latest To update to latest tip of tree version: @@ -49,7 +49,7 @@ git fetch origin; git checkout origin/main # or, alternatively: git rebase-upda gclient sync ``` -#### Out of sync dependencies and cross-repo changes +### Out of sync dependencies and cross-repo changes The revisions of git dependencies must always be in sync between the entry in DEPS and the git submodule. PRESUBMIT will reject CLs that try to submit changes to one but not the other. @@ -65,11 +65,11 @@ happens when commits were created using `git add -A`, for example), it's necessa `git checkout -p origin/main`). The latter also applies in the third case: Create a CL excluding the dependency changes and a separate CL with a proper roll. -#### Run in a pre-built Chromium +### Run in a pre-built Chromium You can run a [build](#Build) of DevTools frontend in a pre-built Chromium in order to avoid the expensive Chromium build. For example, you can use the latest version of Chrome Canary, or the downloaded binary in `third_party/chrome`. -##### Running from file system +#### Running from file system This works with Chromium 79 or later. **(Requires `brew install coreutils` on Mac.)** @@ -100,7 +100,7 @@ If you get errors along the line of `Uncaught TypeError: Cannot read property 's **Tip**: You can inspect DevTools with DevTools by undocking DevTools and then opening a second instance of DevTools (see keyboard shortcut above). -##### Running from remote URL +#### Running from remote URL This works with Chromium 85 or later. @@ -114,7 +114,7 @@ Then point to that web server when starting Chromium, for example: Open DevTools via F12 or Ctrl+Shift+J on Windows/Linux or Cmd+Option+I on Mac. -##### Running in hosted mode +#### Running in hosted mode Serve the content of `out/Default/gen/front_end` on a web server, e.g. via `python3 -m http.server 8000`. @@ -140,7 +140,7 @@ you could run the hosted DevTools with the following command: $ google-chrome http://localhost:8000/inspector.html?ws=localhost:9222/devtools/page/BADADD4E55BADADD4E55BADADD4E5511 ``` -### Integrated checkout +## Integrated checkout **This solution is experimental, please report any trouble that you run into!** @@ -151,7 +151,7 @@ This workflow will ensure that your local setup is equivalent to how Chromium in A full [Chromium checkout](#Chromium-checkout) is a pre-requisite for the following steps. -#### Untrack the existing devtools-frontend submodule +### Untrack the existing devtools-frontend submodule First, you need to untrack the existing devtools-frontend submodule in the chromium checkout. This ensures that devtools isn't dragged along whenever you update your chromium dependencies. @@ -177,7 +177,7 @@ In the `custom_deps` section, insert this line: Following this step, there are two approaches to manage your standalone checkout -#### Single gclient project +### Single gclient project **Note: it's not possible anymore to manage the two projects in separate gclient projects.** @@ -213,156 +213,26 @@ If you did run `gclient sync` first, remove the devtools-frontend directory and Run `gclient sync` after creating the link to fetch the dependencies for the standalone checkout. -### Chromium checkout +## Chromium checkout DevTools frontend can also be developed as part of the full Chromium checkout. This workflow can be used to make small patches to DevTools as a Chromium engineer. However, it is different to our infrastructure setup and how to execute general maintenance work, and therefore discouraged. -#### Checking out source +### Checking out source Follow [instructions](https://www.chromium.org/developers/how-tos/get-the-code) to check out Chromium. DevTools frontend can be found under `third_party/devtools-frontend/src/`. -#### Build +### Build Refer to [instructions](https://www.chromium.org/developers/how-tos/get-the-code) 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/gen/third_party/devtools-frontend/src/front_end`. -#### Run +### Run Run Chrome with bundled DevTools frontend: ```bash out/Default/chrome ``` - -## Test - -### DevTools frontend - -Test are available by running scripts in `scripts/test/`. Please refer to the [overview document](https://docs.google.com/document/d/1c2KLKoFMqLB2A9sNAHIhYb70XFyfBUBs5BZSYfQAT-Y/edit). The current test status can be seen at the [test waterfall](https://ci.chromium.org/p/devtools-frontend/g/main/console). - -### Layout tests - -After building content shell as part of Chromium, we can also run layout tests that are relevant for DevTools frontend: - -```bash -autoninja -C out/Default content_shell -third_party/blink/tools/run_web_tests.py -t Default http/tests/devtools -``` - -To debug a failing layout test we can run -```bash -npm run debug-test -- http/tests/devtools///.js -``` - -The script supports either default DevTools checkout inside the chromium tree or side-by-side checkouts of chromium and DevTools. Passing --custom-devtools-frontend is not supported currently, meaning in the side-by-side scenario the DevTools checkout inside the chromium tree will be used (if not symlinked). -## Creating a change - -Usual [steps](https://chromium.googlesource.com/chromium/src/+/main/docs/contributing.md#creating-a-change) for creating a change work out of the box, when executed in the DevTools frontend repository. - -Tips to create meaningful CL descriptions: -- Provide information on what was changed and why -- Provide before/after screenshots (if applicable) -- Provide relevant link to demo or example (if applicable) -- Provide link to design doc (if applicable) - -Example CL, adapted from [Chromium guidelines](https://chromium.googlesource.com/chromium/src/+/main/docs/contributing.md#uploading-a-change-for-review): - -``` -Summary of change (one line) - -Longer description of change addressing as appropriate: -what change was made, why the change is made, context if -it is part of many changes, description of previous behavior -and newly introduced differences, etc. - -Long lines should be wrapped to 72 columns for easier log message -viewing in terminals. - -How to test: - 1. .. - 2. .. - -Before: https://page-to-before-screenshot.com/before -After: https://page-to-after-screenshot.com/after -Bug: 123456 - -``` -## Managing dependencies - -If you need to manually roll a git dependency, it's not sufficient to update the revision in the DEPS file. Instead, use -the gclient tool: -```bash -gclient setdep -r DEP@REV # for example build@afe0125ef9e10b400d9ec145aa18fca932369346 -``` -This will simultaneously update both the DEPS entry as well as the gitlink entry for the corresponding git submodule. - -To sync dependencies from Chromium to DevTools frontend, use `scripts/deps/roll_deps.py && npm run generate-protocol-resources`. -Note that this may: -- Introduce unneeded whitespace/formatting changes. Presubmit scripts (e.g. invoked via `git cl upload`) will automatically fix these locally, so just apply the changes directly to your change (e.g. with `git commit --amend`) afterwards. -- Introduce breaking changes to the devtools protocol, causing compilation failures. Unfortunately these need to be handled manually as there are some changes (e.g. removing an enum value) that cannot fail gracefully. - - -The following scripts run as AutoRollers, but can be manually invoked if desired: - -- 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`. - -## Merges and cherry-picks - -_Merge request/approval is handled by Chromium Release Managers. DevTools follows [Chromium's merge criteria](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/process/merge_request.md#merge-criteria-phases). In exceptional cases please get in touch with hablich@chromium.org._ - -Step-by-step guide on how to merge: - -1. Request approval to merge by adding the `Merge-Request-XX` label to the relevant crbug. A bot will come by and either ask for more info ([example](https://bugs.chromium.org/p/chromium/issues/detail?id=1123307#c1)) or approve the request. -1. Backmerges are done to the `chromium/xxxx` (e.g. `chromium/3979`) branch on the DevTools frontend repo. - Use or [Omahaproxy](https://omahaproxy.appspot.com/) - to find out what branch a major Chromium version has (column `true_branch`). -1. Open the to-be-merged commit in Gerrit - ([example](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928912)). -1. Click the hamburger menu on the top right and select “Cherry pick”. -1. Select the branch to merge to e.g. `chromium/3968`. -1. The cherry-pick CL is created - ([example](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1928913)). -1. Get it reviewed if necessary. -1. Once merge request approval is granted (see step 1), click the hamburger menu on the cherry-pick CL and select “Submit”. (Setting the Commit-Queue bit (+2) has no effect because these branches don’t have a commit queue.) -1. Done. - -### Merge conflicts - -If the approach above causes conflicts that need resolving, you can use an alternative git workflow which allows you to resolve conflicts locally before uploading. This is very similar to the [chromium git merge steps](https://chromium.googlesource.com/chromium/src.git/+/refs/heads/main/docs/process/merge_request.md#using-git) but with different branch names. These steps will **create the cherry-pick CL via git**. - -_It is suggested to use the Gerrit UI approach when possible, it is more straightforward and automated. Only use this approach if your cherry-pick causes conflicts._ - -For the commands below, replace `xxxx` with the Chromium branch number that you are merging into. - -To set up your local environment run: - -``` -gclient sync --with_branch_heads -git fetch -git checkout -b BRANCH_NAME origin/chromium/xxxx -git cl upstream origin/chromium/xxxx -``` - -You can then cherry-pick your commit from the main branch: - -``` -git cherry-pick -x YOUR_COMMIT -``` - -You can then resolve any conflicts, run tests, build DevTools, etc, locally to verify everything is working. Then run `git cl upload` to upload the CL and get a review as normal. - -**Make sure you remove the Change-ID: line** from the description to avoid issues when uploading the CL. - -## Useful Commands - -### `git cl format --js` - -Formats all code using clang-format. - -### `npm run check` - -Runs all static analysis checks on DevTools code. diff --git a/docs/release_management.md b/docs/release_management.md index 96d5c39125..2b5e3e9255 100644 --- a/docs/release_management.md +++ b/docs/release_management.md @@ -2,7 +2,7 @@ ## Merges and Cherry-Picks -The documentation on cherry-picks and merges (including backmerges and backports) can be found in [`workflows.md`](workflows.md#merges-and-cherry_picks). +The documentation on cherry-picks and merges (including backmerges and backports) can be found in [`contributing_changes.md`](contributing_changes.md#merges-and-cherry_picks). ## Versioning diff --git a/docs/testing.md b/docs/testing.md new file mode 100644 index 0000000000..c25f4c1b1d --- /dev/null +++ b/docs/testing.md @@ -0,0 +1,29 @@ +# Testing Chromium DevTools + +Follow the steps outlined in [Get the Code](get_the_code.md) to checkout the DevTools front-end code. + +[TOC] + +## DevTools frontend + +Test are available by running scripts in `scripts/test/`. Please refer to the [overview document](https://docs.google.com/document/d/1c2KLKoFMqLB2A9sNAHIhYb70XFyfBUBs5BZSYfQAT-Y/edit). The current test status can be seen at the [test waterfall](https://ci.chromium.org/p/devtools-frontend/g/main/console). + +* [E2E test guide](../test/e2e/README.md) +* [Unit test guide](../test/unittests/README.md) + + +## Layout tests + +After building content shell as part of Chromium, we can also run layout tests that are relevant for DevTools frontend: + +```bash +autoninja -C out/Default content_shell +third_party/blink/tools/run_web_tests.py -t Default http/tests/devtools +``` + +To debug a failing layout test we can run +```bash +npm run debug-test -- http/tests/devtools///.js +``` + +The script supports either default DevTools checkout inside the chromium tree or side-by-side checkouts of chromium and DevTools. Passing `--custom-devtools-frontend` is not supported currently, meaning in the side-by-side scenario the DevTools checkout inside the chromium tree will be used (if not symlinked).