What Is a Bug?

A bug is a problem in code that doesn’t do what users expect. A bug can give wrong results, behave strangely, or crash with an error.
The process called debugging focuses on finding and fixing the problem that causes incorrect program behavior.
The term “bug” dates back to 1947, when a moth got stuck in a computer relay.
The computer relay was causing a malfunction, and engineers debugged the machine after removing the moth.
The story describes a literal incident, while the word debug later became a common term in computing for finding and fixing software problems.

Types of Errors

What Are Syntax Errors?

Syntax errors are mistakes in the written rules of a programming language that prevent the code from running.

Typos
Incorrect code structure
Invalid code syntax
Example:
Python
print(“Hello”
The closing parenthesis is missing, so the code produces a syntax error.

What Are Runtime Errors?

Runtime errors are problems that occur while the code is running and can stop the program or produce an error.

Errors that happen during code execution
Example:
Python
number = 10 / 0
Dividing by zero causes a runtime error.

What Are Logic Errors?

Logic errors are mistakes in the program’s logic where the code runs but produces incorrect results.

Code runs without syntax errors
Results are wrong due to incorrect logic
Example:
Python

age = 15

if age > 18:

    print("Adult")

else:
     print("Minor")

The condition is incorrect because age 18 is not included, which can produce wrong results.

How Do You Read Error Messages?

Error messages provide information about a problem in a program. They identify the error type, the file where the error occurred, the line number, and a message that describes the issue.

Error type: Shows the category of the error, such as a syntax or runtime error.
File: Identifies the source file that contains the error.
Line number: Points to the exact line where the error occurred.
Error message: Explains the problem and often indicates what caused the error.

Example:

text

Traceback (most recent call last):

  File "app.py", line 8

    print(name)

NameError: name 'name' is not defined

13 · Debugging — JavaScript Playground

Debugging

Bugs happen. Use console.log() to inspect values and read errors to find the cause. Fix the typo and run again.

Output

Debugging Techniques

How Does the Classic Print Method Help?

The Classic Print method uses console.log() to Print values at different points in the code. This approach helps see whats happening by displaying the current state of variables and program execution.

Example:

JavaScript

let total = 25;

console.log(total);

The Console prints 25, showing the current value of total.

How Can You Check Assumptions?

Check Assumptions by asking whether a variable contains the value you think, whether a condition is evaluating as expected, and whether a function is accessing the right index or property. This process helps find exactly where things break or stop working.

Example:

JavaScript

let age = 16;

if (age > 18) {

  console.log("Adult");

}

How Do Browser Developer Tools Help?

Browser Developer Tools provide debugging features for web applications. Opening Dev Tools in Chrome/Edge uses Press F12, Ctrl+Shift+I, or Cmd+Option+I. In Firefox, Press F12 or Ctrl+Shift+I. In Safari, Enable Developer options in Preferences, then Press Cmd+Option+I on Mac.

Example:

JavaScript

console.log("Page loaded");

What Can You Do with the Console and Sources Tabs?

The Console tab shows errors and console.log output, which helps identify runtime issues. The Sources tab sets breakpoints and lets developers step through code to Isolate the Problem. You can also Comment out sections of code to find the exact location where execution changes.

Example:

JavaScript

function add(a, b) {

  return a + b;

}

add(5, 3);

Common Bugs and Fixes

Bug	Symptom	Root Cause	Fix	How to Catch It Fast
Typo in variable name	ReferenceError: x is not defined	Misspelled or wrong case name	Check spelling and case, JS is case-sensitive	Use a linter or IDE autocomplete, it flags undefined names instantly
Missing bracket or parenthesis	SyntaxError: Unexpected token	Unmatched (, ), {, or }	Count opening and closing pairs, format the code	Use an editor with bracket matching or auto-indent
= instead of ===	Condition always true or always false	Assignment used where comparison was needed	Use === for comparison, reserve = for assignment	Enable eqeqeq rule in ESLint, it blocks loose comparisons
Off-by-one in loops	First or last item skipped, or one extra iteration	Wrong loop boundary (< vs <=) or wrong start index	Trace the loop manually for the first and last values	Test with array length 0, 1, and 2 before trusting the logic
Reading property of undefined	Cannot read properties of undefined	Object or array doesn’t exist yet when accessed	Add a guard check (if (obj)) or use optional chaining ?.	Console.log the object right before accessing it
Async code running out of order	Data missing or undefined in output	Not awaiting a promise before using its result	Add await or chain .then() properly	Log timestamps before and after the async call
Mutating state directly	UI doesn’t update, or unpredictable bugs	Changing an array/object in place instead of creating a new one	Use spread syntax or array methods that return a copy	Freeze objects with Object.freeze() in dev to catch accidental mutation
Scope confusion with var	Variable leaks outside the block, wrong value in loops	var is function-scoped, not block-scoped	Use let or const instead	Search your file for var, there’s rarely a good reason to use it

One thing worth saying directly: memorizing this table won’t make you a better debugger. The skill is reading the error message itself, most of them tell you the exact line and reason if you actually read past the first sentence instead of googling it immediately. Want me to add a “reading stack traces” section too?

How Can You Build a Debugging Mindset?

Good Habits	Avoid These
Read the error message fully before changing the code. Error messages often identify the source of a problem.	Ignoring error messages removes information that describes the detected problem.
Test small pieces of code instead of changing many sections at once. Small tests help isolate the exact source of an error.	Making random changes makes it harder to identify which change affected the program.
Take breaks when you feel stuck. A short break can help you review the code with a fresh perspective.	Writing lots of code before testing increases the amount of code that needs checking after an error appears.
Explain the code to someone or a rubber duck. Describing each step can reveal incorrect assumptions or missing logic.	Assuming you know what the problem is without checking the evidence can lead to incorrect fixes.

Debugging Quiz

Learn how to find, understand, and fix errors in code.

Question 1 of 10 Score: 0

What Are the Key Takeaways?

Bugs are normal, and every programmer deals with Bugs during software development.
Error messages tell what is wrong and where the problem occurs. Read them carefully before changing the code.
Errors have three types: syntax, runtime, and logic. Each type affects program execution in a different way.
Isolate problems by testing small pieces of code instead of checking the entire program at once.
console.log() helps with tracking values during program execution and supports debugging.
Browser developer tools are powerful debugging helpers for viewing errors, inspecting code, and testing program behavior.
PREVIOUS Input & Output (I/O) NEXT Code Playground