Chrome devtools二次开发准备:获取源码和编译

在 Ubuntu 上获取并编译 Google Chrome DevTools Frontend 源码，有两种主流方式：

直接下载官方已经打好包的 npm 包（最快，免编译）
用 Google 的 depot_tools 完整拉取 Chromium 源码并自行编译（最完整，可二次开发）

下面分别给出步骤，你可以按需求二选一。

一、只想"拿到就用"------用 npm 包（免编译）官方已经把每天构建好的前端文件发布到 npm，装完就能跑。

安装

bash 复制代码

# 装包（版本号每天更新，可去 npm 查最新）
npm i -g chrome-devtools-frontend@latest
# 进入包目录
cd $(npm root -g)/chrome-devtools-frontend

起静态服务验证
bash 复制代码
```
# 任意静态服务器均可
npx http-server . -p 8081
```
浏览器访问
bash 复制代码
```
http://localhost:8081/front_end/devtools_app.html?ws=localhost:9229
```
只要 9229 端口有符合 CDP 的 WebSocket 服务，就能正常调试。

二、需要"源码级二次开发"------完整拉取并编译适合想改面板、加功能、追最新主干代码的同学。

系统依赖（Ubuntu 22.04 示例）

bash 复制代码

sudo apt update
sudo apt install git python3 python3-venv pkg-config \
     build-essential ninja-build nodejs npm curl

准备 depot_tools（Google 的构建工具链）

bash 复制代码

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
echo 'export PATH=$PATH:'"$(pwd)/depot_tools" >> ~/.bashrc
source ~/.bashrc

拉取 DevTools Frontend 源码（约 1-2 GB）

bash 复制代码

mkdir devtools && cd devtools
fetch devtools-frontend     # 这条命令来自 depot_tools
cd devtools-frontend

同步依赖并生成构建文件

bash 复制代码

gclient sync                # 第一次会下载 Node、Java 运行时等，需科学上网
gn gen out/Default          # 生成 Ninja 构建文件

编译（Ubuntu 上约 5-10 分钟，视 CPU 而定）
bash 复制代码
```
autoninja -C out/Default    # 等价于 ninja -C out/Default，但自动并行
```
产物在
sql 复制代码
```
out/Default/gen/front_end/
```
即为可运行的 DevTools 前端。

本地预览

bash 复制代码

cd out/Default/gen/front_end
npx http-server . -p 8081

浏览器打开

bash 复制代码

http://localhost:8081/devtools_app.html?ws=localhost:9229

让本地 Chrome 默认使用你编译的版本

关闭所有 Chrome 后启动
bash 复制代码
```
google-chrome --custom-devtools-frontend=file://$(pwd)/out/Default/gen/front_end
```
以后按 F12 就会直接加载你改过的面板。

三、常见问题速查

网络超时：
fetch / gclient 阶段需要访问 Google 服务器，Ubuntu 下可给终端走代理
bash 复制代码
```
export https_proxy=http://127.0.0.1:7890 http_proxy=http://127.0.0.1:7890
```
编译报错缺 header：

一般把 build-essential 和 pkg-config 补齐即可；若仍缺 java/javac，可再装 openjdk-11-jdk。
只想定时拉最新官方构建，而不自己编：

关注 GitHub 仓库 aryasaatvik/chrome-devtools-frontend-build 的 releases，每周自动更新已编好的包，下载即用。

一句话总结

"快速体验" → npm i -g chrome-devtools-frontend 即可；
"深度定制" → Ubuntu 装好 depot_tools → fetch devtools-frontend → gn gen → autoninja，完事后 out/Default/gen/front_end 就是你的专属调试器前端。