Debugging with Browser DevTools

Debugging is a process: reproduce the problem, narrow down where behaviour first diverges from expectation, inspect relevant values, make a small change, and verify the fix. Randomly changing multiple lines makes it harder to know which change mattered.

Console methods#

console.log displays values, console.warn highlights a warning, and console.error reports a problem. console.table can make arrays of records easier to inspect. Avoid logging passwords, tokens, private user data, or production secrets.

Breakpoints#

In browser developer tools, open Sources, choose a JavaScript file, and set a breakpoint on a line. When execution pauses, inspect the call stack, local scope, and expression values. Step over a line to continue without entering a function, step into to enter it, and step out to finish the current function.

Read the stack trace#

A stack trace shows the chain of function calls leading to an error. Start with the first application frame, locate the failing operation, and inspect the input values and assumptions at that point. The most visible line is not always the original cause.

Practice#

Create an intentional error in a small script. Use a breakpoint to inspect the variable just before the failure, then correct the root cause and remove temporary debugging code.