VS Code Debugging Shortcuts Cheat Sheet for Faster JavaScript Fixes

If you’ve ever stared at a console log that looks like a cryptic maze, you know why this matters. A good set of shortcuts can turn a painful hunt for bugs into a quick walk in the park. I’ve spent countless evenings chasing down “why is this null?” errors, and the right key combo saved me more than a few hours. Below is the cheat sheet I keep on my monitor, and now you can copy it to your own VS Code setup.

Why Debug Shortcuts Matter

When you’re writing JavaScript, the code changes fast and the bugs appear faster. Hitting the mouse for every step—run, pause, step over, step into—adds up. A few keystrokes let you stay in the flow, keep your mind on the problem, not the UI. That’s the core idea behind every cheat sheet on Coding Cheat Sheet: keep the tool simple so the developer stays focused.

Core Debug Shortcuts

These are the shortcuts you’ll use in almost every debugging session. They work on Windows, Linux and macOS (just replace Ctrl with Cmd on a Mac).

Start / Stop Debugging

• F5 – Start debugging (or continue if already paused).
• Shift+F5 – Stop the current debug session.

Breakpoints

• F9 – Toggle a breakpoint on the current line.
• Ctrl+F9 (or Cmd+F9 on Mac) – Disable all breakpoints without removing them.
• Ctrl+Shift+F9 – Remove all breakpoints.

Step Controls

• F10 – Step over (run the current line, skip inside functions).
• F11 – Step into (go inside the function call).
• Shift+F11 – Step out (run to the end of the current function).

Continue & Pause

• Ctrl+Alt+P – Pause the running program.
• F5 – Resume after a pause or breakpoint.

Navigating the Call Stack

When you’re deep in a stack trace, moving around quickly is a lifesaver.

• Alt+Up / Alt+Down – Move up or down the call stack.
• Ctrl+Shift+Y – Open the Debug Console (where you can type expressions).

These shortcuts let you jump from your own code to a library function and back without losing context.

Quick Watch & Evaluate

Sometimes you just need to see the value of a variable without adding a watch manually.

• Ctrl+Shift+D – Open the Debug pane (if it’s not already visible).
• Ctrl+Shift+E – Open the “Watch” view and add the selected expression.
• Hover – Not a shortcut, but remember that hovering over a variable while paused shows its value instantly. It’s the fastest “cheat” of all.

Tips for Custom Keybindings

VS Code lets you remap any command. If a shortcut feels awkward, change it. Here’s a quick way to add a custom binding for “Run to Cursor”, a command I use a lot when I know exactly where the bug hides.

1. Open the Command Palette (Ctrl+Shift+P).
2. Type “Preferences: Open Keyboard Shortcuts (JSON)”.
3. Add an entry like this:

{
    "key": "ctrl+alt+r",
    "command": "workbench.action.debug.runToCursor",
    "when": "editorTextFocus"
}

Now Ctrl+Alt+R will run the program straight to the line your cursor sits on. No need to set a temporary breakpoint first.

Debugging JavaScript in Node vs. Browser

VS Code can attach to both Node processes and browsers (via Chrome Debugger). The shortcuts stay the same, but a couple of extra steps help.

• Node: Add "type": "node" in your launch.json. Then hit F5 to start.
• Browser: Use "type": "pwa-chrome" and "url": "http://localhost:3000" (or whatever your dev server uses). Once the browser launches, F5 will attach automatically.

Remember to open the Debug Console (Ctrl+Shift+Y) to run console.log style checks without leaving the editor.

A Little Story

Last month I was debugging a React component that kept re‑rendering forever. I set a breakpoint in the useEffect hook, hit F5, and watched the call stack bounce back and forth. After a few minutes of stepping over, I realized the problem was a missing dependency array. I could have spent an hour adding console.log statements, but those shortcuts let me see the exact line that kept firing. I added a quick watch on the state variable, saw it flip every 200 ms, and fixed the bug in under ten minutes. That’s the power of a good cheat sheet.

Putting It All Together

Here’s a quick workflow you can copy into your daily routine:

1. Open the file you suspect has the bug.
2. Press F9 on the line you want to start watching.
3. Hit F5 to launch the debugger.
4. When the breakpoint hits, use F10 to step over harmless lines, F11 to dive into suspicious functions.
5. If you need to see a value fast, hover or press Ctrl+Shift+E after selecting the variable.
6. Use Alt+Up/Down to climb the call stack if you end up deep inside a library.
7. When you’re done, press Shift+F5 to stop.

Memorize these steps, and you’ll find yourself fixing bugs faster than you can type “npm start”. Keep the cheat sheet handy, maybe pin it to your VS Code sidebar with the “Sticky Notes” extension, and you’ll never waste time hunting for the right key combo again.

Happy debugging, and may your breakpoints be few but effective.