Okay, so, I do my best to stay on top of technologies and tools, but with so many options in our ecosystem, its all too easy for helpful tools to slip through cracks. Well, this post is to make sure Git Bisect doesn't slip by for you!
I've been redoing my portfolio site and have continued to use the space theme of my original portfolio. (Don't judge, I'm a space nerd) I made a really cool, pure CSS, animated star field component for my banner image. I was very set on its design and it was the first component I made on the site.
My home page layout was a bigger puzzle for me and I went back and forth on it, moving things around, rearranging, etc. I finally got to something I was happy with using a bento grid layout and was super pleased. That is, until I scrolled up and saw my star field header had half stopped working.
Uh oh. When did that happen? Where did it happen? I had been distracted by my bento grid and I'm someone who also makes it a practice to use atomic commits with my changes, so I had like 20 commits to look through.
I lamented this to my husband, a fellow engineer, who said "Oh, just use Git Bisect." Huh wha? So, off I went and, you guys, it was mind blowing to me. I've been a software engineer for 7 years and no one had suggested this to me before.
How it works, to quote the docs, by "using binary search algorithm to find which commit in your project’s history introduced a bug".
git bisect start
You first tell it the commit where you first noticed the bug is "bad".
git bisect bad # Current version is bad
Then you go back to a commit that you know worked correctly and label it "good". The example uses a version but I just used my commit SHA. It's better to err on the side of caution and search widely, so I used a pretty early commit.
git bisect good v2.6.13-rc2 # v2.6.13-rc2 is known to be good
Then you're off! The algorithm picks a commit between those two goal posts and asks you whether the selected commit is "good" or "bad". It continues narrowing down until it finds the exact commit that introduced the bug. Et voila!
Pro-tip from the trenches: If you land on a commit that is so broken it won't even build, don't panic. Just type git bisect skip to jump to the next one.
So with that in mind, I narrowed down the commit that was the problem in moments. As I looked through it, I immediately saw the issue. Somehow in my bento grid madness, I had put a margin: 0 auto instead of a margin: 0 on the star field. Since my CSS animation relied on randomly generated pixel positioning per "star", that "auto" centering was shifting the entire canvas offset and clipping the animation.
D'oh! That was definitely not needed and so I removed it and was happy to see my full star field rendered in all its nerdy glory. I was able to track down the problem in mere minutes thanks so git bisect.
Important! Don't forget to "clean up" the bisect state, or you'll be stuck in a "detached HEAD" state, and your Git will act very strangely when you try to commit your fix. Use this reset command to get back to your normal work.
git bisect reset
Now, if you really want to feel like a wizard, you don't even have to manually check the site. If you have a test script (like npm test), you can just run:
git bisect run npm test
Git will literally do the binary search for you while you go grab a coffee. It runs the test, marks the commit, and stops when it finds the bug. Though this would be dependent upon having a test suite; still gotta test manually for a visual bug.
So, I highly recommend you put this one in your toolbox, if it wasn't already. Now, this will only be helpful if you use proper atomic commits and don't introduce multiple, massive changes in one commit. That's a good habit to instill anyway. :)
Top comments (0)