How to Debug JavaScript Code - A Practical Guide

Why Debugging Matters

Every programmer spends time debugging. The difference between beginners and experienced developers isn't that experts write bug-free code—it's that they find and fix bugs faster.

The Console Is Your Friend

The console object has more methods than just log:

1// Basic logging
2console.log("Hello");
3 
4// Warnings and errors (styled differently)
5console.warn("This might be a problem");
6console.error("Something went wrong");
7 
8// Log objects in a table
9const users = [
10  { name: "Alice", age: 25 },
11  { name: "Bob", age: 30 }
12];
13console.table(users);
14 
15// Group related logs
16console.group("User Details");
17console.log("Name: Alice");
18console.log("Age: 25");
19console.groupEnd();
20 
21// Measure execution time
22console.time("loop");
23for (let i = 0; i < 1000000; i++) {}
24console.timeEnd("loop"); // loop: 2.5ms

Reading Error Messages

Error messages tell you exactly what's wrong. Learn to read them:

1TypeError: Cannot read property 'name' of undefined
2    at getUser (app.js:15:23)
3    at main (app.js:8:5)

This tells you:

• Error type: TypeError - you tried to access a property on something that doesn't exist
• What happened: Tried to read name from undefined
• Where: Line 15, column 23 in app.js
• Call stack: main called getUser which caused the error

Common JavaScript Errors

ReferenceError

Variable doesn't exist:

1console.log(userName); // ReferenceError: userName is not defined

TypeError

Wrong type or undefined:

1const user = null;
2console.log(user.name); // TypeError: Cannot read property 'name' of null

SyntaxError

Code structure is wrong:

1if (true { // SyntaxError: missing )
2  console.log("hi");
3}

Using Browser DevTools

The Sources Panel

1. Open DevTools (F12 or Cmd+Option+I)
2. Go to Sources tab
3. Find your JavaScript file
4. Click line numbers to set breakpoints

Breakpoints

Breakpoints pause code execution so you can inspect variables:

1function calculateTotal(items) {
2  let total = 0;
3  for (const item of items) {
4    // Set a breakpoint here to inspect each item
5    total += item.price;
6  }
7  return total;
8}

When paused, you can:

• Hover over variables to see their values
• Use the Console to test expressions
• Step through code line by line

The debugger Statement

Add debugger to your code to create a breakpoint programmatically:

1function processData(data) {
2  debugger; // Execution pauses here when DevTools is open
3  return data.map(item => item.value);
4}

Debugging Strategies

1. Reproduce the Bug

Before fixing, make sure you can reliably trigger the bug. Random bugs are hard to fix.

2. Isolate the Problem

Narrow down where the bug occurs:

• Comment out code sections
• Add console.log statements
• Use binary search (check the middle, then narrow down)

3. Check Your Assumptions

Most bugs come from wrong assumptions:

1function greet(user) {
2  // Assumption: user always has a name
3  return `Hello, ${user.name}!`;
4}
5 
6// Reality: user might be undefined
7greet(); // TypeError!

4. Rubber Duck Debugging

Explain your code out loud, line by line. Often you'll spot the problem while explaining.

Defensive Coding

Prevent bugs before they happen:

1// Check for undefined/null
2function greet(user) {
3  if (!user || !user.name) {
4    return "Hello, stranger!";
5  }
6  return `Hello, ${user.name}!`;
7}
8 
9// Use default values
10function greet(user = { name: "stranger" }) {
11  return `Hello, ${user.name}!`;
12}
13 
14// Optional chaining (modern JavaScript)
15function greet(user) {
16  return `Hello, ${user?.name ?? "stranger"}!`;
17}

Practice Debugging

The best way to get better at debugging is to practice. When you encounter a bug:

1. Don't panic
2. Read the error message carefully
3. Form a hypothesis about what's wrong
4. Test your hypothesis
5. Fix and verify

Our interactive exercises include intentionally buggy code to help you practice spotting and fixing common errors.