写点什么

git bisect:让你闭眼都能定位疑难 bug 的利器

  • 2022 年 5 月 30 日
  • 本文字数:2423 字

    阅读完需:约 8 分钟

本文分享自华为云社区《利用好 git bisect 这把利器,帮助你快速定位疑难 bug》,作者: DevUI。


使用 git bisect 二分法定位问题的基本步骤:

 

  1. git bisect start [最近的出错的 commitid] [较远的正确的 commitid]

  2. 测试相应的功能

  3. git bisect good 标记正确

  4. 直到出现问题则 标记错误 git bisect bad

  5. 提示的 commitid 就是导致问题的那次提交

问题描述

 

我们以Vue DevUI组件库的一个 bug 举例子🌰

 

5d14c34b 这一次 commit,执行 yarn build 报错,报错信息如下:

 

✓ building client + server bundles...✖ rendering pages...build error:ReferenceError: document is not defined
复制代码

 

我可以确定的是上一次发版本(d577ce4)是可以 build 成功的。

git bisect 简介

 

git bisect 命令使用二分搜索算法来查找提交历史中的哪一次提交引入了错误。它几乎能让你闭着眼睛快速定位任何源码导致的问题,非常实用。

 

你只需要告诉这个命令一个包含该 bug 的坏 commit ID 和一个引入该 bug 之前的好 commit ID,这个命令会用二分法在这两个提交之间选择一个中间的 commit ID,切换到那个 commit ID 的代码,然后询问你这是好的 commit ID 还是坏的 commit ID,你告诉它是好还是坏,然后它会不断缩小范围,直到找到那次引入 bug 的凶手 commit ID。

 

这样我们就只需要分析那一次提交的代码,就能快速定位和解决这个 bug(具体定位的时间取决于该次提交的代码量和你的经验),所以我们提交代码时一定要养成小批量提交的习惯,每次只提交一个小的独立功能,这样出问题了,定位起来会非常快。

 

接下来我就以Vue DevUI之前出现过的一个 bug 为例,详细介绍下如何使用 git bisect 这把利器。

定位过程

 

git bisect start 5d14c34b d577ce4orgit bisect start HEAD d577ce4
复制代码

 

其中 5d14c34b 这次是最近出现的有 bug 的提交,d577ce4 这个是上一次发版本没问题的提交。

 

执行完启动 bisect 之后,马上就切到中间的一次提交啦,以下是打印结果:

 

kagol:vue-devui kagol$ git bisect start 5d14c34b d577ce4Bisecting: 11 revisions left to test after this (roughly 4 steps)[1cfafaaa58e03850e0c9ddc4246ae40d18b03d71] fix: read-tip icon样式泄露 (#54)
复制代码

 

可以看到已经切到以下提交:

 

[1cfafaaa] fix: read-tip icon样式泄露 (#54)
复制代码

 

执行命令:

 

yarn build
复制代码

 

构建成功,所以标记下 good:

 

git bisect goodkagol:vue-devui kagol$ git bisect goodBisecting: 5 revisions left to test after this (roughly 3 steps)[c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0] feat(drawer): add service model (#27)
复制代码

 

标记万 good,马上又通过二分法,切到了一次新的提交:

 

[c0c4cc1a] feat(drawer): add service model (#27)
复制代码

 

再次执行 build 命令:

 

yarn build
复制代码

 

build 失败了,出现了我们最早遇到的报错:

 

✓ building client + server bundles...✖ rendering pages...build error:ReferenceError: document is not defined
复制代码

 

标记下 bad,再一次切到中间的提交:

 

kagol:vue-devui kagol$ git bisect bad
Bisecting: 2 revisions left to test after this (roughly 2 steps)
[86634fd8efd2b808811835e7cb7ca80bc2904795] feat: add scss preprocessor in docs && fix:(Toast) single lifeMode bug in Toast
复制代码

 

以此类推,不断地验证、标记、验证、标记…最终会提示我们那一次提交导致了这次的 bug,提交者、提交时间、提交 message 等信息。

 

kagol:vue-devui kagol$ git bisect goodc0c4cc1a25c5c6967b85100ee8ac636d90eff4b0 is the first bad commitcommit c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0Author: nif <lnzhangsong@163.com>Date: Sun Dec 26 21:37:05 2021 +0800
feat(drawer): add service model (#27)
* feat(drawer): add service model
* docs(drawer): add service model demo
* fix(drawer): remove 'console.log()'
packages/devui-vue/devui/drawer/index.ts | 7 +++--.../devui-vue/devui/drawer/src/drawer-service.ts | 33 ++++++++++++++++++++++packages/devui-vue/devui/drawer/src/drawer.tsx | 3 ++packages/devui-vue/docs/components/drawer/index.md | 29 +++++++++++++++++++4 files changed, 69 insertions(+), 3 deletions(-)create mode 100644 packages/devui-vue/devui/drawer/src/drawer-service.ts
复制代码

 

最终定位到出问题的 commit:

 

c0c4cc1a is the first bad commit
复制代码

 

https://github.com/DevCloudFE/vue-devui/commit/c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0

 

整个定位过程几乎是机械的操作,不需要了解项目源码,不需要了解最近谁提交了什么内容,只需要无脑地:验证、标记、验证、标记,最后 git 会告诉我们那一次提交出错。

 

这么香的工具,赶紧来试试吧!

问题分析

 

直到哪个 commit 出问题了,定位起来范围就小了很多。

 

如果平时提交代码又能很好地遵循小颗粒提交的话,bug 呼之欲出。

 

这里必须表扬下我们 DevUI 的田主(Contributor)们,他们都养成了小颗粒提交的习惯,这次导致 bug 的提交 c0c4cc1a,只提交了 4 个文件,涉及 70 多行代码。



我们在其中搜索下 document 关键字,发现了两处,都在 drawer-service.ts 整个文件中:

 

一处是 12 行的:

 

static $body: HTMLElement | null = document.body
复制代码

 

另一处是 17 行的:

 

this.$div = document.createElement('div')
复制代码



最终发现罪魁祸首就是 12 行的代码!

 

破案!

 

此处 @lnzhangsong 我们的田主,有空麻烦修下这个 bug。

 

华为伙伴暨开发者大会 2022 火热来袭,重磅内容不容错过!

精彩活动】勇往直前·做全能开发者→12 场技术直播前瞻,8 大技术宝典高能输出,还有代码密室、知识竞赛等多轮神秘任务等你来挑战。即刻闯关,开启终极大奖!点击【勇往直前】踏上全能开发者晋级之路吧!

 

技术专题】未来已来,2022 技术探秘→华为各领域的前沿技术、重磅开源项目、创新的应用实践,站在智能世界的入口,探索未来如何照进现实,干货满满 点击了解

 

​​点击关注,第一时间了解华为云新鲜技术~

发布于: 刚刚阅读数: 3
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
git bisect:让你闭眼都能定位疑难 bug的利器_开发_华为云开发者社区_InfoQ写作社区