To debug a Node.js app in VSCode, create a launch.json file in the .vscode folder by opening the Run and Debug view and selecting Node.js as the environment, then choose "Launch Program" or "Attach" based on your needs, ensuring the program field points to your main file like app.js or server.js. 2. Set breakpoints by clicking the left gutter next to line numbers, and when execution pauses, use the Debug Console, Variables panel, and Call Stack to inspect variables, step through code, and evaluate expressions, making sure the app is launched via the debug configuration and not manually in the terminal. 3. For apps already running on a port, use attach mode by starting the app with node --inspect or npm start --node-options="--inspect", then configure launch.json with request set to "attach" and port 9229, enabling "restart": true to auto-reconnect during restarts, especially useful with nodemon. 4. Debug npm scripts directly by setting runtimeExecutable to "npm" and runtimeArgs to ["run", "start"] in launch.json, allowing npm start or npm test to run under the debugger, ensuring the script doesn’t already include --inspect to avoid port conflicts. Tips include keeping skipFiles set to ["/**"] unless debugging internals, enabling sourceMaps for TypeScript or Babel, checking the Debug Console for errors, and using debugger statements in code as manual breakpoints, resulting in a seamless debugging experience once properly configured.

Debugging a Node.js app in VSCode is straightforward once you set up the environment correctly. Here’s how to do it effectively.

1. Use the Built-in Debugger with a Launch Configuration

The easiest way to debug a Node.js app in VSCode is by creating a launch.json file in your project’s .vscode folder.

Steps:

• Open your project in VSCode.
• Go to the Run and Debug view (Ctrl Shift D or Cmd Shift D).
• Click "create a launch.json file" if you don’t have one.
• Choose Node.js as the environment.
• Select "Launch Program" or "Attach" depending on your needs.

A basic launch.json for launching your app:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch App",
      "program": "${workspaceFolder}/app.js",
      "args": [],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "skipFiles": [
        "<node_internals>/**"
      ]
    }
  ]
}

Replace app.js with your main entry file (e.g., index.js, server.js).

Now press F5 or click Run and Debug to start debugging.

2. Set Breakpoints and Inspect Variables

• Click the left gutter (next to line numbers) in any .js file to set a breakpoint (a red dot will appear).
• When your code hits that line during execution, it will pause.
• Use the Debug Console, Variables panel, and Call Stack to:
  • View current variable values.
  • Step over, into, or out of functions.
  • Evaluate expressions on the fly.

Note: If breakpoints aren’t hit, make sure your app is actually being launched via the debug configuration (not manually in terminal).

3. Debug Apps Running on a Port (Attach Mode)

If your app is already running (e.g., via npm start), use attach mode.

First, start your app with inspection enabled:

node --inspect app.js
# or
npm start --node-options="--inspect"

Then use this launch.json config:

{
  "name": "Attach to Node",
  "type": "node",
  "request": "attach",
  "port": 9229,
  "restart": true,
  "skipFiles": ["<node_internals>/**"]
}

Now click Run and Debug to attach to the running process. The debugger will connect and respect your breakpoints.

Tip: Use "restart": true to automatically reconnect if the server restarts (useful with nodemon).

For nodemon, start it like:

nodemon --inspect app.js

Then use the same attach config — it will auto-reconnect on restart.

4. Debug npm Scripts Directly

You can debug npm start, npm test, etc., directly.

Example launch.json:

{
  "name": "Debug npm start",
  "type": "node",
  "request": "launch",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "start"],
  "port": 9229,
  "console": "integratedTerminal",
  "skipFiles": ["<node_internals>/**"]
}

This runs npm run start under the debugger. Make sure your package.json script doesn't use --inspect already unless you manage ports carefully.

Tips for Smooth Debugging

• Avoid skipFiles confusion: By default, VSCode skips internal Node files. Keep "skipFiles": ["<node_internals>/**"]</node_internals> unless you’re debugging deep internals.
• Use source maps: If you're using TypeScript or Babel, enable source maps and set "sourceMaps": true in launch.json.
• Check the output channel: If debugging fails, check the Debug Console or Output > Debug Console for errors.
• Use debugger statements: You can add debugger in your code as a manual breakpoint (only works when debugger is attached).

Basically, just set up launch.json, use breakpoints, and choose between launch or attach based on how your app runs. Once configured, debugging feels seamless.

The above is the detailed content of How to debug a Node.js app in VSCode. For more information, please follow other related articles on the PHP Chinese website!