Console Error
Definition
Open the Console panel and errors appear in red, warnings in yellow, and anything the page logged itself in plain text. Each line gives the message, the file and the line number, and for a thrown error a stack trace you can expand. The wording is terse but standard, and a handful of messages account for most of what goes wrong on a static page: Uncaught ReferenceError, Uncaught TypeError, a load failure recorded as Failed to load resource, and a CORS refusal that names the header the other server did not send. Script errors are separate from network failures, which the Network panel describes in far more detail. Nothing here reaches your visitors — it is a log for whoever has the page open.
Why It Matters
A page that renders blank and a page that renders wrong have completely different first lines in the console, and reading that line saves an hour of guessing. Uncaught ReferenceError: x is not defined nearly always means a script ran in the wrong order, or never arrived. Uncaught TypeError: Cannot read properties of null means a selector matched nothing, so an id or class in the HTML does not match the one in the script. Failed to load resource: the server responded with a status of 404 is a path problem and names the exact URL that missed. A CORS message means something else again — the request succeeded, and the browser refused to let your script read the answer, which is the other server's setting to change rather than yours.
How It Works
The console collects whatever the JavaScript engine reports plus whatever the network layer refuses, in the order it happened, so the first red line is usually the cause and the ones below it are consequences. A thrown error stops that script's current task dead — every line after it in the same function is skipped, which is why one error can leave half a page unbuilt. Clicking the file and line number on the right of an entry opens the Sources panel at the offending line. Ticking Preserve log keeps entries through a navigation, which is the only way to read an error that appears just before a redirect. Errors caught inside a try block never show up at all, so silence is not proof that nothing failed.
Real-World Example
A single-page invoice tool uploaded to 99helpers is serving at invoice-tool.99helpers.site, and the totals column stays blank. The console shows two lines: Failed to load resource with a status of 404 on totals.js, then Uncaught ReferenceError: calcTotal is not defined. The second is fallout from the first — the script never arrived, so the function it defines does not exist. The file had simply been left out of the upload, and adding it clears both lines at once.
Common Mistakes
- ✕Reading the last error instead of the first — the entries below the top one are usually its consequences, not separate problems
- ✕Assuming every red line is your fault — a browser extension or a blocked analytics script writes errors that have nothing to do with your page
- ✕Letting the console clear on reload — turn on Preserve log before reproducing anything that ends in a navigation, or the message vanishes with it
Related Terms
Developer Tools
Developer tools are the inspection panels built into every desktop browser, opened with F12 or by right-clicking and choosing Inspect. They show the live page, its scripts, its network requests and its errors.
Fetch API
The Fetch API is the browser's built-in way for JavaScript to request something over the network without reloading the page. You call fetch with a URL and get back a promise that settles into a response.
DOM Element
A DOM element is a single node in the live tree the browser builds from your HTML — one heading, one button, one image — that JavaScript can read, change or remove while the page is open.
CORS
Cross-Origin Resource Sharing is a set of HTTP headers that lets a server say which other origins are allowed to read its responses from JavaScript. Without those headers the browser fetches the file but refuses to hand the contents to the calling script.
HTTP Status Code
An HTTP status code is the three-digit number a server returns at the head of every response, saying what happened to the request. It is the first thing on the first line — a 200 means here is the file, a 404 means there is nothing at that address.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →