How do you launch the JavaScript debugger in Google Chrome?

Debugging basics

Activating debugger tools

In the Developer Tools, navigate to the Sources tab. This is your control center for handling breakpoints, code stepping, and evaluating variables.

console.log('Hello World!');
// Introducing the debugger command
debugger;
console.log('This line will not execute until debugger is stepped over');


Live debugging without code edits

Use Chrome DevTools' UI to directly set breakpoints at line numbers, or right-click and select Add breakpoint from the context menu. Make use of conditional breakpoints to only pause execution when specific conditions are met.

The diagnostic console

The Console tab is your runtime diagnostic tool for logs, errors, and warnings. Test variables and functions, or execute JavaScript in the context of the loaded web page here.

Dealing with stubborn debugging issues

If the debugger seems to ignore your set breakpoints, ensure you are not in Incognito Mode, where extensions might be inactive. Verify that source maps are correctly configured especially when working with transpiled languages such as TypeScript.

Alternate routes to debugger tools

Apart from shortcuts, access More tools > Developer Tools from the Chrome's menu (three dots in the upper-right corner). Additionally, right-click on any page element and select "Inspect" to automatically open the Elements panel, from which you can navigate to other sections.

Debugging beyond error catching

Debugger tools are also for performance optimization and understanding code flow. Use Network tab to monitor XHR and Fetch calls, and analyze performance and memory usage to locate bottlenecks in your application.

Extra debugging tips

Observer and control variables

Watch expressions are your best friend! They allow monitoring of variable values over time and across script execution.

// Watching the value of x like a hawk
var x = 10;
console.log('First we initialize x =', x); // logs "First we initialize x = 10"
x *= 2;
console.log('Then we double x =', x); // logs "Then we double x = 20"
// Note to self: "x" seems to have a thing for multiplying!


Call stack navigation

Journey through function calls using the call stack. It's just like time-traveling, but for code execution!

Monitor user interactions

Use event listener breakpoints when you suspect user interactions wreak havoc in your code.

Catch network requests

Utilize XHR/fetch breakpoints to halt execution on network requests. Helps especially when AJAX requests go rogue!

Trace asynchronous code

Async call stack can help you track promises and mystical asynchronous code. Goodbye, callback hell!