Debugging is one of the most important skills for a programmer to master. Every day we write code, and inevitably some of it won’t work as expected.

The Debugging Mindset

Before diving into tools, understand that fixing bugs starts with thinking. First, try to understand:

• Is it an environment problem?
• Is it a problem with the input?
• Is it happening every time or sporadically?

Once you have some idea where the error is coming from, you can check that specific part of code.

Using console.log() and alert()

The simplest debugging approach is adding log statements:

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

Use alert() for simple string/number values and console.log() for complex objects.

Inspecting Objects

There are several ways to inspect objects:

console.log

console.log(car)

console.dir

console.dir(car)

In Node.js, add colors:

console.dir(car, { colors: true })

JSON.stringify()

JSON.stringify(car, null, 2)

The third parameter sets indentation spaces for readable output.

Using Breakpoints

The debugger is the most powerful tool in the browser developer tools. You can:

• Add debugger statement in your code to pause execution
• Click line numbers in the Sources panel to add breakpoints
• Use conditional breakpoints

Types of Breakpoints

• Line breakpoints: Pause at a specific line
• XHR/fetch breakpoints: Triggered when network requests are sent
• DOM breakpoints: Triggered when DOM elements change
• Event listener breakpoints: Triggered on events like mouse clicks

Stepping Through Code

When paused at a breakpoint, you can:

• Resume: Continue normal execution
• Step over: Execute the current line and move to the next
• Step into: Go into a function call
• Step out: Return to the calling function

The Scope Panel

When execution is paused, the Scope panel shows all variables in the current scope with their values. You can even edit values by double-clicking them.

Watch Expressions

The Watch panel lets you monitor specific expressions. Add any expression like name or name.toUpperCase() to track its value as you step through code.

The Call Stack

The Call Stack panel shows how many function levels deep you are. Click any function name to jump to that level in the stack.

Printing the Stack Trace

Use console.trace() to print the call stack:

const function2 = () => console.trace()
const function1 = () => function2()
function1()

Blackboxing Scripts

When debugging, you often don’t need to step into library code. Right-click a script in the call stack and select “Blackbox script” to skip over it during debugging.

Debugging Node.js in the Browser

Since Node.js uses the V8 engine, you can debug Node.js code using Chrome DevTools:

node --inspect

Then open about://inspect in Chrome and click “Open dedicated DevTools for Node.”

0:	Introduction