Debugging and Breakpoint not working for Angular in VS Code - node.js

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"
}
}
}
}
]
}

Related

Visual studio code debugger error : "Could not find the task 'gcc build active file'

Im trying to configure a C/C++ workspace in Visual Studio Code using Ubuntu Linux, and I don't know how to make the debugger work properly. I copied from the internet a 'tasks.json' file to be able to compile my code with pressing of F5 but I think it causes some sort of a problem with the debugger because every time I try to enter debugging mode, the error "Could not find the task 'gcc build active file' pops up.
Here are the 2 jsons :
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "debug",
"type": "shell",
"command": "",
"args": [
"g++",
"-g",
"${relativeFile}",
"-o",
"a.exe"
]
},
{
"label": "Compile and run",
"type": "shell",
"command": "",
"args": [
"g++",
"-g",
"${relativeFile}",
"-o",
"${fileBasenameNoExtension}.out",
"&&",
"clear",
"&&",
"./${fileBasenameNoExtension}.out"
],
"group": {
"kind": "build",
"isDefault": true
},
"problemMatcher": {
"owner": "cpp",
"fileLocation": [
"relative",
"${workspaceRoot}"
],
"pattern": {
"regexp": "^(.*):(\\d+):(\\d+):\\s+(warning|error):\\s+(.*)$",
"file": 1,
"line": 2,
"column": 3,
"severity": 4,
"message": 5
}
}
},
{
"type": "shell",
"label": "g++ build active file",
"command": "/bin/g++",
"args": [
"-g",
"${file}",
"-o",
"${fileDirname}/${fileBasenameNoExtension}"
],
"options": {
"cwd": "/bin"
},
"problemMatcher": [
"$gcc"
],
"group": "build"
}
]
}
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",
"configurations": [
{
"name": "(gdb) Launch",
"type": "cppdbg",
"request": "launch",
"program": "enter program name, for example ${workspaceFolder}/a.out",
"args": [],
"stopAtEntry": false,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": false,
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
},
{
"name": "gcc build and debug active file",
"type": "cppdbg",
"request": "launch",
"program": "${fileDirname}/${fileBasenameNoExtension}",
"args": [],
"stopAtEntry": false,
"cwd": "${workspaceFolder}",
"environment": [],
"externalConsole": false,
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
],
"preLaunchTask": "gcc build active file",
"miDebuggerPath": "/usr/bin/gdb"
}
]
}
Thanks in advance for the help, I m realy really clueless.
In your tasks.json file, no task is labeled as 'gcc build active file' which is required as a preLaunchTask in launch.json file.
So you can either change the label of task or change the content of preLaunchTask to make them match.
Just change the content of preLaunchTask into "g++ build active file". It will work.
You need to specify path and names of files. Of course debug is only possible if the binary is compiled with g flag (output becomes heavier and less compressed).
launch.json would map to binary file
"program": "${workspaceFolder}/a.out",
task.json would relate to how to compile
"args": [
"-g",
"${workspaceFolder}/*.cpp",
"-o",
"${workspaceFolder}/a.out"
https://www.youtube.com/watch?v=X2tM21nmzfk&app=desktop
If you can't make it work through vscode, you may want to use another tool like GDB.
GDB also works great in Terminal in Linux/VM and maybe WSL.

How to debug with VSCode when making a nyc coverage report?

I am trying to debug when running nyc instead of just while running the mocha tests, so I won't have to run tests twice each time.
VSCode runs the coverage and shows it to me, but it will not stop or verify breakpoints, how do I set it to properly debug?
Is it even possible?
My launch configuration:
{
"type": "node",
"request": "launch",
"name": "Coverge",
"program": "/usr/local/bin/nyc",
"args": [
"${workspaceFolder}/node_modules/mocha/bin/_mocha",
"-u",
"tdd",
"--timeout",
"999999",
"--colors",
"${workspaceFolder}/tests/*/*"
],
"skipFiles": [
"${workspaceFolder}/node_modules/**/*.js"
],
"env": {},
"outputCapture": "std",
"internalConsoleOptions": "openOnSessionStart"
}
I got your back bro.
Since NYC runs the subprocess as a spawn it would not work. But you can run a what is called a Compound Launch, which in practice runs 2 processes and the first one connects to the second one that is there waiting, listening to a port (9229 by default) and then voila.
{
// 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",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Coverage",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/node_modules/.bin/nyc",
"args": [
"-x","test","--reporter=lcov","--reporter=text",
"node", "--inspect-brk",
"./node_modules/.bin/mocha", "test", "--recursive", "--timeout=300000"
]
}
,
{ // https://code.visualstudio.com/Docs/editor/debugging#_launch-versus-attach-configurations
"type": "node",
"name": "AttachMocha",
"request": "attach",
"port": 9229
}
],
// https://code.visualstudio.com/Docs/editor/debugging#_compound-launch-configurations
"compounds": [
{
"name": "NYC/Mocha",
"configurations": ["AttachMocha", "Coverage"]
}
]
}
you are going to see NYC/Mocha on your debug run list.

Debugging doesn't work in Visual Studio Code 1.19.3

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.

Debug grommet-cli sample-app in vscode

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",
//...
}
]

VS Code nodejs distant debugging: breakpoints are getting ignored

I'm trying to set up a distant debug with VS Code on a node.js (7.1.0) project.
I launch my dev app with pm2:
{
"apps": [{
"name": "my-app-dev",
"script": "app.js",
"watch": true,
"node_args": ["--inspect=9229", "--nolazy"],
"ignore_watch": ["assets/images/", ".tmp/", ".git/"],
"watch_options": {
"usePolling": true
}
}]
}
this is the .vscode/launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node2",
"request": "attach",
"name": "attach",
"port": 9229,
"address": "my.app.local",
"restart": true,
"diagnosticLogging": true,
"sourceMaps": false
}
]
}
When I start the debugger I successfully get attached Debugger attached.
The problem is my breakpoints are getting ignored: Unverified breakpoint
finally found a solution by adding
"localRoot": "${workspaceRoot}/api",
"remoteRoot": "/srv/www/my-app/api"
to my launch.json.
If someone can explains why its needed :o

Resources