Chrome 的 DevTools 竟然是用 JS 写的

万万没想到 Chrome 的 DevTools 竟然是用 JS 写的，感觉自己也行了（做 Chrome 工程师😂）。既然是 JS 写的代码，作为 FE 肯定对源码充满了好奇。本文将在 Mac 上搭建 Chrome DevTools 环境，看看源码并调试一下。

环境搭建

环境搭建全文参考官方文档。下面仅列出我觉得最简单的搭建步骤。

1. 安装 depot_tools

参考文档，就两个步骤：

# 1. 找个地方克隆 depot_tools 项目
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

# 2. 加入 PATH 一遍可以使用 fetch/gn/autoninja/gclient 命令
export PATH=/path/to/depot_tools:$PATH

2. 克隆 DevTools 项目

# 1. 找个地方创建 devtools 目录
mkdir devtools

cd devtools

# 2. fetch 是 depot_tools 提供的命令，将克隆 DevTools 项目
fetch devtools-frontend

3. 修改代码，以便验证本地代码生效

推荐使用 vscode 打开 devtools-frontend 项目，修改 front_end/panels/profiler/ProfileLauncherView.ts 文件，找到 UIStrings.takeSnapshot 所在行，并在该行下新增一行修改按钮的颜色，如下图。

// 新增代码为：
this.controlButton.style.color = 'orange';

4. 构建

cd devtools-frontend

# 1. 生成用于构建的配置，配置 devtools_skip_typecheck 跳过 TS 检查，构建更快
gn gen out/Default --args='devtools_skip_typecheck=true'

# 2. 执行构建，慢慢等待，后面修改代码后，只需执行这一步
autoninja -C out/Default

5. 运行

# 要求本地 Chrome 在 79 版本以上
# 用了 sudo，所以是以 root 的用户身份启动的 Chrome
sudo "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)

切换到 Memory Tab，可以看到 Take snapshot 的按钮字体颜色为橙色，我们的本地代码生效了。

调试

1. 先将 DevTools 设置为 undock，如下图。先点击右侧三个点，然后选择最左侧的 undock。
2. 选中刚刚 undock 的 DevTools 窗口，按快捷键 ⌘+⌥+I，会弹出另一个 DevTools 窗口。该窗口可以检查/调试 undocked 的 DevTools 窗口。
3. 选中第二个 DevTools 窗口的 Source Tab，⌘+P 打开 ProfileLauncherView.ts 文件，并在 controlButtonClicked 方法中断点。
4. 在第一个 DevTools 中，点击 Memory Tab 中的 Take snapshot 按钮，将触发断点。

总结

如果以后用 DevTools 遇到疑问，可以直接看代码了，真香😍。