Module 16: Validation, Debugging, and Practical Projects
Inspect and Debug HTML with Browser DevTools
Compare the source file with the live DOM and locate missing resources or unexpected elements.
The Elements panel in browser developer tools shows the DOM after the browser has parsed the document and applied scripts. It may not match the source character for character because browsers can insert implied elements or repair invalid markup.
Use the Elements panel to inspect parent-child relationships, check attributes, and see which CSS rules apply. Use the Network panel to investigate missing images, stylesheets, scripts, and embedded resources. A 404 means the requested URL did not resolve to a resource on the server; check the path and filename before changing the markup.
When something is missing, inspect the element’s URL, then open that URL directly. When a label does not focus a field, compare the label’s for with the control’s id. When a fragment link does not move, check whether an element has the matching ID and whether it is unique.
Do not edit the live DOM in developer tools and assume the source file has changed. DOM edits made there are temporary. Apply the real fix in your editor, save, and refresh.