Reading Errors

Errors aren't failures—they're the browser telling you exactly what went wrong. Learn to read them like helpful messages, not scary warnings.

Mental Model

Think of errors as the browser saying "I tried, but I need more information." Red text looks alarming, but it's actually the most helpful feedback you'll get—it tells you exactly where to look and what went wrong.

Error Anatomy

Every error in the Console follows the same structure. Once you learn to read it, debugging becomes much faster.

Console
Uncaught TypeError: Cannot read properties of null (reading 'classList')
at script.js:12:15

Let's break this down piece by piece:

Part What It Means
Uncaught The error wasn't handled by the code—it stopped execution
TypeError The type of error. "I expected one thing but got another."
Cannot read properties of null JavaScript tried to access something on null (nothing)
(reading 'classList') Specifically, it tried to read .classList
at script.js:12:15 File name, line 12, character 15—click this to jump there
Click the Location

The script.js:12:15 part is a link. Click it and Firefox will take you directly to that line in the Debugger panel. This is the fastest way to find the problem.

The #1 Error You'll See

If you write JavaScript for the web, you will see this error. Probably today. Definitely this week: 

Uncaught TypeError: Cannot read properties of null (reading 'classList')

Or variations like:

Translation: querySelector didn't find the element you asked for. It returned null (nothing), and then your code tried to do something with that nothing.

Three Common Causes

1. Typo in the Selector

// Your HTML
<button class="button">Click me</button>

// Your JavaScript
const btn = document.querySelector('.buton');  // typo!
btn.classList.add('active');

// Result
Cannot read properties of null (reading 'classList')

The fix: Check your spelling. .buton ≠ .button

2. Wrong Selector Type

// Your HTML
<div class="button">Click me</div>

// Your JavaScript
const btn = document.querySelector('button');  // looking for <button> tag

// Result: null — there's no <button> element, only a div with class "button"

The fix: Use .button (with the dot) for classes, #button for IDs, button (no prefix) for tags.

3. Script Runs Before the DOM Exists

// In your <head> — runs immediately
<script src="script.js"></script>

// script.js
const btn = document.querySelector('.button');
// The <body> hasn't loaded yet — element doesn't exist!

Cannot read properties of null (reading 'classList')

The fix: Add defer to your script tag, or move it to the end of <body>:

// Option 1: defer attribute
<script src="script.js" defer></script>

// Option 2: Move to end of body
  <script src="script.js"></script>
</body>
Week 1 Context

Building a theme toggle and it's not working? This is almost always the issue. Check that your selector matches your HTML exactly, and that your script has the defer attribute.

Quick Diagnosis Workflow

When you see "Cannot read properties of null," follow these steps:

Debug It: The Null Check
  1. Click the error location to see which line failed
  2. Find the selector on that line (the string in quotes)
  3. Test it in Console: 
    document.querySelector('.your-selector')
  4. If it returns null → your selector is wrong or the element doesn't exist yet
  5. If it returns the element → the problem is on a later line

Other Common Errors

SyntaxError

Uncaught SyntaxError: Unexpected token '}'

Meaning: You have a typo in your code structure—missing bracket, extra comma, unclosed string.

Fix: Check the line number. Look for mismatched { }, ( ), or missing quotes.

ReferenceError

Uncaught ReferenceError: buttn is not defined

Meaning: You're using a variable that doesn't exist (usually a typo).

Fix: Check your spelling. buttn should probably be button.

Failed to Load Resource

GET http://localhost/script.js 404 (Not Found)

Meaning: The browser can't find your file.

Fix: Check the file path in your <script> tag. Is the file where you think it is?

Reading the Stack Trace

Sometimes errors show multiple lines—this is called a "stack trace." It shows the chain of function calls that led to the error:

Console
Uncaught TypeError: Cannot read properties of null
at toggleTheme (script.js:15:10)
at HTMLButtonElement.<anonymous> (script.js:8:3)

Read from top to bottom: the error happened in toggleTheme on line 15, which was called from an event listener on line 8. Start debugging at the top.

Errors Are Progress

An error means your code ran far enough to fail somewhere specific. That's good! It's much better than nothing happening at all. Use the error message to find and fix the problem.

Next: Visual Tools

Now that you can read errors, let's look at the other half of DevTools—the Elements panel and visual inspection tools.

Continue to Visual Tools →