Yes, you can debug JavaScript code directly in VS Code while it runs in a browser by setting up the right tools and configurations. First, ensure you have VS Code installed with your JavaScript project open, a compatible browser like Chrome or Edge, the Debugger for Chrome extension (or built-in Edge support), and your project running locally via a dev server. Next, configure debugging by creating a launch.json file under .vscode, selecting your target browser, and adjusting settings like the url and webRoot to match your setup. Then, start your dev server, launch the browser from the Debug panel, set breakpoints in VS Code by clicking the gutter, and use the debug toolbar to step through code, inspect variables, and monitor expressions. Additionally, source maps allow debugging of original source files, and console logs appear in the Debug Console. For smooth debugging, avoid pre-opened browsers, verify path settings, reload the browser if needed, and use debugger statements as fallbacks.

Debugging JavaScript code directly from VS Code while it runs in a browser is super handy, especially if you're already working in that environment. The key is setting up the right tools and configurations so you can step through your code, inspect variables, and catch issues faster.

Prerequisites: Make Sure You Have the Basics

Before diving into debugging, confirm you have these components ready:

• VS Code installed (obviously)
• JavaScript project open in VS Code
• A browser like Chrome or Edge (both work well with VS Code for debugging)
• Install the Debugger for Chrome extension (if using Chrome) – though Microsoft Edge support is now built in
• Your project should be running locally (e.g., via npm start, vite, webpack-dev-server, etc.)

Once those are in place, you’re good to go.

Set Up a Debug Configuration in VS Code

To debug from VS Code, you’ll need a .vscode/launch.json file that tells VS Code how to connect to your browser.

Here’s what to do:

• Open the Run and Debug panel (left sidebar icon that looks like a bug)
• Click "create a launch.json file"
• Choose the environment you want to debug (like Chrome or Edge)
• It will generate a default configuration file

You might need to tweak some settings depending on how your app runs. For example, if your local server uses port 3000, make sure the url field reflects http://localhost:3000.

A basic config for Chrome might look like this:

{
  "type": "chrome",
  "request": "launch",
  "name": "Launch Chrome against localhost",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}"
}

Save it and you're ready to start debugging.

Add Breakpoints and Step Through Code

Now that everything's connected, here's how to actually debug:

• Start your dev server (like npm run dev)
• In VS Code, click the green play button in the Debug panel to launch the browser
• Open your app in the launched browser window
• In VS Code, open the JavaScript file you want to debug
• Click the gutter next to the line numbers to set a breakpoint (you'll see a red dot)

When the code hits that line, execution pauses, and you can:

• Hover over variables to see their current values
• Use the debug toolbar to step over, into, or out of functions
• Watch expressions by adding them in the Watch section
• Check the call stack to see how the function was called

One thing to note: If you're using source maps (which most modern frameworks do), VS Code will let you debug the original source files instead of the minified or transpiled versions.

Also, don’t forget about the console — anything logged via console.log() shows up directly in the Debug Console inside VS Code.

Tips for Smooth Debugging

Sometimes things don't just click right away. Here are a few common gotchas and tips:

• Make sure your browser isn't already open before launching from VS Code; otherwise, it might not attach correctly.
• If your breakpoints aren't hitting, double-check the webRoot path in your launch config.
• Try reloading the browser after starting the debugger if the connection seems off.
• Use debugger statements in your code as fallbacks — they'll pause execution if the debugger is attached.

For projects built with tools like React, Vue, or SvelteKit, you may need to adjust paths or enable specific extensions, but generally, the setup works out of the box once you're serving from a dev server.

That’s basically it — once configured, debugging becomes second nature. It's not complicated, but it does require attention to detail during setup.

The above is the detailed content of How do I debug JavaScript code in a browser using VS Code?. For more information, please follow other related articles on the PHP Chinese website!