Skip to content

Instantly share code, notes, and snippets.

@chelovekula
Forked from paulirish/args.gn
Created January 5, 2021 23:12
Show Gist options
  • Save chelovekula/1367cb4411c1fb46b47b2a0d277ef7dd to your computer and use it in GitHub Desktop.
Save chelovekula/1367cb4411c1fb46b47b2a0d277ef7dd to your computer and use it in GitHub Desktop.
How to build Chromium to hack on DevTools

A Chromium Compiling Setup for DevTools Hackers

Instructions:

  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.
  1. source chromium.sh
  2. 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. However if you're hacking on DevTools, you often don't need to recompile.

Devtools Debugging

In this config, we've included the debug_devtools = true build setting.

  • That allows editing *.js and *.css in your working directory and picking up those changes on devtools re-open. (or alt-r). So, after compiling once, you can make JS & CSS edits without recompiling.
  • Also, You will also have "Inspect Element" on the devtools itself for self-debugging.

More

Please read this doc: Chrome DevTools Contribution Guide

Protips:

  • Avoid committing to master: run this in src/
    • curl -fL https://gist.githubusercontent.com/stefansundin/9059706/raw/install-pre-commit.sh | sh
# 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 = false
# hardlink'ed devtools frontend. oh yes
debug_devtools = true
# no thx
enable_nacl = false
# This is default for Release builds, but forced regardless
dcheck_always_on = false
# goma only if you're a googler
use_goma = true
# usage:
# after `git pull`, a full build is now `depsbcr`
# and after changes.. a `bcr` will recompile and relaunch chrome.
function deps () {
env GYP_DEFINES=disable_nacl=1 gclient sync
}
function hooks () {
env GYP_DEFINES=disable_nacl=1 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 \"$dir\" chrome"
echo " > $cmd"
eval "$cmd"
if [ $? -eq 0 ]; then
printf "\n✅ Chrome build complete!\n"
fi
}
# you can also add any extra args: `cr --user-data-dir=/tmp/lol123"
function cr () {
local dir=$(git rev-parse --show-cdup)/out/Default
local cmd="./$dir/Chromium.app/Contents/MacOS/Chromium $argv"
echo " > $cmd"
eval "$cmd"
}
function gom () {
# these probably dont make sense for everyone.
export GOMAMAILTO=/dev/null
export GOMA_OAUTH2_CONFIG_FILE=$HOME/.goma_oauth2_config
export GOMA_ENABLE_REMOTE_LINK=yes
~/goma/goma_ctl.py ensure_start
}
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment