Chromium DevTools 源码构建流程-Windows系统

介绍

chrome的开发者工具是独立于chrome的单独的项目， 通过按f12或审查元素打开的开发者工具其实是Chromium DevTools-frontend，该前端可以独立构建，实现开发者自定义的功能。

步骤

构建步骤基本按照官方文档来即可，参考 Chromium DevTools Docs，但是构建过程中需要进行gclient 等的更新，是颇为头大的问题。

构建depot_tools

将代码clone到本地，参考depot_tools_tutorial(7) Manual Page

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
若无法连上可配置git的Proxy，根据实际情况修改即可。

git config --global http.proxy 'socks5://127.0.0.1:1080'
git config --global https.proxy 'socks5://127.0.0.1:1080'

将depot_tools的目录加到系统环境变量中

执行gclient sync，如果卡住，说明需要配置系统Proxy，有2种方式。

如果是用cmd，则执行

 set http_proxy=127.0.0.1:端口号
 set https_proxy=127.0.0.1:端口号

执行完可通过set命令检查

如果是用powershell，则执行

$env:http_proxy="127.0.0.1:端口号"
$env:https_proxy="127.0.0.1:端口号"

执行完可通过 ls env:命令检查

此时执行gclient，等待更新完成后应该获得下图输出，第一次执行可能会等待许久，需要将gclient在Windows下运行的所有环境下载下来。

构建Chromium DevTools-frontend

回到 Chromium DevTools Docs，到工作目录，执行

mkdir devtools
cd devtools
fetch devtools-frontend

等待许久，根据网速而定，该步骤会将构建Chromium DevTools-frontend的所有环境下载下来，总的文件大小可能超过1G。

接下来是构建

cd devtools-frontend
gclient sync
gn gen out/Default
autoninja -C out/Default

期间会调用ninja,nodejs,python等构建项目，也需要一定的时间。

构建完成后，在out/Default目录下会生成一个gen目录，即为生成的文件，gen目录下的front_end目录即为生成的Chromium DevTools-frontend。

验证

此时将生成的front_end目录复制出来，在该目录下执行npx http-server .快速开启一个静态服务器，访问127.0.0.1:8000，可以看到我们构建的Chromium DevTools-frontend已经可以运行。

通过执行chrome --custom-devtools-frontend=file://front-end的绝对路径，可以将chrome的devtools替换为我们构建的devtools。

为验证效果，打开devtools_app.html，在其中<style>标签下加入，修改元素内容页面的背景色。

#elements-content{
	background-color: rgb(255 42 45);
  }

再次执行chrome --custom-devtools-frontend=file://front-end的绝对路径，按下F12验证效果，发现chrome已经使用了我们构建的devtools。