How to debug CSS by halving

One of the workflows I use to debug CSS

I have this problem today.

I added the Paddle button to the new online course page, so people can click the "Buy Now" button, and a beautiful Paddle pop-up window will appear.

There is a loading indicator in the pop-up window, a circle with a spinner, and there is a problem in it: when you click the "Buy Now" button, the spinner indicator is not centered inside the circle, as shown in the following gif:

I really don't know what caused this problem, so I'm thinking about how to solve it.

The principle I use in these situations isHalves. I also call itDivide and inequality.

I opened DevTools and moved to the "Source" panel, which shows all the files loaded in the page. I searched one of my CSS files because my intuition was that the CSS page interfered with Paddle's own CSS rules.

So i deletedAllThe content of the file.

When you change the CSS file in the "Source" panel, Chrome will automatically change the appearance of the page, so I was able to check and see that the spinner is now working!

Therefore, one of the rules in this CSS is the problem.

How do I find out which line?

The file has 312 lines. I select from lines 150 to 312 and delete it. try again. The problem still exists, so it must originate in the first 149 lines.

I hit cmd-Z (Undo) Put back the lines I deleted and delete lines 70-149.

The problem is solved, so the problem line is there. I click cmd-Z again to restore the deleted row.

And so on, you get the idea. Rinse and repeat until you find the problem line.

Download mine for freeCSS Manual


More CSS tutorials: