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:
- Flexbox guide
- CSS grid tutorial
- CSS variables (custom attributes)
- Introduction to PostCSS
- CSS guarantees metallicity
- How to center an element using CSS
- CSS system fonts
- How to print HTML with styles
- Getting started with CSS transition
- CSS animation tutorial
- Introduction to CSS
- CSS guide
- How to set up Tailwind with PurgeCSS and PostCSS
- Tail wind cheat sheet
- How to continuously rotate an image using CSS
- Use CSS to make the table responsive
- How to debug CSS by halving
- CSS selector
- CSS cascade
- CSS specificity
- CSS attribute selector
- CSS colors
- CSS Unit
- CSS url()
- CSS typography
- CSS Box model
- CSS position properties
- CSS media queries and responsive design
- CSS function query
- CSS conversion
- How to style a list with CSS
- CSS vendor prefix
- CSS inheritance
- CSS pseudo-classes
- CSS pseudo elements
- Style HTML tables with CSS
- CSS Display property
- CSS calc() function
- CSS border
- Use @import to import CSS files
- CSS error handling
- CSS filter
- CSS Box size
- CSS background
- CSS comments
- CSS fonts
- CSS padding
- CSS float property and clear
- CSS normalization
- CSS z-index property
- How to disable text selection using CSS
- How to use CSS to place items at the bottom of their container
- How to invert colors using CSS
- Responsive front tags in CSS
- Responsive YouTube video embedding
- What is a good CSS breakpoint value for responsive design?
- How to align the center in Flexbox