HTML Validation & Debugging

Use the browser's responsive design mode to inspect layouts at different viewport widths. Also test on real devices when possible because emulation cannot reproduce every hardware, browser and interaction difference.

9. Debugging Workflow

1. Reproduce the problem consistently.
2. Inspect the affected element in the DOM.
3. Check the Console for errors.
4. Inspect the Network panel if resources are missing or failing.
5. Validate the HTML when markup is suspect.
6. Fix the root cause and test again.

Common Mistakes

• Assuming a page is correct because it looks fine in one browser.
• Ignoring console errors and failed network requests.
• Using duplicate IDs in the same document.
• Confusing HTML validation with accessibility testing.
• Fixing symptoms without checking the root cause.

Practice Exercises

1. Validate a sample HTML page and fix its reported errors.
2. Use the Elements panel to inspect a form.
3. Use the Network panel to find a missing image.
4. Intentionally introduce a JavaScript error and identify it in the Console.
5. Test a page at mobile and desktop viewport widths.

Revision Quiz

1. What does HTML validation check?
2. Which Developer Tools panel shows JavaScript errors?
3. Which panel helps investigate failed image requests?
4. What does a typical 404 response indicate?
5. Does valid HTML guarantee accessibility?
6. Why should you reproduce a bug before fixing it?

Answer Key and Explanations

1. HTML conformance — It checks markup against HTML requirements.
2. Console — It displays JavaScript errors, warnings and logged messages.
3. Network — It shows resource requests and their responses.
4. The requested resource was not found — Check the URL and server configuration.
5. No. Accessibility requires additional design and testing.
6. To establish reliable reproduction steps — This helps identify and verify the root cause.