Master VS Code launch.json: Debug Node.js and Chrome with Ease

Google Developer Tools are popular because they simplify debugging and support real‑time console output; combined with remote Node.js debugging they become very powerful. VS Code’s launch.json lets you bring those capabilities into the editor, enabling direct debugging from your coding environment.

launch.json is a JSON file used by VS Code to define debugging configurations such as the debugger type (Node.js, Chrome, etc.), launch arguments, environment variables, and can be combined with tasks.json for task automation. It usually resides in the project’s .vscode folder and is generated and managed by VS Code.

REPL (Read‑Eval‑Print Loop) is an interactive console that executes code snippets instantly, which is especially useful for quick testing and debugging complex logic. VS Code includes built‑in REPL support, and when used with launch.json it greatly improves the development experience.

My Example

Below are some configuration use cases.

Custom launch command with argument forwarding (the -- token passes subsequent parameters to npm):

<code>{
    "version": "0.2.0",
    "configurations": [
        {
            "command": "npm run review -- --xxxxx",
            "name": "debug review",
            "cwd": "${workspaceFolder}/packages/code-review-gpt",
            "request": "launch",
            "type": "node-terminal"
        }
    ]
}</code>

Using runtimeArgs :

<code>{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Egg Debug",
            "runtimeExecutable": "npm",
            "runtimeArgs": ["run", "debug", "--", "--inspect-brk"],
            "console": "integratedTerminal",
            "restart": true,
            "autoAttachChildProcesses": true
        }
    ]
}</code>

If you prefer not to configure manually, you can install the JavaScript Debugger extension.

Select "Debug npm script" to choose the script you want to debug.

launch.json Configuration Items Explained

The launch.json file defines debugging settings; each field controls the debugger’s behavior. Below are common top‑level items.

Top‑Level Items

version Description: Specifies the launch.json file version. Type: string Default: "0.2.0" Required: Yes Example: <code>{ "version": "0.2.0", "configurations": [] }</code>

configurations Description: An array containing one or more debug configurations. Type: array Default: None Required: Yes Example: <code>{ "version": "0.2.0", "configurations": [ { /* specific configuration */ } ] }</code>

Other Configuration Items

program Description: Path to the program entry file to debug. Type: string Default: None Required: Usually yes Example: <code>{ "program": "${workspaceFolder}/app.js" }</code>

cwd Description: Current working directory. Type: string Default: ${workspaceFolder} Required: No Example: <code>{ "cwd": "${workspaceFolder}" }</code>

env Description: Environment variable definitions. Type: object Default: None Required: No Example: <code>{ "env": { "NODE_ENV": "development" } }</code>

preLaunchTask Description: Task to run before launching the debug session. Type: string Default: None Required: No Example: <code>{ "preLaunchTask": "build" }</code>

postDebugTask Description: Task to run after the debug session ends. Type: string Default: None Required: No Example: <code>{ "postDebugTask": "cleanup" }</code>

outFiles Description: Glob patterns for generated JavaScript files, used with source maps. Type: array Default: None Required: No Example: <code>{ "outFiles": ["${workspaceFolder}/dist/**/*.js"] }</code>

sourceMaps Description: Enable source‑map support for TypeScript or Babel compiled code. Type: boolean Default: false Required: No Example: <code>{ "sourceMaps": true }</code>

restart Description: Automatically restart the debugger if the session terminates unexpectedly. Type: boolean Default: false Required: No Example: <code>{ "restart": true }</code>

console Description: Choose the console type: internalConsole , integratedTerminal , or externalTerminal . Type: string Default: internalConsole Required: No Example: <code>{ "console": "integratedTerminal" }</code>

Debugger‑Specific Options

Different debuggers have their own additional fields.

Node.js Debugger

runtimeExecutable Description: Path to the Node.js executable; defaults to the node found in PATH . Type: string Required: No Example: <code>{ "runtimeExecutable": "/usr/local/bin/node" }</code>

runtimeArgs Description: Command‑line arguments passed to Node.js. Type: array Required: No Example: <code>{ "runtimeArgs": ["--nolazy"] }</code>

skipFiles Description: Files or modules to skip during debugging, supports glob patterns. Type: array Required: No Example: <code>{ "skipFiles": ["<node_internals>/**"] }</code>

Chrome Debugger

url Description: URL of the page to debug. Type: string Required: Yes when request is launch Example: <code>{ "url": "http://localhost:3000" }</code>

webRoot Description: Root folder of the web project. Type: string Default: ${workspaceFolder} Required: No Example: <code>{ "webRoot": "${workspaceFolder}/src" }</code>

userDataDir Description: Directory for Chrome’s user data. Type: string Required: No Example: <code>{ "userDataDir": "${workspaceFolder}/.vscode/chrome" }</code>