Suggest an edit

Improve this article

Refine the answer for “What is debugging?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Debugging** is the process of **finding, analyzing, and fixing errors (bugs)** in a program. When your code does not work the way you expect, **debugging** is what helps you understand *why* that happens and *how to fix it*.

---

## 1. In plain terms

> **Debugging** is when a developer "steps" through the code, watches variables, checks where the program goes wrong, and fixes the cause of the problem.

---

## 2. Main goals of debugging

- **Understand** why the code behaves incorrectly.
- **Find** the spot where the error happens.
- **Fix** the bug (a logic, syntax, or data error, and so on).
- **Verify** that everything works correctly after the fix.

---

## 3. How debugging happens (step by step)

1. **Discovering the error**, the program crashes or behaves differently than expected.
2. **Analysis**, you read the error message and study the call stack (`stack trace`).
3. **Setting breakpoints**, to see what happens "inside" the program.
4. **Step-by-step execution**, going through the code line by line, checking variable values.
5. **Fixing**, finding the source of the error and making changes.
6. **Verification**, running it again to confirm the error is truly gone.

---

## 4. Debugging tools in JavaScript

### Console

The simplest and most popular tool:

```javascript
console.log("Variable x:", x);
console.error("Error:", err);
console.table(users);
```

Used to **print intermediate values** and understand where things went wrong.

---

### Debugger

A special statement that **stops code execution** and opens DevTools.

```javascript
function test(a, b) {
  debugger; // stops here
  return a + b;
}
test(2, 3);
```

This opens the browser's developer tools, and you can:

- look at variable values,
- step through lines,
- see the call stack,
- control code execution.

---

### Breakpoints

In Chrome DevTools, VS Code, and other IDEs, you can **click to the left of a line number**, and the program automatically stops there when it runs.

---

### Network / Sources / Call Stack

In the debugger you can:

- watch **network requests**,
- look at the **source code** and variables,
- analyze the **call stack** to understand which function triggered the error.

---

## 5. Debugging asynchronous code

In JavaScript it is especially important to be able to debug:

- `async/await`
- `Promise`
- timers (`setTimeout`)
- events (`click`, `keydown`, and so on)

For this, debuggers support an **asynchronous call stack**, so you can see the whole path to the error, even if it happened a second after the event.

---

## 6. Debugging in practice (example)

```javascript
function divide(a, b) {
  if (b === 0) throw new Error("Division by zero!");
  return a / b;
}

function calculate() {
  const x = 10;
  const y = 0;
  const result = divide(x, y);
  console.log("Result:", result);
}

calculate();
```

Error:

```javascript
Uncaught Error: Division by zero!
    at divide (<anonymous>:2:21)
    at calculate (<anonymous>:8:18)
```

The call stack shows **which line and which function triggered the error**. That is part of debugging too.

---

## 7. Debugging in Node.js

Node.js also supports debugging. You can start the program with a flag:

```javascript
node --inspect index.js
```

Then open Chrome at `chrome://inspect`, to see breakpoints and the stack right in the browser.

---

## 8. Debugging tools

| Tool | Where it is used |
|---|---|
| **Chrome DevTools** | Debugging the frontend, network requests, the DOM |
| **VS Code Debugger** | Step-by-step debugging of Node.js and browser JS |
| **Sentry / GlitchTip** | Tracking errors in production |
| **console.log / debugger** | Quick manual checks |

---

## Summary

| Term | Description |
|---|---|
| **Debugging** | The process of finding and fixing errors |
| **debugger** | A keyword that pauses the code |
| **breakpoint** | A point where code execution stops |
| **stack trace** | The path of function calls leading to the error |
| **console.log()** | A quick way to see data |
| **DevTools / VS Code Debugger** | The main tools for debugging JS |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts663 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.