如何编译Chrome-DevTools-frontend源码(macos)

由于谷歌用的自家的编译工具编译项目，加上他家资源需要翻墙，容易出现各种报错，所以写了这篇文章记录下macos系统上，如何构建Chrome DevTools frontend项目源码。

准备工作

在编译Chrome DevTools frontend项目前，我们需要先安装下编译指令

本地开启科学上网，代理地区选择美国
设置全局git代理。其中socks5://127.0.0.1:7890需要根据自己的代理软件提供的端口自行修改。我本地使用clash pro挂机场代理，所以用的7890端口

shell 复制代码

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

本地创建一个新的目录，拉取depot_tools项目，因为Chrome-DevTools-frontend的编译需要这个工具

shell 复制代码

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

打开电脑里的~/.bashrc或~/.zshrc文件(配置其中一个就好 )，将我们拉取的depot_tools项目路径配置到系统环境变量中。例如我本地项目路径为/Users/my/development/depot_tools，则在文件里追加一行代码(路径记得替换成自己本地的)，然后保存关闭文件

shell 复制代码

export PATH=/Users/my/development/depot_tools:$PATH

控制台执行source ~/.bashrc命令使环境配置生效

编译项目

在上一轮，我们完成了编译工具的配置工作。接下来我们，开始正式编译Chrome-DevTools-frontend。

第一次执行gclient sync命令可能会出现获取代码失败的问题。先到~/.bashrc或~/.zshrc文件里，配置下代理。下面的http://127.0.0.1:7890需要替换成自己电脑上的代理地址

shell 复制代码

export http_proxy=http://127.0.0.1:7890
export https_proxy=$http_proxy
export ftp_proxy=$http_proxy
export rsync_proxy=$http_proxy
export HTTP_PROXY=$http_proxy
export HTTPS_PROXY=$http_proxy
export FTP_PROXY=$http_proxy
export RSYNC_PROXY=$http_proxy

找一个地方创建gclient文件，例如/Users/my/development/gclient，在文件夹里创建.gclient文件，文件内容如下

ini 复制代码

solutions = [
  {
    "managed": False,
    "name": "src",
    "url": "https://github.com/chromium/chromium.git",
    "custom_deps": {},
    "deps_file": ".DEPS.git",
    "safesync_url": "",
  },
]

为了避免gclient sync执行时出现NOTICE: You have PROXY values set in your environment, but gsutil in depot_tools does not (yet) obey them. Also, --no_auth prevents the normal BOTO_CONFIG environment variable from being used. To use a proxy in this situation, please supply those settings in a .boto file pointed to by the NO_AUTH_BOTO_CONFIG environment variable报错。

找个地方创建.boto文件。例如我的文件路径为/Users/my/development/.boto，然后去~/.bashrc或~/.zshrc文件里配置

shell 复制代码

 export NO_AUTH_BOTO_CONFIG=/Users/my/development/.boto

保存后，在控制台执行source ~/.bashrc命令使环境配置生效。回到之前的/Users/my/development/gclient路径里，执行命令gclient sync

gclient sync这个指令会执行很久，大概会下载几十G的文件。如果没有用这个命令，直接去执行gn gen out/Default会报错提示depot_tools路径里缺文件。这个gclient sync指令其实是帮你下载缺的依赖文件

完成上述步骤后，找个地方创建devtools文件夹，例如/Users/my/development/devtools，在当前目录里执行fetch devtools-frontend(fetch命令是之前安装的depot_tools里提供的，包括后面用到的gn和autoninja )下载Chrome DevTools frontend前端代码
下载完成后，进入devtools-frontend目录下，执行命令

sql 复制代码

gn gen out/Default
autoninja -C out/Default

命令全部执行完后，我们也就完成了整个编译流程。编译后的前端产物会生成在out/Default/gen/front_end文件里

最后记得清除代理，避免后续拉不了国内代码

shell 复制代码

git config --global --unset http.proxy
git config --global --unset https.proxy

还有~/.bashrc或~/.zshrc里面的

shell 复制代码

export http_proxy=http://127.0.0.1:7890
export https_proxy=$http_proxy
export ftp_proxy=$http_proxy
export rsync_proxy=$http_proxy
export HTTP_PROXY=$http_proxy
export HTTPS_PROXY=$http_proxy
export FTP_PROXY=$http_proxy
export RSYNC_PROXY=$http_proxy

这段代码也可以删除掉了

如何编译Chrome-DevTools-frontend源码(macos)

准备工作

编译项目

参考文献