How to debug with “git bisect”

Debugging is one of the most important skills for all developers and honestly, debugging has taken most of the time of a developer but not coding. So, debugging skills are very important for a good programmer and there is an awesome tool to help “git bisect”. To know what it is and how it works, please take a look at the documentation.

In OpenPaaS team, there are many pull requests that are merged every day and mistakes are inevitable, especially CSS bugs which there is no unit test for them. For example, OpenPaaS got the critical bug on the modules which display members of a collaboration.

Firstly, I inspect the member element and there are member names but they are not displayed

So I guess there is a CSS mistake that is merged. Because of the bug is reproduced on multiple modules which are using member display component.

Start the debug process by git bisect start

Chose a commit cab6c5885 which I remember that it works

git bisect good cab6c5885

I set the latest commit to bad: git bisect bad

Now, we are at the commit db6b272f1. I refresh member page, there is no bug, so the current commit is good: git bisect good

Current commit is 9565e6686. I refresh member page, there is no bug, so the current commit is good: git bisect good

Current commit is f3afc5e22. I refresh member page and the bug appears, so the current commit is bad. I set the current commit is bad

git bisect bad

And I continue the progress until I find the commit that introduced a bug

Show the commit content and there are CSS modifications, awesome, that what I guessed at the beginning. Now I know where is the bug came from, an important step to fix it.

Then to put everything back on the original state before git bisect

git bisect reset

Enjoy!

Thanks to Raphaël Ouazana and Christophe Hamerling.

WRITTEN BY

Tuan LE CONG

Team Leader / Software Engineer