Reading JavaScript Errors in the Browser Console

The red text in the console is not the browser being difficult. It's the most useful thing on the screen. It tells you what went wrong, in which file, on which line. Beginners scroll past it and start changing code at random. Don't. Read it first.

Open the console and reload

Errors appear when the code runs. Open DevTools (F12, or Cmd+Option+J on a Mac), click Console, then reload the page so you see every error from the start.

The parts of an error

Here's a real one, from the order page in the DOM lesson with a typo in a selector:

const status = document.querySelector(".stauts");
status.textContent = "Paid";

Read it in this order:

1. The type: TypeError. You used a value in a way its type doesn't allow.
2. The message: Cannot set properties of null (setting 'textContent'). You tried to set textContent on something that is null. When you read a property instead of setting it, the same problem says Cannot read properties of null.
3. The location: script.js:2 on the right. File and line. Click it and DevTools opens that line.

So: line 2 uses status, and status is null. Why would it be null? Because querySelector found nothing. Look at the selector. .stauts. There it is.

"Uncaught" just means nothing in your code caught the error, so the script stopped there. Everything after line 2 didn't run.

The four errors you'll see most

• ReferenceError: x is not defined: you used a name that doesn't exist. A typo (totla), a different case (Total vs total), or a variable declared inside a block and used outside it.
• TypeError: Cannot read (or set) properties of null / of undefined: the thing before the dot is missing. For null, usually a selector that matched nothing. For undefined, usually a missing array item or object key.
• TypeError: x is not a function: you added () to something that isn't a function. Often a typo in a method name (queryselector) or a variable that shadows a function.
• SyntaxError: Unexpected token or missing ) after argument list: the code can't even be read. A missing bracket, quote or comma. The line number points near the problem, sometimes on the next line.

Fix the cause, not the message

You can make Cannot read properties of null go away by wrapping everything in if (status). Sometimes that's right, for example when the element is only on some pages. Most of the time it hides a typo, and now the page silently doesn't update. Find out why it's null, then decide.

Same with try/catch. Catching an error you don't understand just moves the problem somewhere quieter.

When there is no error at all

The worst bugs don't make anything red. The code runs. The result is wrong. Then:

1. Add console.log before the line you suspect, with a label: console.log("total before VAT:", total, typeof total).
2. Check the type. A lot of "wrong but no error" bugs are strings where you expected numbers.
3. Move the log until you find the first line where the value is wrong.

Common mistakes

• Reading only the first word, "Uncaught", and panicking.
• Fixing the line in the error when the cause is earlier, like the selector on the line above.
• Ignoring yellow warnings forever. Not urgent, but they often explain the red error that comes later.
• Not reloading after a fix, then thinking the fix didn't work.

What happens if you skip this

You'll rely on asking someone, or pasting the error into a search, for every bug. That works for a while. It doesn't work on a deadline, and it doesn't work when the error is in your own code that nobody else has seen.

Next time you see a red error, before you change anything, say out loud: what type, what message, which line. How often does that alone tell you the fix?