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.
When a page looks wrong, open the browser’s developer tools. I reach for them constantly, even on pages I wrote myself.
Select the Elements or Inspector panel. It shows the DOM: the document tree the browser built after parsing your HTML. The DOM is not always identical to your source file. If you nest elements incorrectly, the browser may move or close tags while repairing the tree.
Use the element picker to select something on the page. Expand its parents and children to see where it sits. Compare that tree to what you thought you wrote.
If an image does not appear or a link returns a missing page, open the Network panel and reload. Find the failed request and check:
- the requested URL
- the response status code
- 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 browser resolved the path from a different folder than you expected.
The Console reports parsing problems, failed loads, and some accessibility warnings. Read the message, identify the exact element or URL, and fix your HTML source.
Edits you make inside DevTools disappear on refresh. They are great for experiments, but the real fix belongs in your HTML file. Save there, reload, and confirm the problem is gone.
When something breaks on your personal page, resist random edits. Inspect the DOM, check Network for 404s, read Console once, then change one thing and reload.
Lesson completed