为什么devc调试时循环一下就过去了_Chromium源码学习（1）—— 构建，调试

今天分享的这篇文章是因为知乎上认识的朋友 @Mark.c 给的建议，这也是第一次在知乎上面发表文章，以后打算就在知乎上记录和分享自己的学习心得。

为什么学习chromium源码

从实习至今，前端开发做了四年半，从最开始的jQuery到react，工作前三年基本上没有深入研究过项目中使用的框架；后来因为公司架构升级，就开始学习前端微服务，微前端框架是五花八门，接入时也遇到了各种坑，为了解决问题，就开始深入源码去学习微前端。出于兴趣后来又通过网上的博客和自己debug学习了react，react的巧妙地实现延时任务和普通任务的处理，通过channel实现异步渲染，这就有点像单核多进程调度；那react开发者为什么能够有这种思路去实现这类功能呢？那就要从解浏览器内核怎么处理渲染逻辑说起了，也就是通常提到的浏览器事件循环；当然网上有很多关于浏览器事件循环深入浅出的文章，但是我个人更喜欢直接去看源码，虽然不太懂c++，但是希望借此次学习能够掌握一些c++相关知识，为了更快入门，我打算先跟着知乎上比较优秀的文章进行调试，顺便做记录并且标明参考文章，这些就是我想学习浏览器源码的原因。

chromium调试和构建（注：我是Mac环境）

注：我是Mac环境，以下步骤需要终端代理；我是花了点钱，节点多不怕被封，不建议自己搭建（AgentNEO 这里买的 ^_^）

• 获取和安装构建工具包depot_tools

export 

• 获取chromium源码

  1. 创建一个文件夹存放源码 mkdir chromium && cd chromium

  2. 下载chromium源码 fetch --no-history chromium 当时我是没有 加上 no-history 参数，
     下载了差不多 30G
  3. 下载完毕后可以切换分支，我调试的分支是当前使用的浏览器版本分支

  下载期间不然电脑休眠，下载时间比较长，屏幕可以关掉亮度，当时我下载网络速度是 10M/S 左右
  具体下载多久忘记了，半天吧

• 源码构建和调试（debug模式）

  在depot_tools工具包里面有个工具叫做Ninja，chromium使用它进行构建

  1. cd ./src

  2. gn gen out/mychromium --ide=xcode (目录根据自己的需要自定义，以后使用xcode进行调试)

  3. 执行完步骤2后会在src下生产out/mychromium文件夹

  4. 编辑 out/mychromium 下的 args.gn 文件
     写入：
     is_debug = true
     is_component_build = true
     symbol_level = 2

  5. 以上步骤执行都没有问题之后，就进入到了最耗时阶段，我的是16年Mac，需要睡一觉才能build
     好的那一种，这个步骤就执行 autoninja -C out/mychromium chrome；需要注意的是如果途中编译
     错误的话不要慌，看看是什么错误处理就好了，一般是Python依赖不存在的错误，pip装一下就好了

  6. 用xcode打开项目 open out/mychromium/all.xcodeproj，如果以上步骤处理了很久，觉得心累，
     这个时候可以休息一下，让xcode index一下项目，虽然这个步骤也不影响正常调试

  7. 使用xcode的 attach to process进行调试，
     执行命令 out/mychromium/Chromium.app/Contents/MacOS/Chromium 运行步骤5构建好的chrome,
     xcode上选择 Debug > Attach to Process > Chromium

  8. 以上步骤就是调试 Chromium 的主进程了，看了别人以前写的博客可以直接命中断点，
     不过我的只能命中symbolic 断点，如果你的也不能直接命中，那么需要配置一下source map；
     具体看下面的步骤

sourceMap配置

参考 https://chromium.googlesource.com/chromium/src/+/HEAD/docs/lldbinit.md

1. 在我们的chromium资源目录下，实际上会有一个tools文件夹，里面包括了lldb文件夹，可以看看里面的lldbinit.py文件，可以大概看出它的作用

2. 看看是否存在 ~/.lldbinit 文件，没有就创建，我的是没有的，所以创建它---------------： 执行 touch ~/.lldbinit

3. 编辑 ~/.lldbinit，将以下内容复制到文件中，lldb根据自己的文件目录来写

# So that lldbinit.py takes precedence.
script sys.path[:0] = ['<.../path/to/chromium/src/tools/lldb>']
script import lldbinit

将 我们的chromium资源目录下 的lldb 配置到环境变量中，可以在Python命令行输出当前sys.path，看看是否已经正确配置，不会的话可以看看Python文档^_^，给个链接 python之sys模块详解 - 风-fmgao - 博客园

4. 配置成功后，重新运行chromium -> out/mychromium/Chromium.app/Contents/MacOS/Chromium，不报错，再在xcode中debug，就可以正确的命中断点了

第一次知乎分享，大家请多指教^_^

参考：chromium/chromium