Debugging CSS

DevTools Keyboard Shortcuts:

OPENING DEVTOOLS:
- F12 or Ctrl+Shift+I (Windows/Linux)
- Cmd+Option+I (Mac)
- Right-click → Inspect

NAVIGATION:
- Ctrl/Cmd + ] - Next panel
- Ctrl/Cmd + [ - Previous panel
- Esc - Toggle console drawer

ELEMENTS PANEL:
- Arrow keys - Navigate DOM tree
- H - Toggle element visibility
- Delete - Delete element
- Ctrl/Cmd + Z - Undo changes
- F2 - Edit as HTML

STYLES PANEL:
- Click property - Edit value
- Tab - Next property
- Shift+Tab - Previous property
- Click checkbox - Toggle property
- Up/Down arrows - Increment/decrement values
- Shift+Up/Down - ±10
- Alt+Up/Down - ±0.1

COLOR PICKER:
- Shift+Click - Cycle color formats (hex/rgb/hsl)
- Click eyedropper - Pick color from page

COMPUTED STYLES:
- Show only user-defined styles
- Filter properties
- See which rule sets property

UNDERSTANDING THE STYLES PANEL:

1. INLINE STYLES (Highest specificity)
   element.style { ... }

2. STYLESHEET RULES (Ordered by specificity)
   .class { ... }          ← More specific
   div { ... }             ← Less specific
   
3. INHERITED STYLES
   Inherited from parent elements
   (shown in lighter color)

4. USER AGENT STYLESHEET
   Browser default styles
   (shown at bottom)

VISUAL INDICATORS:

✓ Property with checkbox - Click to toggle on/off
⚠️ Warning icon - Invalid value or browser doesn't support
🔍 Computed value - Click to see calculation
↗️ Link icon - Jump to source file
—  Strikethrough - Property is overridden

INTERACTIVE FEATURES:

- Click color swatch - Open color picker
- Click timing function - Open cubic-bezier editor  
- Click shadow value - Open shadow editor
- Shift+Click color - Cycle formats (hex → rgb → hsl)
- Hover over selector - Highlights elements in page
- Click selector - Scroll to rule in source

MODIFYING STYLES:

1. Click any value to edit
2. Tab through properties
3. Check/uncheck to toggle
4. + button to add new rule
5. Changes are temporary (refresh to reset)

BOX MODEL VISUALIZATION:

┌─────────────────────────────────────┐
│         MARGIN (orange)             │
│  ┌────────────────────────────────┐ │
│  │      BORDER (yellow)           │ │
│  │  ┌──────────────────────────┐  │ │
│  │  │   PADDING (green)        │  │ │
│  │  │  ┌────────────────────┐  │  │ │
│  │  │  │  CONTENT (blue)    │  │  │ │
│  │  │  │   width x height   │  │  │ │
│  │  │  └────────────────────┘  │  │ │
│  │  └──────────────────────────┘  │ │
│  └────────────────────────────────┘ │
└─────────────────────────────────────┘

WHAT IT SHOWS:

- Content dimensions (width × height)
- Padding on all sides
- Border width on all sides  
- Margin on all sides
- Total element size

INTERACTIVE FEATURES:

- Hover over each section in diagram
- Element highlights on page
- Click values to edit
- See computed vs declared values

COMMON ISSUES TO CHECK:

✗ Margin collapse - Vertical margins combine
✗ Box-sizing - Is it border-box or content-box?
✗ Unexpected width - Check padding + border
✗ Overflow - Content larger than container
✗ Negative margins - Can cause overlaps

/* Problem: Styles not applying due to specificity */

/* This doesn't work - too weak */
.button {
  background: blue;
}

/* This overrides it - higher specificity */
.header .nav .button {
  background: red;
}

/* Solution 1: Increase specificity */
.nav .button {
  background: blue !important;  /* ⚠️ Last resort! */
}

/* Solution 2: Better - Use more specific selector */
.header .nav .button.button-primary {
  background: blue;
}

/* Solution 3: Best - Reduce specificity everywhere */
.button {
  background: red;
}

.button-primary {
  background: blue;  /* Simple, flat selectors */
}

/* Debugging tip: Check Computed styles to see what's winning */

/* Problem: Flexbox/Grid not working */

/* ❌ Common mistakes */
.container {
  display: flex;
  /* Child elements not behaving as expected? */
}

.child {
  display: block;  /* This is fine */
  float: left;     /* ❌ Float breaks flex! Remove this */
}

/* ✓ Solution: Remove conflicting properties */
.child {
  /* Floats, position: absolute, and display: block 
     can interfere with flex/grid children */
}

/* Problem: Width not respecting max-width */
.element {
  width: 1000px;
  max-width: 800px;  /* max-width is ignored! */
}

/* ✓ Solution: Remove fixed width or set smaller */
.element {
  width: 100%;       /* Let max-width control */
  max-width: 800px;
}

/* Problem: Height: 100% not working */
.child {
  height: 100%;  /* Parent has no height! */
}

/* ✓ Solution: Parent needs explicit height */
.parent {
  height: 100vh;  /* Or any explicit height */
}

.child {
  height: 100%;   /* Now works */
}

/* Problem: Unexpected margins */

/* Margin collapse - adjacent vertical margins combine */
.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
  /* Total gap = 30px (not 50px!) - margins collapse */
}

/* ✓ Solution: Use padding or gap instead */
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;  /* No collapse with gap */
}

/* Problem: Unexpected space below image */
<div>
  <img src="image.jpg">  <!-- Extra space below! -->
</div>

/* Images are inline by default - creates space for descenders */

/* ✓ Solution 1: Make image block */
img {
  display: block;
}

/* ✓ Solution 2: Remove line-height space */
.image-container {
  line-height: 0;
}

/* ✓ Solution 3: Vertical align */
img {
  vertical-align: bottom;
}

/* Problem: Content overflowing container */
.container {
  width: 300px;
}

.child {
  width: 350px;  /* Wider than parent! */
}

/* ✓ Solution: Set max-width */
.child {
  max-width: 100%;
}

/* Problem: z-index not working */

.element {
  z-index: 999;  /* Not working! Why? */
}

/* z-index only works on positioned elements */

/* ✓ Solution: Add position property */
.element {
  position: relative;  /* Or absolute, fixed, sticky */
  z-index: 999;        /* Now works */
}

/* Problem: z-index war */
.header {
  z-index: 1000;
}

.dropdown {
  z-index: 1001;
}

.modal {
  z-index: 1002;
}

/* ✓ Solution: Establish stacking contexts */
:root {
  --z-base: 1;
  --z-dropdown: 10;
  --z-modal: 100;
  --z-toast: 1000;
}

.header {
  z-index: var(--z-base);
}

.dropdown {
  z-index: var(--z-dropdown);
}

/* Problem: Parent with z-index creates new stacking context */
.parent {
  position: relative;
  z-index: 1;  /* Creates stacking context */
}

.child {
  position: absolute;
  z-index: 9999;  /* Can't escape parent context! */
}

/* ✓ Solution: Move element outside stacking context */
/* Or remove z-index from parent if not needed */

/* Problem: Text overflowing container */

.text {
  width: 200px;
  /* Long words break out! */
}

/* ✓ Solution: Add word wrapping */
.text {
  overflow-wrap: break-word;  /* Break long words */
  word-break: break-word;     /* Alternative */
}

/* For truncation with ellipsis */
.text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Problem: Font not loading */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  /* Font shows, then changes - FOIT (Flash of Invisible Text) */
}

/* ✓ Solution: Add font-display */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2');
  font-display: swap;  /* Show fallback immediately */
}

/* Problem: Line height cutting off text */
.text {
  line-height: 1;  /* Descenders cut off! */
}

/* ✓ Solution: Increase line-height */
.text {
  line-height: 1.5;  /* Standard readable height */
}

/* CSS Debugging Tricks */

/* 1. Outline everything to see layout */
* {
  outline: 1px solid red;  /* Temporary - shows all boxes */
}

/* 2. Different colors for different levels */
* { outline: 1px solid red; }
* * { outline: 1px solid green; }
* * * { outline: 1px solid blue; }
* * * * { outline: 1px solid yellow; }

/* 3. Force visibility to debug hidden elements */
.element {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* 4. Highlight specific element */
.debug-me {
  outline: 3px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

/* 5. Show element dimensions */
.element::before {
  content: 'W: ' attr(data-width) ' H: ' attr(data-height);
  position: absolute;
  background: yellow;
  padding: 2px 5px;
  font-size: 10px;
}

/* 6. Disable animations temporarily */
* {
  animation: none !important;
  transition: none !important;
}

/* 7. Make everything visible */
body * {
  background: rgba(255, 0, 0, 0.1) !important;
}

/* 8. Check if pseudo-element exists */
.element::before {
  content: 'BEFORE';  /* Make it visible */
  background: yellow;
}

/* 9. Force min-content width (see minimum width) */
.element {
  width: min-content !important;
}

/* 10. Debug grid/flex layouts */
.grid {
  background: 
    linear-gradient(red 1px, transparent 1px) 0 0 / 100px 100px,
    linear-gradient(90deg, red 1px, transparent 1px) 0 0 / 100px 100px;
  /* Shows grid lines */
}

RESPONSIVE DEBUGGING WORKFLOW:

1. DEVICE TOOLBAR (Ctrl/Cmd+Shift+M)
   • Choose device presets (iPhone, iPad, etc.)
   • Set custom dimensions
   • Rotate device (portrait/landscape)
   • Test touch events
   • Throttle network speed

2. MEDIA QUERY INSPECTOR
   • See all media queries in CSS
   • Click to jump to that breakpoint
   • Shows min-width/max-width ranges

3. RESPONSIVE MODE TIPS
   • Drag to resize viewport
   • See pixel dimensions in real-time
   • Test between breakpoints (not just at them)
   • Check for content reflow

4. COMMON RESPONSIVE ISSUES

✗ Horizontal scroll on mobile
  → Check for fixed widths wider than viewport
  → Check for negative margins
  → Look for images without max-width: 100%

✗ Text too small on mobile
  → Check font-size (min 16px for body)
  → Avoid tiny text in media queries

✗ Buttons too small to tap
  → Minimum 44x44px for touch targets
  → Check padding on mobile

✗ Layout breaks at certain width
  → Test at all widths, not just breakpoints
  → Use fluid values (%, vw, clamp)

5. TESTING STRATEGY

✓ Test at: 320px, 375px, 768px, 1024px, 1440px
✓ Test in portrait and landscape
✓ Test with DevTools and real devices
✓ Zoom in/out to test scaling
✓ Check with actual touch interactions

PERFORMANCE DEBUGGING:

1. PERFORMANCE TAB
   • Record page load or interaction
   • Look for:
     - Long Layout tasks (yellow)
     - Long Paint tasks (green)
     - Frames dropped (gaps in frame line)

2. RENDERING TAB
   • Paint flashing - Shows areas being repainted
   • Layout Shift Regions - Shows CLS problems
   • Layer borders - Shows composited layers
   • FPS meter - Shows frame rate

3. COVERAGE TAB
   • Shows unused CSS
   • Red = unused, Blue = used
   • Remove unused CSS for performance

4. COMMON PERFORMANCE ISSUES

✗ Animating layout properties
  → Use transform/opacity instead

✗ Complex selectors
  → Simplify selectors, use classes

✗ Too many repaints
  → Check Paint flashing
  → Reduce box-shadows, gradients

✗ Layout thrashing
  → Reading layout properties in loop
  → Batch DOM reads, then writes

5. PERFORMANCE CHECKLIST

✓ Only animate transform/opacity
✓ Use will-change sparingly
✓ Minimize repaints (check Paint flashing)
✓ Remove unused CSS
✓ Optimize selectors
✓ Lazy load non-critical CSS
✓ Minify and compress CSS files