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

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

准备工作

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

  1. 本地开启科学上网,代理地区选择美国

  2. 设置全局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'
  1. 本地创建一个新的目录,拉取depot_tools项目,因为Chrome-DevTools-frontend的编译需要这个工具
shell 复制代码
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
  1. 打开电脑里的~/.bashrc~/.zshrc文件(配置其中一个就好 ),将我们拉取的depot_tools项目路径配置到系统环境变量中。例如我本地项目路径为/Users/my/development/depot_tools,则在文件里追加一行代码(路径记得替换成自己本地的),然后保存关闭文件
shell 复制代码
export PATH=/Users/my/development/depot_tools:$PATH

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

编译项目

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

  1. 第一次执行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
  1. 找一个地方创建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指令其实是帮你下载缺的依赖文件

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

  2. 下载完成后,进入devtools-frontend目录下,执行命令

sql 复制代码
gn gen out/Default
autoninja -C out/Default

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

  1. 最后记得清除代理,避免后续拉不了国内代码
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

这段代码也可以删除掉了

参考文献

相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端