Chromium DevTools 前端项目代码获取与构建指南

Chromium DevTools 前端项目代码获取与构建指南

devtools-frontend The Chrome DevTools UI 项目地址: https://gitcode.com/gh_mirrors/de/devtools-frontend

前言

Chromium DevTools 前端项目是 Chrome 开发者工具的核心组成部分，为开发者提供了强大的网页调试能力。本文将详细介绍如何获取和构建 DevTools 前端代码，帮助开发者快速搭建本地开发环境。

环境准备

在开始之前，请确保已安装以下工具：

• Git 版本控制系统
• Node.js 和 npm 包管理器
• Python 3.x
• 适用于您操作系统的构建工具链

独立代码检出方式

代码检出步骤

1. 创建项目目录并初始化代码库：

mkdir devtools
cd devtools
fetch devtools-frontend

此命令会创建一个新的目录结构，并下载 DevTools 前端项目的完整代码。

构建流程

1. 同步依赖项：

cd devtools-frontend
gclient sync

2. 执行构建：

npm run build

构建完成后，生成的产物位于 out/Default/gen/front_end 目录中。

构建目标选择

默认使用 Default 目标构建，如需指定其他目标：

npm run build -- -t Debug

加速构建技巧

通过禁用 TypeScript 类型检查可显著提升构建速度：

gn gen out/Default --args="devtools_skip_typecheck=true"

或创建专用构建目标：

gn gen out/fast-build --args="devtools_skip_typecheck=true"
npm run build -- -t fast-build

自动重建功能

启用监视模式实现自动重建：

npm run build -- --watch

Linux 系统限制处理

监视模式可能遇到 inotify 限制问题，可通过以下命令调整：

sudo sysctl fs.inotify.max_user_watches=524288
sudo sysctl -p

永久生效设置：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p

代码更新方法

更新到最新代码：

git fetch origin
git checkout origin/main
gclient sync

与预构建 Chromium 配合使用

推荐启动方式

使用内置脚本启动测试版 Chrome：

npm start

常用参数：

• --no-open 禁用自动打开 DevTools
• --browser=canary 使用 Chrome Canary
• --remote-debugging-port=9222 启用远程调试

文件系统直接运行

各平台命令示例：

Mac 系统：

./third_party/chrome/chrome-mac/Google\ Chrome\ for\ Testing.app/Contents/MacOS/Google\ Chrome\ for\ Testing --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)

Linux 系统：

./third_party/chrome/chrome-linux/chrome --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)

Windows 系统：

third_party\chrome\chrome-win\chrome.exe --custom-devtools-frontend="绝对路径\out\Default\gen\front_end"

远程 URL 运行方式

1. 启动本地服务器：

python -m http.server

2. 启动 Chrome 并指定前端 URL：

./third_party/chrome/chrome-<平台>/chrome --custom-devtools-frontend=http://localhost:8000/

集成式开发环境配置

解除子模块关联

1. 在 Chromium 源码目录执行：

gclient sync

2. 编辑 .gclient 文件，添加：

"src/third_party/devtools-frontend/src": None,

创建统一项目配置

修改 .gclient 文件配置：

solutions = [
  {
    "name": "src",
    "url": "https://chromium.googlesource.com/chromium/src.git",
    "custom_deps": {
      "src/third_party/devtools-frontend/src": None,
    },
  },
  {
    "name": "devtools-frontend",
    "managed": False,
    "url": "https://chromium.googlesource.com/devtools/devtools-frontend.git",
  }
]

3. 创建符号链接：

ln -s src/third_party/devtools-frontend/src devtools-frontend

4. 同步依赖：

gclient sync

完整 Chromium 检出方式

构建特定目标

仅构建 DevTools 前端资源：

ninja -C out/Default devtools_frontend_resources

构建产物位于： out/Default/gen/third_party/devtools-frontend/src/front_end

运行测试

启动带有自定义 DevTools 的 Chrome：

out/Default/chrome

结语

本文详细介绍了 Chromium DevTools 前端项目的多种开发环境配置方式，开发者可根据实际需求选择合适的方案。独立检出方式适合专注于前端开发的场景，而集成方式则更适合需要同时修改 Chromium 和 DevTools 的高级开发需求。

devtools-frontend The Chrome DevTools UI 项目地址: https://gitcode.com/gh_mirrors/de/devtools-frontend