Make good use of git bisect to help you quickly locate difficult bugs

Basic steps to locate a problem using the git bisect dichotomy:

1. git bisect start [most recent wrong commitid] [farther correct commitid]
2. Test the corresponding function
3. git bisect good is correctly marked
4. Flag the error git bisect bad until something goes wrong
5. The suggested commitid is the commit that caused the problem

Problem Description

Let's take a bug in the Vue DevUI component library as an example 🌰

5d14c34b this time commit, execute yarn build error, and the error information is as follows:

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

What I can confirm is that the last released version ( d577ce4 ) can be built successfully.

Introduction to git bisect

git bisect command uses a binary search algorithm to find which commit in the commit history introduced the error. It almost allows you to quickly locate any source code problems with your eyes closed, very practical.

You just need to tell the command a bad one that contains the bug commit ID and a good one before the bug was introduced commit ID , and the command will use a dichotomy to choose between those two commits The middle commit ID , switch to the code of that commit ID , then ask you is it good commit ID or bad commit ID Is it good or bad, and then it keeps narrowing down until it finds the culprit that introduced the bug commit ID .

In this way, we only need to analyze the code submitted at that time, and we can quickly locate and solve the bug (the specific positioning time depends on the amount of code submitted and your experience), so we must develop small batches when submitting code The habit of submitting is to submit only a small independent function at a time. If there is a problem, it will be very fast to locate.

Next, I will take a bug that has appeared in Vue DevUI before as an example, and introduce in detail how to use this tool git bisect .

positioning process

 git bisect start 5d14c34b d577ce4
or
git bisect start HEAD d577ce4

Among them, 5d14c34b this is the latest submission with bugs, d577ce4 this is the last submission with no problem.

After executing the startup bisect , immediately cut to the middle of a submission, the following is the print result:

 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)

You can see that the following commits have been cut:

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

Excuting an order:

 yarn build

The build was successful, so mark down good :

 git bisect good

 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)

Mark Wan good , and immediately passed the dichotomy again, cutting to a new commit:

 [c0c4cc1a] feat(drawer): add service model (#27)

Execute the build command again:

 yarn build

The build failed with the earliest error we encountered:

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

Under the tag bad , again cut to the middle commit:

 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

And so on, constantly verifying, marking, verifying, marking... will eventually prompt us which submission led to this bug, submitter, submission time, submission message and other information.

 kagol:vue-devui kagol$ git bisect good
c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0 is the first bad commit
commit c0c4cc1a25c5c6967b85100ee8ac636d90eff4b0
Author: nif <[e-mail]>
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

Finally locate the commit with the problem:

 c0c4cc1a is the first bad commit

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

The entire positioning process is almost a mechanical operation. You don't need to know the project source code, you don't need to know who submitted what recently, you just need to mindlessly: verify, mark, verify, mark, and finally git will tell us that there was an error in that submission.

Such a fragrant tool, come and try it!

problem analysis

Until which commit has a problem, the scope of positioning is much smaller.

If you usually submit code and follow the small particle submissions well, bugs will appear.

We must commend our DevUI contributors here. They have all developed the habit of submitting small particles. This time the bug submission c0c4cc1a only submitted 4 files, involving more than 70 lines. code.

We searched for the document keyword, and found two places, both in drawer-service.ts the entire file:

One is line 12:

 static $body: HTMLElement | null = document.body

The other is line 17:

 this.$div = document.createElement('div')

It turned out that the culprit was 12 lines of code!

Solve the case!

Here @lnzhangsong our landowner, please fix this bug when you have time.