🏆 Module 18 · Professional Dev🟡 IntermediateLESSON 60
Debugging HTML
Course progress93%
🎯 What you'll learn: The DevTools Elements panel, reading computed styles, using the box model inspector, and recognizing common visual bugs.
Section 1
The Elements Panel
Opening DevTools (F12 or right-click → Inspect) shows the live, rendered DOM — not your original source file. This distinction matters: JavaScript may have modified the page after load, so what you see in Elements reflects the current state, which can differ from "View Page Source."
💡
Edits in DevTools aren't permanent
You can freely edit HTML/CSS live in the Elements panel to experiment — refreshing the page discards all changes, since you're only editing the browser's in-memory copy.
Section 2
Computed Styles & the Box Model
The Computed tab shows the final resolved value of every CSS property after the cascade has been applied — useful when you're not sure which of several conflicting rules actually won. The box model diagram visually breaks down an element's content, padding, border, and margin as nested boxes with exact pixel values.
| Panel | Shows |
|---|---|
| Elements → DOM tree | Live, current HTML structure |
| Styles tab | All matching CSS rules, with strikethroughs for overridden ones |
| Computed tab | The single final value actually applied |
| Box model diagram | Content/padding/border/margin sizes visually |
Section 3
Common Bugs & How to Spot Them
| Symptom | Likely cause |
|---|---|
| Element wider than expected | Unexpected padding/border added to width — check box model |
| Style not applying at all | A more specific rule elsewhere is winning — check the Styles tab for strikethroughs |
| Element in the wrong place | Check the DOM tree — it may be nested inside the wrong parent |
| Text overflowing container | Check computed width/overflow values |
⚠️
Struck-through rules in Styles tell you why
A line-through on a CSS declaration in the Styles tab means it lost the cascade battle to something else — that's usually your first clue when a style "isn't working."
🧩 Knowledge Check — Lesson 60
5 questions to test your understanding.
1. Does the Elements panel show your original source file or the live DOM?
2. Do edits made in the Elements panel persist after a page refresh?
3. What does the Computed tab show?
4. What does a strikethrough on a CSS rule in the Styles tab mean?
5. An element appears wider than expected — what should you check first?
Coding Challenge — Lesson 60
Apply what you learned · Intermediate Level
Challenge: Diagnose a Layout Bug
Given a card that's rendering wider than its declared width: 200px, describe the DevTools steps you'd take (open Elements, select the card, check box model, check Computed tab) to find out whether padding or border is the cause.
Given a card that's rendering wider than its declared width: 200px, describe the DevTools steps you'd take (open Elements, select the card, check box model, check Computed tab) to find out whether padding or border is the cause.
💡 Show hints if you're stuck
- Remember: without box-sizing: border-box, padding/border add to the declared width.
Finished this lesson?
Mark it complete to track your progress.
Lesson 60 of 62Module 18 — Professional Development