點(diǎn)擊上方?前端Q，關(guān)注公眾號

回復(fù)加群，加入前端Q技術(shù)交流群

使用git bisect二分法定位問題的基本步驟：

git bisect start [最近的出錯的commitid] [較遠(yuǎn)的正確的commitid]

測試相應(yīng)的功能

git bisect good 標(biāo)記正確

直到出現(xiàn)問題則 標(biāo)記錯誤 git bisect bad

提示的commitid就是導(dǎo)致問題的那次提交

問題描述

我們以Vue DevUI^[1]組件庫的一個(gè)bug舉例子🌰

5d14c34b這一次commit，執(zhí)行yarn build報(bào)錯，報(bào)錯信息如下：

??building?client?+?server?bundles... ??rendering?pages... build?error:ReferenceError:?document?is?not?defined 復(fù)制代碼

我可以確定的是上一次發(fā)版本（d577ce4^[2]）是可以build成功的。

git bisect 簡介

git bisect命令使用二分搜索算法來查找提交歷史中的哪一次提交引入了錯誤。它幾乎能讓你閉著眼睛快速定位任何源碼導(dǎo)致的問題，非常實(shí)用。

你只需要告訴這個(gè)命令一個(gè)包含該bug的壞commit ID和一個(gè)引入該bug之前的好commit ID，這個(gè)命令會用二分法在這兩個(gè)提交之間選擇一個(gè)中間的commit ID，切換到那個(gè)commit ID的代碼，然后詢問你這是好的commit ID還是壞的commit ID，你告訴它是好還是壞，然后它會不斷縮小范圍，直到找到那次引入bug的兇手commit ID。

這樣我們就只需要分析那一次提交的代碼，就能快速定位和解決這個(gè)bug（具體定位的時(shí)間取決于該次提交的代碼量和你的經(jīng)驗(yàn)），所以我們提交代碼時(shí)一定要養(yǎng)成小批量提交的習(xí)慣，每次只提交一個(gè)小的獨(dú)立功能，這樣出問題了，定位起來會非常快。

接下來我就以Vue DevUI^[3]之前出現(xiàn)過的一個(gè)bug為例，詳細(xì)介紹下如何使用git bisect這把利器。

定位過程

git?bisect?start?5d14c34b?d577ce4 or git?bisect?start?HEAD?d577ce4 復(fù)制代碼

其中5d14c34b這次是最近出現(xiàn)的有bug的提交，d577ce4這個(gè)是上一次發(fā)版本沒問題的提交。

執(zhí)行完啟動bisect之后，馬上就切到中間的一次提交啦，以下是打印結(jié)果：

kagol:vue-devui?kagol$?git?bisect?start?5d14c34b?d577ce4 Bisecting:?11?revisions?left?to?test?after?this?(roughly?4?steps) [1cfafaaa58e03850e0c9ddc4246ae40d18b03d71]?fix:?read-tip?icon樣式泄露?(#54) 復(fù)制代碼

可以看到已經(jīng)切到以下提交：

[1cfafaaa]?fix:?read-tip?icon樣式泄露?(#54) 復(fù)制代碼

執(zhí)行命令：

yarn?build 復(fù)制代碼

構(gòu)建成功，所以標(biāo)記下good：

git?bisect?good 復(fù)制代碼 kagol:vue-devui?kagol$?git?bisect?good Bisecting:?5?revisions?left?to?test?after?this?(roughly?3?steps) [c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0]?feat(drawer):?add?service?model?(#27) 復(fù)制代碼

標(biāo)記萬good，馬上又通過二分法，切到了一次新的提交：

[c0c4cc1a]?feat(drawer):?add?service?model?(#27) 復(fù)制代碼

再次執(zhí)行build命令：

yarn?build 復(fù)制代碼

build失敗了，出現(xiàn)了我們最早遇到的報(bào)錯：

??building?client?+?server?bundles... ??rendering?pages... build?error:ReferenceError:?document?is?not?defined 復(fù)制代碼

標(biāo)記下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? 復(fù)制代碼

以此類推，不斷地驗(yàn)證、標(biāo)記、驗(yàn)證、標(biāo)記...最終會提示我們那一次提交導(dǎo)致了這次的bug，提交者、提交時(shí)間、提交message等信息。

kagol:vue-devui?kagol$?git?bisect?good c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0?is?the?first?bad?commit commit?c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0 Author:?nif?<lnzhangsong@163.com> Date:???Sun?Dec?26?21:37:05?2021?+0800feat(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 復(fù)制代碼

最終定位到出問題的commit：

c0c4cc1a?is?the?first?bad?commit 復(fù)制代碼

github.com/DevCloudFE/…^[4]

整個(gè)定位過程幾乎是機(jī)械的操作，不需要了解項(xiàng)目源碼，不需要了解最近誰提交了什么內(nèi)容，只需要無腦地：驗(yàn)證、標(biāo)記、驗(yàn)證、標(biāo)記，最后git會告訴我們那一次提交出錯。

這么香的工具，趕緊來試試吧！

問題分析

直到哪個(gè)commit出問題了，定位起來范圍就小了很多。

如果平時(shí)提交代碼又能很好地遵循小顆粒提交的話，bug呼之欲出。

這里必須表揚(yáng)下我們DevUI的田主（Contributor）們，他們都養(yǎng)成了小顆粒提交的習(xí)慣，這次導(dǎo)致bug的提交c0c4cc1a，只提交了4個(gè)文件，涉及70多行代碼。

image.png

我們在其中搜索下document關(guān)鍵字，發(fā)現(xiàn)了兩處，都在drawer-service.ts整個(gè)文件中：

一處是12行的：

static?$body:?HTMLElement?|?null?=?document.body 復(fù)制代碼

另一處是17行的：

this.$div?=?document.createElement('div') 復(fù)制代碼 image.png

最終發(fā)現(xiàn)罪魁禍?zhǔn)拙褪?2行的代碼！

破案！

此處@lnzhangsong我們的田主，有空麻煩修下這個(gè)bug。

image.png

關(guān)于本文

來源：DevUI團(tuán)隊(duì)

https://juejin.cn/post/7046409685561245733

往期推薦

大廠面試官：我理想中的前端

對話Svelte未來，Rust 編譯器？構(gòu)建大型應(yīng)用?

收藏！史上最全 Vue 前端代碼風(fēng)格指南

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧

總結(jié)

以上是生活随笔為你收集整理的利用好 git bisect 这把利器，帮助你快速定位疑难 Bug的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。