Wondering what’s next for npm?Check out our public roadmap! »

    @hap-toolkit/chrome-devtools-frontend

    1.1.2 • Public • Published

    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

    git cl format --js

    Formats all code using clang-format.

    npm run check

    Runs all static analysis checks on DevTools code.

    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

    Install

    npm i @hap-toolkit/chrome-devtools-frontend

    DownloadsWeekly Downloads

    156

    Version

    1.1.2

    License

    SEE LICENSE IN https://chromium.googlesource.com/chromium/src/+/master/LICENSE

    Unpacked Size

    24 MB

    Total Files

    1026

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar