Suggest an edit

Improve this article

Refine the answer for “Browser debugging methods”. 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)

Modern browsers (especially **Chrome**, **Firefox**, **Edge**) provide extremely powerful tools for **debugging JavaScript, markup, network requests, and performance**.
Let's go through all the main **browser debugging methods**, from the simplest to the advanced ones.

---

## 1. `console` - the simplest and most popular method

Used for **quickly checking values, logic, and program state**.

### Main methods:

| Method | Purpose | Example |
|---|---|---|
| `console.log()` | Prints text and values | `console.log("x =", x)` |
| `console.error()` | Shows an error in red | `console.error("Error!")` |
| `console.warn()` | A warning (yellow) | `console.warn("Warning")` |
| `console.table()` | Tabular output of arrays/objects | `console.table(users)` |
| `console.time()` / `console.timeEnd()` | Measures execution time |  |
| `console.group()` / `console.groupEnd()` | Groups logs |  |

Fast and convenient, but only suited for simple cases.

---

## 2. `debugger` - a breakpoint right in the code

Add the `debugger;` keyword, and the browser will **stop code execution** at that line,
as long as DevTools is open.

```javascript
function calculate(a, b) {
  debugger; // <-- execution stops here
  return a + b;
}
calculate(2, 3);
```

Once stopped, you can:

- inspect variable values,
- step through lines,
- see the call stack and execution context.

---

## 3. Breakpoints in DevTools

One of the most convenient debugging methods.
You can **pause program execution** at a specific spot *without changing the code*.

### How to set a breakpoint:

1. Open DevTools -> the **Sources** tab.
2. Find the JS file you need.
3. Click to the left of the line number, a blue marker appears.
4. Re-run the code -> the program stops at that line.

Now you can:

- inspect **local variables**,
- track **function calls (Call Stack)**,
- **step through the code** (`Step over`, `Step into`, `Step out`).

---

## 4. Event Listener Breakpoints

You can **stop execution when an event fires**,
for example `click`, `keydown`, `resize`, `fetch`, and so on.

Tab:
**DevTools -> Sources -> Event Listener Breakpoints**

Examples:

- Stop when a `click` happens on the page.
- When the browser runs `setTimeout()`.
- When the DOM changes (`DOM Mutation`).

Very useful when **debugging events and UI logic**.

---

## 5. Debugging the DOM and CSS

The **Elements** tab:

- view and edit HTML in real time,
- inspect and edit CSS,
- track applied styles,
- computed styles (`Computed`).

You can **change styles right in the browser** to test the design.

---

## 6. Debugging network requests (the Network tab)

Shows **all requests made by the page** and their parameters:

- URL, method (GET, POST, etc.)
- Headers
- Response
- Status code
- Load time

You can inspect `fetch`, `XHR`, `API` requests, GraphQL, and so on.

Very useful for debugging **backend interactions and APIs**.

---

## 7. Debugging errors in the console (Console)

The **Console** tab shows:

- messages from `console.log()`, `console.error()`,
- an **error's call stack**, with files and line numbers,
- the ability to **run JS code right in the console**.

You can click a link in an error message, and the browser opens its location in the code.

---

## 8. Watch Expressions

While paused at a breakpoint, you can **add variables to "Watch"**
to observe how their values change while stepping through code.

The **Watch** panel is available in DevTools -> Sources -> on the right.

---

## 9. Debugging async / await / promises

Modern browsers support an **asynchronous call stack**:
if an error occurs inside `await` or a promise, the stack shows the path **through the async functions**.

You can:

- set breakpoints inside `async` functions,
- see `await` chains,
- track `Promise` states in the **"Async"** tab (in Sources).

---

## 10. Live Edit - changing code "on the fly"

In DevTools -> Sources, you can edit a JS file directly,
press `Ctrl+S`, and the browser runs the changed version **without reloading the page**.

Great for "experiments" while debugging.

---

## 11. Debugging performance (the Performance tab)

Lets you:

- record **execution profiles**,
- measure **fps**, delays, bottlenecks,
- see **paint time** and **function calls**.

Ideal for optimizing complex UI or animations.

---

## 12. The Memory tab

Used for **finding memory leaks** and analyzing **RAM usage**.

Shows:

- which objects the garbage collector isn't clearing,
- where memory "gets stuck".

---

## 13. Network -> WS / Fetch / GraphQL

Helps debug **WebSockets, GraphQL, and REST requests**,
see the body of sent data, tokens, headers, and responses.

---

## 14. Mobile debugging

Chrome DevTools supports **remote debugging**:

- you can connect a phone over USB,
- open the mobile site on the device,
- and debug right from your PC (elements, JS, network).

---

## Summary table

| Method | Where it's used | What it does |
|---|---|---|
| `console.log()` | In code | Quick value checks |
| `debugger` | In code | Stops execution |
| Breakpoints | DevTools -> Sources | Stops on a line |
| Event Breakpoints | DevTools -> Sources | Stops on an event |
| Network | DevTools | Debugs API requests |
| Elements | DevTools | Changes DOM and CSS |
| Performance | DevTools | Analyzes speed |
| Memory | DevTools | Finds memory leaks |
| Watch / Scope | DevTools | Observes variables |
| Console | DevTools | Logs, errors, running code |
| Remote Debugging | Chrome + phone | Debugs mobile sites |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.