How to call API from backend under vscode debugger? - node.js

How can I call an API which is being served by the vscode debugger?
I would usually call http://localhost:3000/api/plugins, but clearly my project isn't served on that port. My launch.json look like this:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/server/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false,
"outDir": null
},
and the output from the debug console:
node --debug-brk=12834 --nolazy server\app.js
Debugger listening on [::]:12834
MongoDB Connection Succesful
I have tried the API with Postman on both localhost:12834 and localhost:5858 (which is the port in the attach configuration - neither work...

In visual studio code, you can debug node.js code with its inbuilt debugger. For that you don't need to call api with the debugging port(In your case 12834). You just need to call with port defined in your express configuration (generally 3000).
You have to start debugging from visual studio code with F5. So, your debugging start for the project and you need to put break point on method, you want to debug. So, when your api call from frontend, you will get point on vscode.

Related

How do you debug a botpress-module installed in bot (botpress) in vs-code?

I have a (Botpress Framework v.10.51.1) bot and I have a botpress-module installed and linked to the bot, I wanted to debug the code in the botpress-module using vscode debugger,
I added the following to my vs-code launch.json and started my bot with the command npm start --debug
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"cwd": "${workspaceRoot}",
"port": 5859,
"program": "${workspaceRoot}/node_modules/botpress/bin/botpress",
"runtimeExecutable": "node",
"runtimeArgs": [
"--debug"
],
"args": [ "start" ],
"stopOnEntry": false
}
It's still not launching the debugger in vscode , What am i missing ? How do I do this?
It's hard to tell why it doesn't work on Botpress 10...
However, if you clone the latest version of the Botpress repo (12.0.1), you'll find the following launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"runtimeVersion": "10.11.0",
"request": "launch",
"name": "Debug App",
"program": "${workspaceFolder}/out/bp/index.js",
"cwd": "${workspaceFolder}",
"args": ["start"],
"protocol": "auto",
"env": {
"BP_MODULES_PATH": "${workspaceFolder}/modules:${workspaceFolder}/internal-modules",
"NODE_PATH": "${workspaceFolder}/out/bp",
"DEBUG": "bp:*"
},
"smartStep": true,
"outFiles": [
"${workspaceFolder}/out",
"${workspaceFolder}/modules/*/dist",
"${workspaceFolder}/private-modules/*/dist",
"!${workspaceFolder}/**/node_modules"
],
"console": "integratedTerminal",
"sourceMaps": true,
"autoAttachChildProcesses": true
}
]
}
Which works great for debugging the backend part of modules. It only requires you to start debugging with vscode using the "F5" key or by going to "Debug > Start Debugging".
I hope this information helps.
#Mahesh VSCode allows you to easily debug Botpress. I have created a tutorial that can help understand what are the different ways you can debug a problem in Botpress.
We will use VSCode debugging and Botpress logging capability to find and resolve bugs in our bot
Let us try to debug this, by adding 3 additional statements debugger, console.log & bp.logger.info in our ValidateEmailSignature custom action.
Please checkout below tutorials for more information
https://youtu.be/89dFPVbXxCw
https://aabingunz.com/debugging-in-botpress/

grunt.log.writeln is not displayed in vs code debug console

I am trying to debug gruntfile.js in VS Code. My launch.json looks like this:
{
"name: Grunt",
"type": "node",
"request": "launch",
"program": "/usr/local/bin/grunt",
"args": ["build_script"],
"cwd": "${workspaceRoot}",
"stopOnEntry": false,
"console": "internalConsole"
}
It works and I can debug it using breakpoints, etc., but the issue is that all outputs which are done with grunt.log.writeln(..), grunt.fail.warn(..) are not displayed in debug console.
How to make grunt to use the debug console for grunt.log?
Thanks

Error coming while debugging my typescript file:-> Debugger attached. Waiting for the debugger to disconnect

I have gone through plethora of articles online ,I have tried every possible way given online for this but nothing has worked for me till now.
I have reinstalled node,vs code,npm all again but nothing is working.
I am using ->
VSCode Version: 1.27.2
OS Version: Windows 10 Pro 64bit OS,x64-based processor
Node version: v8.11.3
My launch.json is as follows:-
{
// 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": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/dist/LeonardoGrader.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"runtimeExecutable": null,
"runtimeArgs": [
"--nolazy"
],
"env": {
"NODE_ENV": "development"
},
"sourceMaps": true,
"outFiles": ["${workspaceRoot}/dist/**/*.js"]
}
]
}
Any help will be appreciated.Thanks in advance.
That output means that your program ran to completion without ever stopping in the debugger. Either set some breakpoints or change the stopOnEntry option to true to stop the program on the first line of code.

Electron main and renderer process debug configuration

I'm using that repo https://github.com/SimulatedGREG/electron-vue
and trying to set up VS Code debug configurations like this
{ //main
"name": "Attach",
"type": "node",
"request": "attach",
"port": 5858,
"sourceMaps": true
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "attach",
"url": "http://localhost:9080",
"webRoot": "${workspaceRoot}/src"
}
and got messages like
Invalid responce {
"description": "node.js instance",
"devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"faviconUrl": "https://nodejs.org/static/favicon.ico",
"id": "0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e",
"title": "node",
"type": "node",
"url": "file://",
"webSocketDebuggerUrl": "ws://127.0.0.1:5858/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e"
}
for main and
connect ECONNREFUSED 127.0.0.1:9229
for render processes.
I know that both main and renderer procs are served by webpack 3 and webpack-dev-server 2 but cannot find debug configurations.
Debugging main process using Chrome using link like chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:5858/6c1d575a-d0f6-4ffa-9465-065ebc3d302c works but want to use VS Code.
What am I doing wrong? Can somebody share debug configurations for VS Code or WebStorm?
So this was a real pain to figure out, mainly because the vue electron boilerplate does some in-house management of the main and renderer process. The first challenge is to attach to the child process (main) as reliably as possible. The second challenge is to make sure breakpoints persist across sessions and things like that. This answer doesn't focus on the renderer process at all, because you can just debug that in the devtools console.
Put these two configurations in your launch.json, and add --no-lazy to the dev script in package.json to fix breakpoints. If you're just looking for the solution, you can probably stop reading here. If it didn't work, keep on reading.
{
"type": "node",
"request": "launch",
"name": "Electron: Main (npm)",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceFolder}/**/*.js"],
"runtimeExecutable": "npm",
"runtimeArgs": ["run-script", "dev"],
"outputCapture": "std",
"smartStep": true,
"sourceMaps": true,
"protocol": "inspector",
"port": 5858,
"timeout": 20000
},
{
"name": "Electron: Main (attach)",
"type": "node",
"request": "attach",
"cwd": "${workspaceFolder}",
"outFiles": ["${workspaceFolder}/**/*.js"],
"skipFiles": ["init.js"],
"smartStep": true,
"sourceMaps": true,
"protocol": "inspector",
"port": 5858,
"timeout": 20000
}
The first one can be executed with no additional actions needed. It will run the script via npm, and attach directly to the sub process with inspect port 5858.
The second script lets you run npm run dev from a terminal, and then attach. It may be convenient to use this one, if you're more used to it.
Now I will explain why I have used all the settings, in case things change and you're wondering if this is outdated.
"cwd": "${workspaceFolder}",
I could not reliably run the session without doing this. It still worked sometimes though.
"outFiles": ["${workspaceFolder}/**/*.js"],
I could not debug any files without this on.
"outputCapture": "std",
I did not get any output from dev-runner.js if I didn't have this set.
"smartStep": true,
When I restarted the session (especially using the npm variant), the breakpoints got unset and black. This option actually fixed it, but looking an this issue, I suspect you shouldn't normally have to use this option.
"sourceMaps": true,
If you're seeing gibberish code, you may want to add the following:
/**
* Adjust mainConfig for development settings
*/
if (process.env.NODE_ENV !== 'production') {
mainConfig.devtool = 'source-map' // <- THIS
mainConfig.plugins.push(
new webpack.DefinePlugin({
__static: `"${path.join(__dirname, '../static').replace(/\\/g, '\\\\')}"`
})
)
}
This option helps with that.
"protocol": "inspector",
Might as well. Legacy doesn't work.
"port": 5858,
This is the port of the child process, spawned by dev-runner.js
"timeout": 20000
Since we're waiting for a child process to finish spawning, it may take longer than 10 seconds to launch and then attach. I set it to 20 seconds, but you are free to lower it if your PC is fast enough. (default is 10s)
Further references in the world of bleeding edge software.
VS Code version: 1.21
Electron version: 1.8.7
Chromium: v59
Node: 8.2.1
you may need to use new inspect protocol in vs code with latest electron binary. It'll looks like
{
"type":"node",
"request":"launch",
"name":"Electron Main",
"runtimeExecutable":"${workspaceRoot}/node_modules/.bin/electron",
"args":[
"${workspaceRoot}/main.js",
"--remote-debugging-port=9333" //Set debugging port for renderer process
],
"protocol":"inspector" //Specify to use v8 inspector protocol
}
important piece is you are specifying protocol to use inspect instead of old node debug. I've wrote summary around this while ago at https://kwonoj.github.io/en/post/multi-target-dbg-electron-vscode/ .

Can I run/debug Heroku Node.js app locally with VSCode?

TL; DR
On Microsoft VSCode v1.6.1, how to:
Properly set runtime executable?
Properly pass Heroku arguments?
Run Heroku Node.js app?
Debug Heroku Node.js app?
Details
I have created a Heroku Node.js application, which is launched using the CLI command:
heroku local web
and successfully starts at port 5000.
I am trying to debug it using Microsoft Visual Studio Code, using the following launch.json configuration:
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/app.js",
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
"preLaunchTask": null,
"runtimeExecutable": "/usr/local/bin/heroku",
"runtimeArgs": [
"local web",
],
"env": {
"NODE_ENV": "development"
},
"console": "internalConsole",
"sourceMaps": false,
"outFiles": []
}
But VSCode is automagically passing --debug-brk argument to heroku, causing the error:
/usr/local/bin/heroku --debug-brk=23080 'local web' app.js
! `--debug-brk=23080` is not a heroku command.
! See `heroku help` for a list of available commands.
VSCode also does not find heroku command without its full path (seems like it is not loading PATH environment variable).
Any ideas about how to setup the editor?
The following solution works for me:
1) In your procfile add the parameter --debug to the node process
web: node --debug server.js
By default the debugger listens in the port 5858
2) Once you have the node process running, open VSCode and add the following configuration to your launch.json file
{
"type": "node",
"request": "attach",
"name": "Attach to Process",
"port": 5858
}
3) Finally, click the play button in VSCode with the option "Attach to Process" and it should debug your process.
The following solution worked for me.
In my package.json "scripts", I added:
"debug": "node --inspect-brk server.js"
Then, in launch.json I added an envFile entry to the default "Launch via NPM" configuration, which now looks looks like this:
{
"type": "node",
"request": "launch",
"name": "Launch via NPM",
"runtimeExecutable": "npm",
"runtimeArgs": [
"run-script",
"debug"
],
"port": 9229,
"envFile": "${workspaceFolder}/.env"
}
The above solution enables the VSCode debugger to run my server via an npm script, and my server runs with the env vars set in my .gitignore'd .env file, just like in the "regular" Heroku node.js workflow.
I struggled with this as for some reason the solution propsed didn't work for me. However, an alternate solution did so I thought I would share.
From the default debugging options in VS Code choose
Attach by Process ID
When you start the debugger with this configuration it should list available processes to attach to and one should be simply be server.js. This requires manually attaching each time, and if the other automatic attachment works for you that may be better, but this is still a workable solution.

Resources