Forms and debugging

Debug HTML with DevTools

Inspect the document tree the browser actually created and trace missing pages or images through the browser's Console and Network panels.

8 minute lesson

~~~

Open the browser’s developer tools and select the Elements or Inspector panel.

This panel shows the DOM: the document tree the browser created after parsing your HTML. It is not always identical to your source. If you nest elements incorrectly, the browser may move or close them while repairing the document.

Use the element picker to select something on the page. Expand its parents and children to understand where it sits in the tree.

If an image does not appear or a link returns a missing page, open the Network panel and reload. Find the request and check:

  • the requested URL
  • the response status
  • the response content type

A 404 usually means the path is wrong or the file does not exist. A surprising URL often reveals a relative-path mistake.

The Console reports some parsing, loading, and accessibility problems. Read the message, identify the exact element or URL, and fix the source rather than editing the temporary DOM in DevTools.

DevTools edits disappear on refresh. They are excellent for experiments, but the real fix belongs in your HTML file.

Lesson completed