HTML Debugging & Developer Tools

HTML Debugging & Developer Tools

Debugging is the process of identifying, understanding, and fixing problems in a webpage or web application.

HTML debugging is not limited to finding missing tags. A webpage can have problems related to structure, accessibility, CSS, JavaScript, network requests, responsive layouts, performance, or browser behavior.

1. Common HTML Problems

HTML errors can range from simple syntax mistakes to structural problems that affect accessibility and browser behavior.

2. View Source vs Inspect

Browsers provide different ways to examine a webpage.

3. Opening Browser Developer Tools

Modern browsers such as Chrome, Edge, Firefox, and Safari provide built-in Developer Tools.

Common ways to open Developer Tools include:

• Right-click a webpage and select Inspect.
• Use the browser's Developer Tools menu.
• Use the appropriate keyboard shortcut for the operating system.

4. Elements Panel

The Elements panel is one of the most useful tools for HTML debugging.

It allows you to inspect the DOM and examine:

• HTML elements.
• Attributes.
• Classes and IDs.
• Element hierarchy.
• Computed styles.
• Box model dimensions.
• Accessibility information.

Example HTML

<article class="course-card">

    <h2>HTML Fundamentals</h2>

    <p>
        Learn the foundations of HTML.
    </p>

</article>

In Developer Tools, you can select the <article> element and inspect its complete DOM representation.

5. Inspecting an Element

The element picker allows you to select a visible webpage element and immediately inspect its corresponding DOM node.

This is particularly useful when you know what is wrong visually but do not know which element is responsible.

Example

Suppose a heading appears too small. Inspect the heading and check:

• Which HTML element is being used?
• Which CSS classes are applied?
• Which CSS rules are active?
• Which rules are overridden?
• What is the computed font size?

6. Editing HTML in Developer Tools

Developer Tools allows temporary modifications to the DOM.

For example, you can temporarily change:

<h1>HTML Course</h1>

to:

<h1>Advanced HTML Course</h1>

7. Inspecting CSS

Developer Tools can show which CSS rules apply to an element and which rules have been overridden.

<button class="primary-button">
    Start Learning
</button>

If the button does not look as expected, inspect it and check:

• Applied selectors.
• Overridden rules.
• Specificity.
• Inherited properties.
• Computed values.
• Media-query rules.

8. Debugging the CSS Box Model

Many layout problems are caused by misunderstanding the CSS box model.

Inspect the element and examine:

• Content
• Padding
• Border
• Margin
• Width and height

9. Console Panel

The Console is primarily used for JavaScript messages and runtime errors, but it is essential when debugging a webpage because HTML, CSS and JavaScript work together.

Common console messages include:

• JavaScript errors.
• Warnings.
• Failed resource messages.
• Security-related messages.
• Developer-generated debugging messages.

Example

console.log("Page loaded");

The message can be viewed in the browser's Console panel.

10. Understanding Console Errors

Consider this JavaScript:

document.querySelector("#submit-button").addEventListener(
    "click",
    function () {
        console.log("Submitted");
    }
);

If the expected element does not exist, the console may reveal the problem.

11. Network Panel

The Network panel helps identify resources requested by the webpage.

It can reveal problems involving:

• HTML documents.
• CSS files.
• JavaScript files.
• Images.
• Fonts.
• API requests.
• HTTP status codes.

12. Understanding HTTP Status Codes

13. Debugging Broken Images

Consider:

<img
    src="images/logo.png"
    alt="Website logo">

If the image does not appear:

1. Inspect the src attribute.
2. Verify the filename.
3. Check uppercase/lowercase differences.
4. Check the relative path.
5. Open the Network panel.
6. Look for the image request.
7. Check its HTTP status.

14. Debugging Relative Paths

Relative paths are interpreted from the location of the current document.

Example Structure

project/
│
├── index.html
│
├── pages/
│   └── courses.html
│
└── images/
    └── logo.png

From index.html:

<img src="images/logo.png" alt="Logo">

From pages/courses.html:

<img src="../images/logo.png" alt="Logo">

15. Responsive Design Mode

Developer Tools can emulate different screen sizes and device dimensions.

This is useful for testing:

• Mobile layouts.
• Tablet layouts.
• Desktop layouts.
• Responsive images.
• Navigation menus.
• Overflow problems.
• Media queries.

16. Debugging the Viewport

A responsive webpage commonly includes an appropriate viewport declaration.

<meta
    name="viewport"
    content="width=device-width, initial-scale=1">

If mobile layouts behave unexpectedly, inspect the document head and confirm that the viewport configuration is present and appropriate.

17. Accessibility Debugging

Developer Tools can help identify accessibility problems.

Check:

• Heading hierarchy.
• Accessible names.
• Form labels.
• Alternative text.
• Keyboard focus.
• ARIA attributes where necessary.
• Color contrast.
• Semantic HTML.

Example

<label for="email">
    Email Address
</label>

<input
    id="email"
    name="email"
    type="email">

Inspecting the accessibility information can help verify that the input has a meaningful accessible name.

18. Debugging DOM Structure

Browsers parse HTML into a Document Object Model (DOM).

<main>

    <section>

        <h2>Courses</h2>

        <p>Learn HTML.</p>

    </section>

</main>

In Developer Tools, this becomes a tree of nodes.

19. Invalid or Incorrect HTML

Browsers are designed to recover from many malformed HTML documents. This can sometimes hide the original problem.

For example:

<p>
    First paragraph

<p>
    Second paragraph

Browsers may automatically infer missing structure. Developers should still write valid, intentional HTML.

20. HTML Validation

HTML validation tools can identify standards-related problems in markup.

Validation can help detect:

• Invalid attributes.
• Incorrect markup.
• Structural issues.
• Duplicate or inappropriate attributes.
• Other conformance problems.

21. Search Within Developer Tools

Large webpages can contain hundreds or thousands of DOM nodes. Developer Tools provides search capabilities to locate:

• Element names.
• Classes.
• IDs.
• Text.
• CSS properties.
• Source files.

Searching is often much faster than manually expanding the entire DOM tree.

22. Sources Panel

The Sources panel in browser Developer Tools helps developers inspect loaded source files and debug JavaScript.

It can be useful when an HTML problem is actually caused by JavaScript that dynamically modifies the DOM.

23. JavaScript Breakpoints

Breakpoints pause JavaScript execution at a selected point so developers can inspect program state.

They are useful when JavaScript dynamically:

• Creates HTML.
• Removes elements.
• Changes attributes.
• Updates form values.
• Changes classes.
• Loads content dynamically.

This makes breakpoints useful for debugging HTML behavior caused by scripts.

24. DOM Breakpoints

Some browser Developer Tools allow breakpoints to be placed on DOM changes.

These can help identify which script is changing an element.

Example Scenario

A button initially has:

<button class="save">
    Save
</button>

but later becomes:

<button class="save disabled">
    Save
</button>

A DOM breakpoint can help identify what caused the class to change.

25. Application / Storage Tools

Developer Tools can also expose browser-managed storage and application information.

26. Performance Debugging

Developer Tools can help investigate webpage performance.

Look for:

• Large images.
• Too many network requests.
• Slow resources.
• Long-running JavaScript.
• Layout shifts.
• Large page resources.

27. Cache-Related Debugging

Sometimes a developer fixes a file but continues seeing an older version because of caching.

When investigating this type of problem, inspect:

• Network requests.
• Response headers.
• Cached resources.
• Resource URLs.
• Browser cache behavior.

28. Debugging Horizontal Overflow

If a webpage scrolls horizontally on a mobile screen, inspect the elements that extend beyond the viewport.

Common causes include:

• Fixed-width elements.
• Large images.
• Long unbroken text.
• Wide tables.
• Excessive margins or padding.
• Positioned elements extending outside the viewport.

29. Professional HTML Debugging Workflow

1. Reproduce the problem.
   Confirm exactly what is failing.
2. Describe the symptom.
   Example: image missing, link broken, layout overflowing.
3. Inspect the relevant element.
   Use Developer Tools.
4. Check the DOM.
   Confirm that the browser created the expected structure.
5. Check styles.
   Inspect applied and overridden CSS rules.
6. Check the Console.
   Look for JavaScript and browser errors.
7. Check Network.
   Confirm that required resources are loading successfully.
8. Identify the root cause.
   Do not merely hide the symptom.
9. Fix the source code.
   Make the permanent change in the project files.
10. Test again.
    Verify the fix in relevant browsers and screen sizes.

30. Debugging Case Study — Missing Image

Problem

A course logo does not appear on a webpage.

HTML

<img
    src="image/logo.png"
    alt="Course logo">

Debugging Process

1. Inspect the image element.
2. Check the src attribute.
3. Open the Network panel.
4. Locate the image request.
5. Check the HTTP status.
6. Verify the actual folder structure.
7. Correct the path.
8. Reload the page.

Corrected Example

<img
    src="images/logo.png"
    alt="Course logo">

31. Debugging Case Study — Wrong Form Behavior

Problem

Clicking a form button unexpectedly reloads the page.

HTML

<form action="/search" method="get">

    <input
        name="q"
        type="search">

    <button>
        Search
    </button>

</form>

A button inside a form defaults to a submit button unless a different type is specified.

If a Non-Submitting Button Is Intended

<button type="button">
    Open Filters
</button>

32. Debugging Case Study — Label Does Not Work

Problem

<label for="email-address">
    Email
</label>

<input
    id="email"
    type="email">

The label's for value does not match the input's id.

Correct Version

<label for="email">
    Email
</label>

<input
    id="email"
    type="email">

33. HTML Debugging Checklist

34. Interview Questions

35. Exam Questions

36. Practical Task — Debug a Broken Webpage

Create a webpage containing intentionally introduced errors. Use Developer Tools to identify and document each problem.

Suggested Errors

• Broken image path.
• Broken hyperlink.
• Incorrect form label association.
• Duplicate ID.
• Incorrect relative CSS path.
• JavaScript error.
• Mobile overflow.

Student Report