JavaScript Debugging

Written by Swapnil RajaPublished 24 Aug 2026

Debugging is the process of finding out why code does not do what you expected.

Most bugs come from an assumption that turns out to be wrong.

Debugging is mostly about checking those assumptions one at a time.

Example

javascript

const price = "10";
const quantity = 2;

console.log(typeof price, typeof quantity);
console.log(price * quantity);

Printing the types immediately shows the problem.

Here it happens to work, but addition would not.

The Console Methods

PreviousJavaScript Error Handling Patterns NextJavaScript Map

Example

javascript

function process(values) {
  const stages = [];
  const doubled = values.map(function (n) { return n * 2; });
  stages.push("after doubling: " + doubled.join(","));
  const kept = doubled.filter(function (n) { return n > 4; });
  stages.push("after filtering: " + kept.join(","));
  return stages.join(" | ");
}

console.log(process([1, 2, 3]));

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Debugging</title>
</head>
<body>

  <h1>Debugging</h1>

  <p id="out"></p>

  <script>
    const price = "10";
    const quantity = 2;

    console.log("price", price, typeof price);
    console.log("quantity", quantity, typeof quantity);

    const total = Number(price) * quantity;
    console.log("total", total);

    document.getElementById("out").innerHTML =
      "Open the console to see the values.<br>Total: " + total;
  </script>

</body>
</html>

JavaScript Debugging

Example

The Console Methods

Syntax

Label Everything

Example

Check the Type, Not Just the Value

Example

Narrow It Down

Example

console.table

Example

The debugger Statement

Example

Complete Example

Try It Yourself

Important Points

Conclusion