Ananta Code Academy
ananta::html-css
MODULE 04 · LAYOUT, RESPONSIVENESS & CAPSTONE

Debugging & Browser DevTools

Every developer's most-used tool isn't an editor — it's the browser's built-in inspector. Learn to read it, and "why isn't this working" stops being a guessing game.

Day 29 of 30 Beginner ~18 min
01 · OVERVIEW

Stop Guessing, Start Inspecting

Every layout bug you've hit in this course — a box that's wider than expected, a rule that isn't applying, text that won't center — has a definitive answer sitting inside your browser's DevTools. Learning to read it is faster than guessing and re-editing your stylesheet.

02 · THE ELEMENTS PANEL

Reading HTML and CSS Side by Side

Selecting an element on the left shows every CSS rule affecting it on the right — in the order the cascade applies them, with overridden rules struck through.

DEVTOOLS ELEMENTS PANEL, SIMPLIFIED
Elements Console Network
<div class="card">
<h2>Pricing</h2>
<p class="price">
</p>
</div>
.price
color: gray;
font-size: 14px;
.card p
font-size: 18px;
READING THE STRIKETHROUGH

A struck-through rule means it lost to a more specific one — exactly the specificity rules from Day 16. DevTools shows you the winner without any guessing.

03 · THE BOX MODEL VIEWER

Seeing Padding, Border & Margin Numerically

The Styles panel includes a small box-model diagram for whatever element you've selected — the exact same content/padding/border/margin layers from Day 18, but with real pixel values from the live page.

console-tips.txt 
// Quick keyboard shortcuts worth memorizing
Ctrl/Cmd + Shift + C   // element picker — click anything on the page
Ctrl/Cmd + Shift + M   // toggle device/responsive mode
Esc                    // open/close the console drawer inside DevTools
04 · LIVE-EDITING STYLES

Testing Fixes Without Touching Your File

You can toggle, edit, or add CSS declarations directly in the Styles panel and see the page update instantly — a fast way to test a fix before committing it to your actual stylesheet.

  • Right-click the element you're troubleshooting and choose Inspect.
  • Find the rule in the Styles panel and click its property or value to edit it.
  • Toggle a declaration off using its checkbox to see the effect of removing it.
  • Copy the working value back into your real .css file once you've confirmed the fix.
    • 05 · RESPONSIVE MODE

    Testing Media Queries Without a Second Device

    Device/responsive mode lets you resize the viewport to test the media queries from Day 26 directly in your desktop browser, without needing an actual phone or tablet.

    WITHOUT RESPONSIVE MODE Guessing whether a breakpoint works, or resizing your whole browser window awkwardly.
    WITH RESPONSIVE MODE Pick an exact device width, drag to any size, and watch your media queries kick in live.
    06 · COMMON BUGS & WHERE TO LOOK

    A Debugging Checklist

    SYMPTOM → LIKELY CAUSE
    SIZING Box is wider than expected — check box-sizing and padding/border in the box model viewer.
    STYLE A rule isn't applying — look for a struck-through rule with higher specificity above it.
    LAYOUT Element won't position — confirm the parent has position: relative set.
    07 · BREAKDOWN

    Breaking Down What You Just Learned

    1

    Opening DevToolsF12, Ctrl+Shift+I, or right-click → Inspect on any element.

    2

    Elements panelShows live HTML alongside every CSS rule affecting the selected element.

    3

    Struck-through rulesShow which declarations lost the specificity battle, and why.

    4

    Live editingTest fixes in the Styles panel before copying them into your real file.

    5

    Responsive modeTest media query breakpoints at exact widths without a second device.

    08 · PRACTICE

    Try It Yourself

    EXERCISE

    Open any page you've built in this course, right-click an element, and inspect it. Find one CSS rule with a strikethrough and explain in your own words why it lost to another rule.

    09 · TODAY'S PRACTICE

    Debug a Deliberately Broken Page

    HANDS-ON EXERCISE

    Practicing the full DevTools debugging workflow

    Create day29.html and deliberately introduce three CSS bugs to find and fix using DevTools.

    1. Build a small page with a header, a card, and a button.
    2. Introduce a specificity conflict where the wrong rule wins.
    3. Introduce a box-sizing issue where a box renders wider than intended.
    4. Introduce a positioning bug where an absolutely positioned element anchors to the wrong ancestor.
    5. Use DevTools to find and live-edit a fix for each bug, then copy the fixes into your stylesheet.
    6. Open responsive mode and confirm the page still looks correct at a mobile width.
    10 · RECAP

    Recap

    ELEMENTS PANEL

    Shows live HTML and every CSS rule affecting the selected element.

    BOX MODEL VIEWER

    Displays real pixel values for content, padding, border, and margin.

    LIVE EDITING

    Test CSS changes instantly before committing them to your file.

    RESPONSIVE MODE

    Test media query breakpoints at exact widths in the browser itself.

    11 · SUMMARY

    Key Takeaways

    • Browser DevTools open with F12, Ctrl+Shift+I, or right-click → Inspect.
    • The Elements panel pairs live HTML with the exact CSS rules affecting it, cascade order included.
    • Struck-through rules in the Styles panel show which declarations lost a specificity conflict.
    • Changes made in DevTools are temporary — copy confirmed fixes back into your actual stylesheet.
    • Responsive mode lets you test any breakpoint's media queries without a second physical device.
    Course Overview