在Mac上编译属于你自己的Chromium

前言

作为前端开发工程师,我们长期与浏览器打交道,他尽职尽责的为我们绘制内容丰富的网页,但他背后所蕴含的工作流程到底是怎样的?我们却很少去探究。或许我们应该迈出自己的舒适区了,不再局限于面经上背的滚瓜烂熟的 "从地址栏输入url到页面展示到底发生了什么?",而是从调试Chromium源码开始,理解浏览器的终极奥义,道阻且长、不妨尝一尝^-^。

安装Xcode

检查

shell 复制代码
ls `xcode-select -p`/Platforms/MacOSX.platform/Developer/SDKs

如果此命令输出以下类似结果,则代表Xcode完整版在本地已经安装:(注意不是命令行版版本

App Store下载

直接去Mac应用商店下载对应的Xcode即可,如果出现了以下结果:

我们先检查自己的系统版本:

检查系统版本与之对应的Xcode版本:

可以看到Xcode 14.014.0.1都支持咱们的系统版本:

那么我们需要去官网选择与我们的系统对应的版本进行下载:(搜索并不精确,注意检查搜索出来的版本是否支持

官网地址:developer.apple.com/download/al...

安装官方工具集 depot_tools

打开本地shell可以是原生shell 也可以是iTermcd到你想要安装的目录,执行以下代码:

shell 复制代码
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git

通过vi ~/.zshrc或者vi ~/.bashrc,取决于你使用的shell。然后将以下命令写入,从而将该目录下的可执行命令添加到系统环境变量中:(从而支持命令行直接输入fetch等命令

shell 复制代码
export PATH="$PATH:/path/to/depot_tools"

注意上面的/path/to要改为你自己的安装路径,比如我把depot_tools安装到了/Users/hope目录下:

:wq保存,并执行source ~/.zshrc重新加载zsh配置文件使其生效。

clone 代码

注意事项:

!!! 仓库很大,需要有稳定的梯子。

!!! 如果你对 Git 不感兴趣,也可以在 clone 完毕后删掉 .git 目录,

!!! 否则如果你的 shell 会自动展示 Git 信息,那每条命令运行都会很慢。

通过shellcd到一个指定的地方,比如我决定把Chromium代码放到桌面上:

shell 复制代码
cd ~/Desktop && mkdir chromium && cd chromium

如果你有梯子那么在执行命令之前先设置代理:

shell 复制代码
export http_proxy=http://your_proxy_server:your_proxy_port
export https_proxy=http://your_proxy_server:your_proxy_port

拉取代码:

shell 复制代码
fetch --no-history chromium

整个过程相当漫长,大概需要两三个小时,同时没有太多的日志输出,只要不报错,耐心等待即可。

生成编译所需配置文件

假如你目前在上一步创建的目录中,执行一下命令:

shell 复制代码
cd src && gn gen out/Default

执行结果如下:

编译

这行代码后劲儿很大,敲完之后可以双手离开键盘,编译过程非常漫长,建议睡觉,睡醒了就编译完成了hhh。(大概需要5、6个小时,且吃内存,建议在晚上空闲的时候编译

shell 复制代码
autoninja -C out/Default chrome

运行 Chromium

shell 复制代码
out/Default/Chromium.app/Contents/MacOS/Chromium

不出意外的话你会看到以下界面:

Congratulations!!! 咱们迈出了通向浏览器终极奥义的第一步!!!

参考

相关推荐
用户21411832636021 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep1 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo4 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒23 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用25 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥41 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器