How to build Chromium to hack on DevTools

readme.md

A Chromium Compiling Setup for DevTools Hackers

Devtools hacking

Follow https://github.com/ChromeDevTools/devtools-frontend/blob/main/docs/workflows.md

The dtb and dtcr commmands here are nice.

More

Please read this doc: Chrome DevTools Contribution Guide

Chromium hacking

1. Set the args.gn as your gn build configuration
   • Probably best to run gn args out/Default and copy/paste what you want to use, then save.
2. source chromium.sh
3. git pull && depsbcr

That's it. You can also run the various components of the bash script seperately and together.

• deps: run gclient sync to synchronize all the "submodule" dependencies
• hooks run gclient hooks, which is otherwise automaticaly run after deps.
• gom: initialize goma
• b: build/compile chrome
• cr: run the built chrome binary

I often do this sequence: git pull && deps && bcr followed by hacking followed by bcr, bcr, bcr.

Useful setup guides:

https://chromium.googlesource.com/chromium/src/+/HEAD/docs/clangd.md https://chromium.googlesource.com/chromium/src/+/HEAD/docs/vscode.md

Googlers:

• http://go/chrome-dev-wfh
• http://go/mac-cross-chromium

Protips:

• Avoid committing to main. https://gist.github.com/stefansundin/9059706/#file-install-pre-commit-sh

args.gn

# Build arguments for the gn build
# You can set these with `gn args out/Default`
#   ( and they're stored in src/out/Default/args.gn )
# See "gn args out/Default --list" for available build arguments

# component build, because people love it
is_component_build = true

# release build, because its faster
 is_debug = true

# native client? no thx. (still needed in march 2023.)
# also put this in .gclient:
#    "custom_vars": {
#      'checkout_nacl': False,
#    },
enable_nacl = false

# no symbols (this is probably redundant for release anyway)
#symbol_level = 0

# This is default for Release builds, but forced regardless
# dcheck_always_on = false

# goma only if you're a googler
use_goma = true

chromium.sh

#!/bin/bash

# usage:
# after `git pull`, a full build is now `depsbcr` or `deps && b && cr`
# and after changes.. a `bcr` will recompile and relaunch chrome.

# 2021 update: __dt versions of these functions are added for the chromium-devtools repo. 

function deps () {
    # --reset drops local changes. often great, but if making changes inside v8, you don't want to use --reset
    # also reset seems to reset branch position in the devtools-internal repo??? weird.
    gclient sync --delete_unversioned_trees --jobs=70
}

function hooks () {
    gclient runhooks
}

function b () {
    local dir=./$(git rev-parse --show-cdup)/out/Default
    # autoninja will automatically determine your -j number based on CPU cores
    local cmd="autoninja -C $(realpath $dir) chrome" 
    echo "  > $cmd"
    # start the compile
    eval $cmd

    if [ $? -eq 0 ]; then
        osascript -e 'display notification "" with title "✅ Chromium compile done"'
    else
        osascript -e 'display notification "" with title "❌ Chromium compile failed"'
    fi
}

function dtb () {
    local dir_default=$(realpath $PWD/$(git rev-parse --show-cdup)out/Default/)
    local cmd="autoninja -C $dir_default"
    echo "  > $cmd"
    eval $cmd
}


# https://github.com/GoogleChrome/chrome-launcher/blob/main/docs/chrome-flags-for-tools.md
#                          # Avoid the blocking startup dialog for 'Chromium wants to use your confidential information stored in "Chromium Safe Storage" in your keychain'
#                                                  # Avoid the startup dialog for 'Do you want the application “Chromium.app” to accept incoming network connections?'
clutch_chrome_flags="--use-mock-keychain --disable-features=DialMediaRouteProvider"


# you can also add any extra args: `cr --user-data-dir=/tmp/lol123"
# (disable DialMediaRouteProvider gets rid of that "do you want to accept incoming connections" prompt)
function cr () {
    local dir="./$(git rev-parse --show-cdup)/out/Default"
    local cmd="./$dir/Chromium.app/Contents/MacOS/Chromium $clutch_chrome_flags $argv"
    echo "  > $cmd"
    eval "$cmd"
}

function dtcr () {
    local crpath="./$(git rev-parse --show-cdup)/third_party/chrome/chrome-mac/Chromium.app/Contents/MacOS/Chromium"
    local dtpath=$(realpath out/Default/gen/front_end)
    local cmd="$crpath --custom-devtools-frontend=file://$dtpath --user-data-dir=$HOME/chromium-devtools/dt-chrome-profile $clutch_chrome_flags $argv"
    echo "  > $cmd"
    eval "$cmd"
}



function gom () {
    # these probably dont make sense for everyone.
    export GOMAMAILTO=/dev/null
    export GOMA_ENABLE_REMOTE_LINK=yes

    goma_ctl ensure_start
}

function dtbcr () {
    if dtb; then
        dtcr
    fi
}


function bcr () {
    if b; then
        cr
    fi
}


function depsb () {
    if deps; then
        gom
        b
    fi
}

function depsbcr () {
    if deps; then
        gom
        bcr
    fi
}

function hooksbcr () {
    if hooks; then
        gom
        bcr
    fi
}

Note that having chromium source code locally is not enough to run this script. You need all dependencies, see: https://www.chromium.org/developers/how-tos/get-the-code

@paulirish Could you update this gist to use the new build system (GN) instead? I was able to follow instructions here and use this mapping between GN and GYP flags.

@athyuttamre somewhere in the last two years i updated these for GN. just stating it for the record. :)

I updated this gist again. Porting over my more minimal functions for compiling chrome.

The debug_devtools GN arg should now be removed, as it is replaced by the --custom-devtools-frontend runtime flag.

The debug_devtools GN arg should now be removed, as it is replaced by the --custom-devtools-frontend runtime flag.

Hah, just came to say the same thing.

this gist is a critical document