Chrome DevTools JavaScript Debugging: Complete Guide (2026)

Every developer has the console.log habit. It works—until it doesn't. When a bug is hiding in a 500ms async chain, behind a third-party callback, or inside a minified library, console.log becomes a dead end. Chrome DevTools has a full-featured debugger built into the browser. Most developers use 5% of it. This guide covers the other 95%—the features that actually eliminate the need for most console.log debugging. Opening DevTools Three ways to open Chrome DevTools: Keyboard: F12 or Ctrl+Shift+I (Windows/Linux), Cmd+Option+I (Mac) Right-click: Right-click any element → "Inspect" Menu: Chrome menu → More tools → Developer tools The Sources panel is your primary debugging environment. The Console is where you interact with live code. The Network panel handles API inspection. Breakpoints: The Foundation A breakpoint pauses execution at a specific line so you can inspect the runtime state—variables, the call stack, scope chain—everything. Setting a Line Breakpoint Open Sources panel Find yo