How to Debug CSS Using the Bisect Technique

Debugging CSS issues can often be challenging, especially when trying to pinpoint the specific cause of a problem. In this blog, we will explore a helpful workflow called bisecting, also known as “divide et impera,” to efficiently identify and solve CSS bugs.

Today, while working on my new online course page, I encountered a problem with the positioning of a loading indicator spinner inside a circle. When clicking the “Buy Now” button, the spinner was not centered correctly. Here’s a GIF to illustrate the issue:

To begin debugging, I opened the DevTools and navigated to the Sources panel, which displayed all the loaded files on the page. My initial assumption was that there might be a conflict between the page’s CSS and Paddle’s CSS rules. So, I decided to investigate further.

To isolate the issue, I first cleared the content of one of my CSS files entirely. Chrome automatically updates the page’s appearance when CSS files are modified in the Sources panel. This allowed me to observe that the spinner now worked correctly:

With this knowledge, I deduced that one of the rules within the CSS file was causing the problem. However, with 312 lines in the file, finding the exact line responsible seemed daunting. That’s where the bisect technique comes in.

To apply the bisect technique, I started by selecting lines 150 to 312 and deleting them. After testing, I discovered that the issue persisted, suggesting that the problematic code must exist within the first 149 lines. To revert my changes, I used the cmd-Z (undo) shortcut to restore the removed lines and proceeded to delete lines 70 to 149.

By following this iterative process of deletion and testing, I eventually identified the specific line that caused the problem.

Using the bisect technique can greatly simplify the process of debugging CSS issues, enabling a more systematic approach to narrowing down and resolving problems efficiently.

Tags: CSS debugging, bisect technique