CSS Debugging Quick Fixes

Temporary CSS snippets for rapid visual diagnosis of layout problems. Use these to understand structure, then implement proper solutions.

Universal Visibility:

/* See all element boundaries */
* { outline: 1px solid red !important; }
 
/* Highlight specific element types */
div { background: rgba(255,0,0,0.1) !important; }
span { background: rgba(0,255,0,0.1) !important; }

Layout Analysis:

/* Force block display to see stacking */
* { display: block !important; }
 
/* Remove all positioning */
* { position: static !important; }
 
/* Disable flexbox/grid temporarily */
.container { display: block !important; }

Overflow Investigation:

/* Prevent horizontal overflow */
* { max-width: 100% !important; box-sizing: border-box !important; }
 
/* Show hidden overflow */
* { overflow: visible !important; }

Mental Model: These are diagnostic tools, not solutions. Like using a stethoscope - helps identify the problem, doesn’t cure it.

Usage Pattern: Apply → Identify issue → Remove → Implement proper fix

Browser Console Shortcuts:

• $0.style.outline = '2px solid red' (selected element)
• $$('div').forEach(el => el.style.background = 'red') (all divs)

Related: CSS Layout Debugging Strategy, Browser Dev Tools Layout Features