In my project directory I have a frontend in next.js and a backend in Node.js it looks as follows:
I now would like to debug the program, so both backend and frontend have to run, and I don't know how to create the corrent debug launch.json configuration which I have in my top-level project, to launch and debug both programs.
{
"version": "0.2.0",
"compounds": [
{
"name": "Client+Server",
"configurations": [ "DCBACKEND", "DCFRONTEND" ]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "DCBACKEND",
"cwd" : "${workspaceFolder}\\dcbackend",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script", "start"
]
},
{
"type": "node",
"request": "launch",
"name": "DCFRONTEND",
"cwd" : "${workspaceFolder}\\dcfrontend",
"program": "${workspaceFolder}\\dcfrontend\\pages\\index.js",
"runtimeExecutable": "next",
"runtimeArgs": [
"--inspect"
]
}
]
}
EDIT: Now, I get the following error:
My start script for my backend is:
"scripts": {
"start": "node index.js -p 7766"
},
so there is something wrong with the port maybe? Also, it runs another script for debug in cmd-line:
C:\Program Files\nodejs\npm.cmd run-script start --inspect-brk=39777
I don't know what it has to do with --inspect-brk=39777, do I need that
Related
Why isn't my launch configuration in vscode picking up on args key?
vscode Version: 1.63.2
launch.json
"version": "0.2.0",
"configurations": [
{
"command": "node ${workspaceFolder}/test.js",
"args": ["foo"],
"name": "test",
"request": "launch",
"type": "node-terminal",
},
]
}
test.js
console.log("running script");
console.log(process.argv);
I press play from debug sidebar and get this in console:
$ node /Users/acohen/mp/mobileapp-client-tests/test.js
Debugger attached.
running script
[
'/Users/acohen/.nvm/versions/node/v12.16.2/bin/node',
'/Users/acohen/mp/mobileapp-client-tests/test.js'
]
Waiting for the debugger to disconnect...
Why isn't "foo" passed as an argument?
Here is a config example that worked for me:
{
"configurations": [
{
"name": "Launch Program",
"args": ["foo"],
"program": "${workspaceFolder}/test.js",
"request": "launch",
"type": "pwa-node"
}
]
}
Ok, what I ultimately wanted to do was run a complex npm script and debug it. I re-installed vscode, and found some good docs here:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_launch-configuration-support-for-npm-and-other-tools
and here for using nvm:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_multi-version-support
My launch.json looks like this:
where test_ios is the npm script to debug and 14.17.3 is the version of node (installed with nvm) to use:
"version": "0.2.0",
"configurations": [
{
"name": "Launch via npm",
"type": "node",
"request": "launch",
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "test_ios"],
"runtimeVersion": "14.17.3"
}
]
}
package.json
"scripts": {
"start": "node -r dotenv/config index.js dotenv_config_path=.env",
.vscode\launch.json
{
// https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "debug",
"skipFiles": ["<node_internals>/**"],
"program": "${workspaceFolder}\\index.js",
"args": ["-r dotenv/config index.js dotenv_config_path=.env"]
}
]
}
I want to debug, but he can't work, How do I configure launch.json?
Please check Add Configuration button on lower right corner of launch.json.
Sample npm task configuration generated from same:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229
}
Screenshot:
Adding additional configuration:
I want to use Visual Studio for developing an Node.js application with Typescript and simply want the normal debug behavior of any modern IDE: Debug code, set breakpoints, look into vars etc. Following the official documentation guide, I get an error when running the task: The npm task typescript didn't contribute a task for the following configuration.
So instead I invoke a custom npm script in the tasks.json file:
launch.json
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229,
"preLaunchTask": "typescript"
}
]
task.json
"tasks": [
{
"type": "shell",
"label": "typescript",
"command": "cd server; npm run build:live"
},
]
package.json
"scripts": {
"build:live": "nodemon --inspect --exec ./node_modules/.bin/ts-node -- ./index.ts"
}
Now the app is comping and starting (also with live reloading) fine. But NO debugging works, no breakpoint was reached. Is it really that hard to debug Typescript in VS Code?
I'm using the latest
Live debugging seems to be a pain on Typescript in VS Code. I could only make regular debugging working in a similar way to the full Visual Studio:
launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/index.ts",
"outFiles": [
"${workspaceRoot}/dist/**/*.js"
],
"sourceMaps": true,
"stopOnEntry": false,
"cwd": "${workspaceRoot}",
"env": {
"NODE_ENV": "development"
},
"console": "integratedTerminal",
"internalConsoleOptions": "openOnFirstSessionStart",
"preLaunchTask": "compile",
"name": "DEBUG"
}
]
}
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "compile",
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Please note that you've to set "sourceMap": "true" in tsconfig.json. When not, an error occurs that corresponding source maps aren't found. This is cause NodeJS isn't able to compile TS. Compiling is done by the TypeScript compiler tscbefore. For debugging purpose (e.g. reach breakpoints) the source maps can map the compiled js to the ts source file here.
Loving Grommet and vscode. Trying to get them to play together. I am able to get Express and vscode working as shown here. I would like to get the grommet-cli sample app to work similarly. Express has one command to start: "npm start" where grommet-cli has two: "npm run dev-server" and "npm run dev" (not sure how to start them both in vscode. I think I may need multi-session debugging?). How do I setup launch.json to debug the sample app? I'd like to be able to debug in IE/Edge. I've had some success in Chrome with the Debugger for Chrome extension.
Here is my current launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceRoot}"
},
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceRoot}"
}
]
}
This appears to resolve the issue. Hopefully, it's been added to the latest version of VS.
"compounds": [
{
"name": "Node+Browser",
"configurations": [ "Server", "Browser" ]
}
],
"configurations" [
{
"name": "Browser",
"type": "chrome",
//...
},
{
"name": "Server",
"type": "node",
//...
}
]
I have a node app with the package.json like so:
{
"name": "myexpressapp",
"version": "0.0.99",
"scripts": {
"start": "node ./bin/www" },
//etc
}
and in app.js I have
console.log ("Running version: "+process.env.npm_package_version);
When I run npm start in the command prompt this logs
Running version: 0.0.99
When I start (press F5) in VS Code this logs
Running version: undefined
What change do I need to make to launch.json to start the app in VS Code as if I had entered npm start in the command prompt?
I can now get it to run (but not debug) using the following launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch via NPM#3",
"runtimeExecutable": "npm",
"windows": {
"runtimeExecutable": "npm.cmd"
},
"runtimeArgs": [
"start"
],
"port": 5858,
"cwd": "${workspaceRoot}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program#1",
"program": "app.js",
"cwd": "${workspaceRoot}"
}
]
}