JavaScript Console Online
Use the HCODX JavaScript console to inspect logs, read errors and debug event handlers while your HTML project runs in preview.
The console shows execution, not just the final picture
The browser preview renders a page; the console reports what your script logs and which operations fail.
When a button appears but does nothing, resist rewriting the whole function. Add one log at the start of the handler. If the log never appears, the event connection is wrong. If it appears, move the log deeper until you find the first unexpected value.
Read the first error before the later ones. A failed selector can make several subsequent lines fail; fixing the earliest cause is usually faster than treating each message as a separate bug.
Syntax errors
The script could not be parsed, so code below the error may never run.
Runtime errors
The script started, then a particular expression failed while executing.
Your logs
A temporary log can show which branch ran and what data it received.
A selector typo that stops a click handler
The markup contains #save, but the script asks for #send. The console turns a silent-looking button into a specific diagnosis.
Run the broken snippet and inspect the first error. querySelector returns null for a missing element; calling addEventListener on null then throws. Correct the id in the JavaScript and run the preview again.
If you still see no log after the correction, check when the script runs. A deferred external script or a handler added after DOMContentLoaded avoids querying before the element exists.
<button id="save" type="button">Save draft</button>
<script>
// Broken: there is no element with id="send".
const button = document.querySelector("#send");
button.addEventListener("click", () => {
console.log("save clicked");
});
// Fix by querying "#save" instead.
</script>Use a four-step console loop
Make one small hypothesis and collect one piece of evidence at a time.
If the console points to an external API, check the network request and CORS policy as well; a JavaScript log cannot make a denied cross-origin response readable.
The same selector can fail because of load order
A correctly spelled selector still returns null if the script runs before the element exists in the document.
Imagine a script tag in the head that immediately asks for #save. At that point the browser has not parsed the later button, so the query is null even though the button appears after the page finishes loading. The error resembles the typo case, but the fix is different: defer the external script, place an inline script after the element, or wait for DOMContentLoaded.
Check the source location from the console before choosing a fix. If the id matches exactly, inspect when the script executes. After adding defer, refresh and verify that the handler logs only after a click—not during page load.
<!-- index.html -->
<head>
<script src="app.js" defer></script>
</head>
<body>
<button id="save" type="button">Save draft</button>
</body>
// app.js, parsed after the document when defer is used
const save = document.querySelector("#save");
save.addEventListener("click", () => console.log("save clicked"));A log, a warning and an exception are not the same
The console is useful only if you know whether a line came from your code, the browser or a failed request.
Your own log
console.log records that a code path ran and can show a value at that point. It does not prove the next line succeeded.
Thrown exception
An error such as “Cannot read properties of null” usually includes a file and line. Start at the first relevant exception and inspect the expression before it.
Failed network request
CORS, 404 or blocked-resource messages concern a URL or browser policy. Check the Network panel and origin; rewriting a DOM selector will not repair a rejected response.
Warning or deprecation
A warning may not stop execution, but it can point to behavior that differs across browsers or will need maintenance. Verify its source before acting.
Reading the output correctly
Debug the first error, not the last symptom
Run a small example, open the console and trace the event one step at a time.
Instant HTML Runner & Viewer with Live Preview
Need to run a short HTML, CSS and JavaScript snippet? The HTML Runner Online has a focused editing surface with live output.
Open HTML Runner Online