CSS Debugging
📌 Covered in this chapter:
DevTools · Inspect · Computed Styles · Box Model · Flexbox Inspector · Grid Inspector · Specificity · Overflow · Z-index · Responsive Mode · Validation · Cross-Browser
Welcome to Chapter 48: CSS Debugging — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
📚 What You Will Learn
- Chrome/Firefox DevTools CSS debugging workflow
- Box model, computed styles, and specificity inspection
- Flexbox and Grid visual inspectors
- Z-index stacking context debugging
- Responsive device mode and cross-browser testing
💡 Why This Matters
Every professional CSS developer spends significant time in DevTools. Knowing how to quickly find why a style is not applying, why flexbox is not centering, or why z-index is not working — these skills save hours of frustration.
1DevTools Essentials — Inspect & Computed
Open DevTools: F12 or Right-click → Inspect. Key panels:
- Elements → Styles: All applied rules, crossed-out overridden rules
- Elements → Computed: Final computed value after cascade
- Elements → Layout (Box Model): Visual margin/padding/border/content diagram
- Filter in Styles panel: Type property name to find specific rule
- :hov button: Force :hover, :focus, :active states without interacting
CSS — Debugging Specificity▶ Try in Editor
/* Styles panel shows WHY rule crossed out */
/* Higher specificity rule wins */
/* Look for: inline styles > #id > .class > element */
/* DevTools shows selector specificity in tooltip */2Flexbox & Grid Inspectors
Chrome DevTools lo flex/grid container select cheste overlay badges kanipistayi:
- Flexbox: "flex" badge click → shows main/cross axis, item sizes, gap visualization
- Grid: "grid" badge click → shows grid lines, track sizes, named areas
- Flexbox editor: Toggle justify-content, align-items visually without writing code
- Grid editor: Add/remove tracks, change fr units interactively
CSS — Common Flex Debug▶ Try in Editor
.container {
display: flex;
align-items: center; /* not working? */
/* Check: does container have height? */
/* align-items needs cross-axis space */
min-height: 200px; /* add explicit height */
}3Z-index, Overflow & Responsive Debugging
CSS — Z-index Debug Checklist▶ Try in Editor
/* z-index not working? Check:
1. Is element position: relative/absolute/fixed/sticky?
2. Is it in a lower stacking context?
3. Parent with opacity < 1 creates new context
4. Parent with transform creates new context
5. Parent with z-index creates new context
*/
.modal { z-index: 1000; position: fixed; }
.dropdown { z-index: 100; position: absolute; }
/* Modal always above dropdown ✅ */Overflow debug: Red outline trick — * { outline: 1px solid red; } temporarily to find overflowing elements.
Responsive mode: DevTools → Toggle device toolbar (Ctrl+Shift+M) — test breakpoints without resizing browser.
4CSS Validation & Cross-Browser Testing
- W3C CSS Validator: jigsaw.w3.org/css-validator — syntax errors catch
- caniuse.com: Feature support across browsers
- BrowserStack: Real Safari, Firefox, Edge on different OS
- Stylelint: Automated CSS linting in CI/CD pipeline
- Common issues: Flexbox gap in old Safari, container queries in Firefox ESR
⚠️ Common Mistakes
- Changing CSS blindly without DevTools — guessing specificity
- Not checking Computed tab — wondering why flex: 1 not working
- Testing only in Chrome — Safari flexbox bugs miss avuthayi
- Ignoring crossed-out rules in Styles panel — cascade confusion
- Not using device mode for mobile breakpoint testing
✅ Quick Recap
- F12 → Elements → Styles for applied rules, Computed for final values
- Flexbox/Grid badges in DevTools for visual layout debugging
- z-index issues = stacking context problem — check parents
- Force :hover/:focus states with DevTools :hov button
- Responsive device mode (Ctrl+Shift+M) for breakpoint testing
- caniuse.com before using new CSS features in production