Debugging Like a Pro with VS Code's Built-In Tools

Every JavaScript developer starts with console.log(). It’s quick, it works, and it’s familiar. But when you’re tracking down a bug through multiple function calls, async operations, or complex state changes, console logging becomes a game of whack-a-mole. You’re littering your code with log statements, rebuilding constantly, and still missing the complete picture.

VS Code’s built-in debugger changes this. Instead of guessing what your code is doing, you can pause execution, inspect variables at any point, step through functions line by line, and understand exactly how your application behaves. This article shows you how to leverage these powerful tools for JavaScript, TypeScript, React, and Node.js debugging—turning hours of frustration into minutes of focused problem-solving.

Setting Up VS Code Debugging for JavaScript and TypeScript

Creating Your launch.json Configuration

The heart of VS Code debugging is the launch.json file. Press F5 in any JavaScript project, and VS Code prompts you to create one. Here’s a basic configuration for debugging JavaScript in VS Code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Current File",
      "program": "${file}",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

For TypeScript, add source map support to your configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Debug TypeScript",
  "program": "${file}",
  "outFiles": ["${workspaceFolder}/dist/**/*.js"],
  "sourceMaps": true,
  "skipFiles": ["<node_internals>/**"]
}

Essential Debugging Controls

Once configured, debugging becomes straightforward:

• Set breakpoints by clicking left of any line number (or press F9)
• Start debugging with F5
• Step over code with F10 (execute current line)
• Step into functions with F11 (dive into function calls)
• Step out with Shift+F11 (complete current function)

The Variables panel shows all local and global variables in scope. The Watch panel lets you track specific expressions. The Call Stack shows your execution path—invaluable for understanding how you reached a particular point.

Advanced Breakpoint Techniques

Conditional Breakpoints

Right-click any breakpoint and select “Edit Breakpoint” to add conditions. The debugger only pauses when your condition evaluates to true:

// Breakpoint condition: user.role === 'admin'
// Only stops for admin users

Logpoints: The Better Console.log

Logpoints print to the Debug Console without stopping execution. Right-click in the gutter and select “Add Logpoint”. Use curly braces for expressions:

User {user.name} triggered action at {new Date().toISOString()}

No more removing console.logs before committing—logpoints exist only during your debug session.

React Debugging with Browser Integration

Setting Up Browser Debugging for React

For React apps, use VS Code’s built-in JavaScript Debugger (the Debugger for Chrome extension is now deprecated). Configure it for React apps using Vite or Create React App:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "Debug React App",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "sourceMaps": true
}

Start your dev server (npm start), then press F5. VS Code launches Chrome and connects the debugger. Set breakpoints directly in your React components, inspect props and state, and step through renders—all from VS Code.

Debugging React Component State

Place breakpoints inside useEffect hooks, event handlers, or component functions. The Variables panel shows current props, state values, and hook dependencies. Use the Debug Console to test expressions against your component’s current context.

Node.js Debugger VS Code Features

Auto Attach for Quick Debugging

Enable Auto Attach from the Command Palette (Ctrl+Shift+P > “Toggle Auto Attach”). Set it to “smart” mode. Now any Node.js process started from VS Code’s terminal automatically connects to the debugger—no configuration needed.

Debugging Async Operations

The Node.js debugger VS Code integration excels at async debugging. Set breakpoints inside async functions, Promise chains, or callbacks. The Call Stack clearly shows the async execution path, making it easy to trace through complex asynchronous flows.

Optimizing Your Debugging Workflow

Using the Debug Console Effectively

The Debug Console isn’t just for output—it’s a REPL connected to your paused execution context. Test fixes, inspect objects, or call functions directly:

// While paused at a breakpoint:
// > user.permissions
// ['read', 'write']
// > calculateTotal(cart.items)
// 45.99

Skip Files to Focus on Your Code

Add this to your launch.json to skip library code:

"skipFiles": [
  "<node_internals>/**",
  "node_modules/**"
]

The debugger won’t step into these files, keeping you focused on your application logic.

Conclusion

VS Code’s debugging tools transform how you understand and fix code. Instead of scattered console.logs, you get a complete view of your application’s state at any moment. Conditional breakpoints and logpoints reduce debugging noise. The browser integration brings frontend debugging into your editor. Auto Attach makes Node.js debugging effortless.

Start small—replace your next console.log() with a breakpoint. Step through the code. Inspect variables. Once you experience the clarity of proper debugging tools, you’ll wonder how you managed without them. The time invested in learning these features pays back immediately in faster bug fixes and deeper code understanding.

FAQs

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.