Learn Debugging Basics

Swipe to show menu

Debugging is a crucial skill for any JavaScript developer. As you write and run code, you will encounter a variety of errors. Understanding how to read error messages and knowing the most common mistakes will help you fix issues quickly and keep your projects moving forward.

The most frequent JavaScript errors include:

Syntax errors: these happen when the code structure is incorrect, such as missing parentheses or braces;
Reference errors: these occur when you try to use a variable that has not been declared or is out of scope;
Type errors: these happen when a value is used in an unexpected way, like calling a function on something that is not a function.

When an error occurs, the browser's console will display an error message. This message usually includes the type of error, a brief description, and the line number where the problem was detected. Always read these messages carefully—they are your first clue to solving any issue.


              1234567891011121314151617181920212223
            
// Example: Debugging with console.log and breakpoints

function calculateTotal(items) {
  let total = 0;
  for (let i = 0; i < items.length; i++) {
    // Add a console.log to inspect each item
    console.log("Item at index", i, ":", JSON.stringify(items[i]));
    total += items[i].price; // Potential error if items[i] is missing 'price'
  }
  return total;
}

const cart = [
  { name: "Book", price: 12 },
  { name: "Pen", price: 2 },
  { name: "Notebook" } // Missing price property
];

const total = calculateTotal(cart);
console.log("Total:", total);

// To debug further, set a breakpoint on the line inside the loop in your browser's developer tools.
// Step through the code to watch how 'total' and 'items[i]' change with each iteration.

To debug effectively, follow a systematic approach:

Reproduce the error consistently so you can observe it as you test solutions;
Read the error message and note the file name and line number;
Use console.log to print out values and track the flow of your code;
Set breakpoints in your browser's developer tools to pause execution and inspect variables;
Change only one thing at a time and test after each change to isolate the problem;
Watch out for common pitfalls like typos, off-by-one errors in loops, or missing properties in objects.

By practicing these techniques, you will become more confident and efficient at finding and fixing bugs in your JavaScript code.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 18

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Section 1. Chapter 18