Browser debugging methods

JavaScriptJunior~4 min read

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:

Open DevTools -> the Sources tab.
Find the JS file you need.
Click to the left of the line number, a blue marker appears.
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

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.