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",
//...
}
]
Related
I have an Angular application that I am trying to debug in VS Code. When I write code in a particular .ts file and put a breakpoint on a method or statement, it is bound. But when I try to debug through Run > Start Debugging, the breakpoint becomes unbound. Once debugging starts, nothing happens afterwards. Neither does it hit the breakpoint, nor do the buttons (Step Over, Step Into, Run, etc.) of the floating debugging toolbar at the top get enabled. I followed this and this videos, and tried almost everything mentioned in this thread. But nothing solved my problem. I even upgraded node.js 17 to 18, yet of no avail. I tried multiple browsers like Edge, Chrome, Firefox and Opera. Debugging happens nowhere. So, what to do now to get VS Code debugging up and running? Because otherwise it is too cumbersome to use console.log(); every time to debug.
Please ask me if you need any more info of my code.
My environment:
OS - Windows 10
VS Code - 1.73.1
Node.js - 18.12.1
Angular CLI - 14.2.6
My launch.json file:
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Launch Edge",
"request": "launch",
"type": "msedge",
"sourceMaps": true,
"trace": true,
"preLaunchTask": "npm: start",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
},
{
"name": "ng serve",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: start",
"url": "http://localhost:4200/"
},
{
"name": "ng test",
"type": "chrome",
"request": "launch",
"preLaunchTask": "npm: test",
"url": "http://localhost:9876/debug.html"
}
]
}
My task.json file:
{
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "start",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
},
{
"type": "npm",
"script": "test",
"isBackground": true,
"problemMatcher": {
"owner": "typescript",
"pattern": "$tsc",
"background": {
"activeOnStart": true,
"beginsPattern": {
"regexp": "(.*?)"
},
"endsPattern": {
"regexp": "bundle generation complete"
}
}
}
}
]
}
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"
}
]
}
I was going through this tutorial where the author uses VS CODE functionality of debugger(CTRL+SHIFT+D) and launch the debugger. After clicking play icon of debugger, chrome automatically launched.
After 4:56 minutes gone from this video can be clearly seen how the chrome launched automatically.
I am trying to develop the same app using Puppeteer in NodeJS with help of VS Code editor.
Here, is my launch.json
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
{
"version": "0.2.0",
"compounds": [
{
"name": "Launch & Debug",
"configurations": ["Launch Program","Launch Chrome"]
}
],
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}\\index.js"
}
]
// "configurations": [
// {
// "type": "node",
// "request": "launch",
// "name": "Launch Program",
// "program": "${workspaceFolder}\\index.js"
// }
// ]
}
Also, I have gone through these links as well, still no luck
Debug with Visual Studio Code not working
And throwing an error similar to the one I am receiving,
Debugging with inspector protocol because Node.js v10.16.0 was detected.
**Error processing "launch": Error: Can't find Chrome - install it or set the "runtimeExecutable" field in the launch config.**
at Object.errP (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\node_modules\vscode-chrome-debug-core\out\src\utils.js:262:13)
at ChromeDebugAdapter.<anonymous> (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:69:57)
at Generator.next (<anonymous>)
at C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:10:71
at Promise (<anonymous>)
at __awaiter (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:6:12)
at launch.then (C:\Users\Collegeout\.vscode\extensions\msjsdiag.debugger-for-chrome-4.12.1\out\src\chromeDebugAdapter.js:52:74)
at <anonymous>
If you will see my launch.JSON file and there will be commented configuration array object which when uncommented results to
node --inspect-brk=28904 index.js
Debugger listening on ws://127.0.0.1:28904/463ec663-1802-496f-bfc9-5354559c655c
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Waiting for the debugger to disconnect...
Please let me now how can I launch a Chrome instance while developing the Puppeteer application in NodeJS.
I've created the workspace of the VSCode project and made the app.js file as the main file of the app, then add this to the setting JSON file and everything's going well.
It's my workspace setting JSON file of my project.
{
"folders": [
{
"path": "my-project"
}
],
"settings": {
"editor.tabSize": 2,
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true
},
"launch": {
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/app.js"
}
],
"compounds": []
}
}
Hope it'll help you.
Works great for me like that:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"name": "node launch",
"request": "launch",
"program": "${workspaceFolder}/index.js"
}
]
}
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
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.