在 Ubuntu 上获取并编译 Google Chrome DevTools Frontend 源码，有两种主流方式：
- 直接下载官方已经打好包的 npm 包（最快，免编译）
- 用 Google 的 depot_tools 完整拉取 Chromium 源码并自行编译（最完整，可二次开发）
下面分别给出步骤，你可以按需求二选一。
一、只想“拿到就用”——用 npm 包（免编译） 官方已经把每天构建好的前端文件发布到 npm，装完就能跑。
-
安装
# 装包（版本号每天更新，可去 npm 查最新） npm i -g chrome-devtools-frontend@latest # 进入包目录 cd $(npm root -g)/chrome-devtools-frontend -
起静态服务验证
# 任意静态服务器均可 npx http-server . -p 8081浏览器访问
http://localhost:8081/front_end/devtools_app.html?ws=localhost:9229只要 9229 端口有符合 CDP 的 WebSocket 服务，就能正常调试 。
二、需要“源码级二次开发”——完整拉取并编译 适合想改面板、加功能、追最新主干代码的同学。
-
系统依赖（Ubuntu 22.04 示例）
sudo apt update sudo apt install git python3 python3-venv pkg-config \ build-essential ninja-build nodejs npm curl -
准备 depot_tools（Google 的构建工具链）
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）
mkdir devtools && cd devtools fetch devtools-frontend # 这条命令来自 depot_tools cd devtools-frontend -
同步依赖并生成构建文件
gclient sync # 第一次会下载 Node、Java 运行时等，需科学上网 gn gen out/Default # 生成 Ninja 构建文件 -
编译（Ubuntu 上约 5-10 分钟，视 CPU 而定）
autoninja -C out/Default # 等价于 ninja -C out/Default，但自动并行产物在
out/Default/gen/front_end/即为可运行的 DevTools 前端 。
-
本地预览
cd out/Default/gen/front_end npx http-server . -p 8081浏览器打开
http://localhost:8081/devtools_app.html?ws=localhost:9229 -
让本地 Chrome 默认使用你编译的版本
关闭所有 Chrome 后启动google-chrome --custom-devtools-frontend=file://$(pwd)/out/Default/gen/front_end以后按 F12 就会直接加载你改过的面板 。
三、常见问题速查
-
网络超时：
fetch/gclient阶段需要访问 Google 服务器，Ubuntu 下可给终端走代理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就是你的专属调试器前端。
