Section 35: Validation Tools, DevTools and Debugging

Learning Objectives

• Understand HTML validation.
• Use browser Developer Tools to inspect pages.
• Identify common markup errors.
• Understand the difference between validation errors and application bugs.

1. Why Validate HTML?

HTML validation checks markup against HTML syntax and conformance requirements. It can help identify invalid attributes, incorrect nesting and other structural problems.

Valid markup is a useful goal, but it does not guarantee that a page is accessible, secure, attractive or free from application bugs.

2. Use the Nu HTML Checker

The Nu HTML Checker is a tool for checking HTML conformance. You can submit a document or check a public URL using the validator at https://validator.w3.org/nu/.

3. Common HTML Errors

<!-- Incorrect: a paragraph cannot contain another paragraph -->
<p>First paragraph
  <p>Second paragraph</p>
</p>

<!-- Correct -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Incorrect: duplicate IDs -->
<input id="email" name="email">
<input id="email" name="backup_email">

<!-- Correct -->
<input id="email" name="email">
<input id="backup-email" name="backup_email">

4. Browser Developer Tools

Most desktop browsers provide Developer Tools. Common panels include:

• Elements or Inspector: inspect the DOM and CSS.
• Console: inspect JavaScript errors and warnings.
• Network: examine requests, status codes and loading times.
• Sources or Debugger: inspect and debug JavaScript.
• Accessibility tools: inspect accessible names and other accessibility information, where supported.

5. Inspect the DOM

Open Developer Tools and select the Elements panel. Inspect a heading, form field or image to see the current DOM and the styles applied to it.

Remember that the live DOM may differ from the original page source because JavaScript and browser parsing can modify the document.

6. Debug Missing Images

<img src="/images/course-banner.webp"
  alt="HTML course banner"
  width="800" height="450">

If an image fails to load, check the URL, filename capitalization, server response, file permissions, network request and content type. A 404 response often indicates that the requested resource could not be found.

7. Debug JavaScript Errors

<h1 id="heading">Original heading</h1>

<script>
  const heading = document.querySelector("#heading");

  if (heading) {
    heading.textContent = "Updated heading";
  } else {
    console.error("Heading element was not found.");
  }
</script>

Check the Console for error messages and use breakpoints when necessary. Avoid silently ignoring unexpected failures in production code.

8. Test Responsive Layouts

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.