HTML Debugging Guide

Steps

1. Reproduce the issue with the smallest snippet possible.
2. Check the console for runtime errors.
3. Verify selectors and IDs match the HTML.
4. Disable external scripts temporarily.
5. Compare iframe behavior with a downloaded standalone file.

Example

Sample — Run

HTML

<button id="demo">Hello</button>

CSS

#demo { padding: 12px; }

JavaScript

// Broken: document.getElementById("missing").textContent = "OK";
const button = document.getElementById("demo");
if (button) button.textContent = "OK";

The commented line fails because no element has the ID missing. Uncomment it and run to reproduce the error. Restore the matching ID demo to fix it. A validator checks syntax; a null DOM lookup is a runtime error. For missing CSS, check the selector and inspect whether the rule applies to the element.

Tip

document.getElementById returns null when the element is missing or the script runs before the node exists in the preview document.

Related tools