Chrome DevTools Debugging Keyboard Shortcuts

Chrome DevTools Debugging Shortcuts

Chrome DevTools is the primary debugging tool for web developers. These shortcuts help you inspect, debug, and profile web applications without relying on the mouse.

Opening DevTools

• Open DevTools (⌘+⌥+I / Ctrl+Shift+I) — open the last-used panel
• Open Console (⌘+⌥+J / Ctrl+Shift+J) — jump directly to the Console
• Inspect Element (⌘+⌥+C / Ctrl+Shift+C) — activate the element inspector and click any element on the page

Debugger Controls

When execution is paused at a breakpoint:

• Resume (F8) — continue execution until the next breakpoint
• Step Over (F10) — execute the current line and move to the next one
• Step Into (F11) — enter the function call on the current line
• Step Out (Shift+F11) — finish the current function and return to the caller
• Toggle Breakpoint (⌘+B / Ctrl+B) — add or remove a breakpoint on the current line in Sources

Console Shortcuts

• Clear Console (⌘+K / Ctrl+L) — clear all console output
• Multi-line Input (Shift+Enter) — write multi-line JavaScript in the console
• Previous/Next Command (↑/↓) — cycle through command history

Sources Panel

• Open File (⌘+P / Ctrl+P) — fuzzy search for any loaded source file
• Search All Files (⌘+⌥+F / Ctrl+Shift+F) — search across all loaded sources
• Go to Line (⌘+G / Ctrl+G) — jump to a specific line in the current file

Panel Navigation

• Next Panel (⌘+] / Ctrl+]) — switch to the next DevTools panel
• Previous Panel (⌘+[ / Ctrl+[) — switch to the previous panel
• Toggle Dock Side (⌘+Shift+D / Ctrl+Shift+D) — change dock position (bottom, right, undocked)
• Toggle Device Mode (⌘+Shift+M / Ctrl+Shift+M) — enable mobile device emulation

Mastering these shortcuts makes JavaScript debugging significantly faster than clicking through the UI.