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.
Member of a group
Members of a chat channel
Firstly, I inspect the member element and there are member names but they are not displayed
Inspect member element
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
Step 1
Now, we are at the commit db6b272f1. I refresh member page, there is no bug, so the current commit is good: git bisect good
Step 2
Current commit is 9565e6686. I refresh member page, there is no bug, so the current commit is good: git bisect good
Step 3
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!