Async debugging problem with node and vs code - node.js

My breakpoints in VS code keep jumping - I am using node.JS and when I run the debugger my breakpoint goes from line 30 approximately to line 130 or so at the bottom of the file with the export function.
The project I am working on is a service layer so it is pretty much all async.
async superspecficfunnamedoeshere(blah, accessToken) {
console.log('example')
Breakpoint goes on above line^
Bunch more code goes here, here is the function etc , the breakpoint is just under the function declaration
}
}
export thing from thing
^^ breakpoint moves to bottom export statement.
Putting a breakpoint in this console.log line just completely skips the entire function and goes to the export statement at the bottom.
Here is my launch.json- at first it was failing at the import statement until I configured it to work with babel:
{
// 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": "thing1",
"program": "${workspaceFolder}/src/app.js",
"protocol": "inspector",
"runtimeArgs": [
"--harmony",
],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/babel-node",
"envFile": "${workspaceFolder}/.env",
"outFiles": [ "${workspaceFolder}/bin/**/*.js" ],
}
]
}
lastly here is my babel config
{ "env": {
"development": {
"sourceMaps": true,
"retainLines": true
}
},
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
How can I get debugging async functions to work?
I've already tried going through the vs code docs, and I'm a little confused on how source maps work. But I have implemented some of the suggestions there.
There is no error message just the breakpoint moving to the end of the file from the console.log line where the breakpoint is much earlier (without anything to show for it)

Related

Setting VSCode to transpile typescript and start debugging with NodeJS with one F5 press?

Things seem unnecessarily complicated with VSCode+TypeScript+NodeJS. In a C# project in VS, just pressing F5 compiles the project and start debugging. How can I set VSCode do the same thing for TypeScript+NodeJS? What did I do wrong in the following?
I have searched Google and followed the top search result, but pressing F5 with the "test.ts" tab being the current tab seems doing nothing. It briefly shows the debugging tool bar at the top-right, and it disappears, with no output. I see no "test.js". If I press Ctrl+Shift+B, I see the "test.js", but all the output I get is
> Executing task: tsc -p c:\......\tsconfig.json <
Terminal will be reused by tasks, press any key to close it.
and not the output "101" I expected. The following is all the file contents in the directory:
test.ts
var a:number = 101;
console.log(a);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true
}
}
.vscode\launch.json (auto-created when I cliekd the link)
{
// 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": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"preLaunchTask": "tsc: build - tsconfig.json",
"program": "${file}",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
tasks.json (auto-created by selecting the menu)
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"problemMatcher": [
"$tsc"
],
"group": {
"kind": "build",
"isDefault": true
},
"label": "tsc: build - tsconfig.json"
}
]
}
That's what npm custom scripts are for
In your package.json file:
"scripts": {
"start": "tsc && node test.js"
}
Then you can run npm run start where start is the name of the script. You may want to have several scripts, one for each use case
With some npm scripts in your package.json file, if you try to debug a Node.js session on Visual Studio Code it will prompt you which script you want to use and it will run with just pressing F5.

vs code: debug typescript running in nodejs, while specifying source root

I would like to debug my typescript code (which runs in NodeJS) with VSCode.
The following code is my starting point and works just fine.
Typescript code:
//src/index.ts
console.log('line 1');
console.log('line 2');
The compiler settings:
//tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
And the launch configuration
//.vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}/src/index.js"
}
]
}
In the above setup, I can add breakpoints in the typescript code and then start debugging.
All typescript source code is in a directory called src/. I would like to specify this in the compiler settings by adding the following config option:
"compilerOptions": {
//...
"sourceRoot": "src"
It still compiles just fine and when executed, it prints "line 1", "line 2".
However, the breakpoints no longer work. I looked at the generated sourcemaps and they specify a path "sourceRoot":"src". I guess that this breaks the sourcemap lookup. Since the original sources are in the same folder as the generated output.
How do I configure this correctly in the compiler?
The easiest way I have found to debug ts in vscode is to use ts-node
Then I use ts-node in my launch script as so
{
"version": "0.2.0",
"configurations": [
{
"name": "ts node inspector",
"type": "node",
"request": "launch",
"args": ["${workspaceRoot}/src/server.ts"],
"runtimeArgs": ["-r", "ts-node/register"],
"cwd": "${workspaceRoot}",
"protocol": "inspector",
"internalConsoleOptions": "openOnSessionStart",
"env": {
"TS_NODE_IGNORE": "false"
}
}
]
}
The documentation explains that sourceRoot:
Specifies the location where debugger should locate TypeScript files
instead of source locations. Use this flag if the sources will be
located at run-time in a different location than that at design-time.
The location specified will be embedded in the sourceMap to direct the
debugger where the source files will be located.
So I have been using it incorrectly.

How to debug AWS Lambda Node.js locally using serverless module?

I am completely new to AWS and serverless etc. To speed up development I would like the ability to debug my application locally.
Following this article Running and Debugging AWS Lambda functions locally I have attempted to achieve just that.
In Visual Studio Code when I run the debug configuration, the application exits instantly without error (A break-point is set on the declaration and initialisation of the 'content' variable). I am not sure I have the function name correct. I am trying to enter at the main 'handler' function defined in 'index.js' as:
exports.handler = (event, context, callBack) =>
{
let bIsPostRequest = false, bIsPutRequest = false, bIsGetRequest = false, bIsDelRequest = false;
let content = "";
...
Here is my 'launch.json' configuration file:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Debugger",
"program":
"${workspaceFolder}\\node_modules\\serverless\\bin\\serverless",
"args":[
"invoke",
"local",
"-f",
"index.handler", // function name
"--data",
"{}"
],
"outFiles": [
"${workspaceFolder}\\index.js"
]
}
]
}
Also, I am not 100% certain on the definition of 'outfiles' in the configuration. I have come to the conclusion it is the file(s) I am trying to debug, however if this is the case 'outfiles' does not seem a fitting name to me.
The local environment I am working in is a windows one.
After coming across this post I managed to get the debugger working. Here is the configuration to match my needs:
const lambdaLocal = require('lambda-local');
var lambdaFunc = require("./index.js");
lambdaLocal.execute({
lambdaFunc: lambdaFunc,
lambdaHandler: "handler",
event: {
context: {
"resource-path": "/products",
"http-method": "GET"
},
"body-json": {
name : "ProductA"
}
}
}).then(function(done) {
console.log(done);
}).catch(function(err) {
console.log(err);
});
I saved this file as 'debugLocal.js' in my main working directory. The launch.json file now looks as follows:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Debugger",
"program": "${workspaceFolder}\\debugLocal.js"
}
]
}
So far everything appears to be replicated fairly well. One thing to note is the file paths on includes had to be changed slightly i.e. require("./js/inc/globalDefines.js"); instead of require("js/inc/globalDefines.js");

Debugging an Electron app : Breakpoints not working ("Breakpoint ignored because generated code not found")

I've got a basic HelloWorld app based on the electron-hello-world project running on VSCode and able to launch a debug session and the app starts up fine.
I've got a breakpoint set on main.js but it appears to be greyed out with a message:
Breakpoint ignored because generated code not found (source map problem?)
Here is my launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
"program": "${workspaceRoot}/main.js",
"port": 9222,
"sourceMaps": true,
"diagnosticLogging": true,
"outFiles": [
"${workspaceRoot}"
]
}
]
}
Any help would be much appreciated.
If your generated code is present in "${workspace Root}" then outFiles should be "outFiles": [ "${workspaceRoot}/*.js" ].
For more info link

Using "preLaunchTasks" and Naming a Task in Visual Studio Code

According to the documentation, it is possible to launch a program before debugging:
To launch a task before the start of each debug session, set the preLaunchTask to the name of one of the tasks specified in tasks.json.
I've not seen example syntax of a "named" task, but the schema documentation reveals a property called taskName. I tried using that to link my launch.json preLaunchTasks to the task, but it didn't work. When I launched my program, Visual Studio Code reported this error:
Could not find a unique task 'launch-core'. Make sure the task exists and that it has a unique name.
My custom "named" task looked something like this:
{
"taskName": "launch-core",
"version": "0.1.0",
"command": "C:\\utils\\mystuff.exe",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
}
I then tried changing the property name from taskName to just name, based on this link. That also didn't work.
Intellisense gives no suggestions of how to name a task.
Does anybody know how to uniquely name a task in the tasks.json file? What is the syntax? What is the property name?
Ultimately I'd like to execute two or three node.js processes before my own node.js app is launched. For example, I'd like to have the following three apps launched before my app is launched into the debugger:
sh -c 'cd ./manager/ && node manager.js'
sh -c 'cd ./adapter/ && node adapter.js'
sh -c 'cd ./core/ && node core.js'
If I'm working on a Windows box, my task might look something like this:
{
"taskName": "core-launch",
"version": "0.1.0",
// The command is tsc. Assumes that tsc has been installed using npm install -g typescript
"command": "start",
// The command is a shell script
"isShellCommand": true,
// Show the output window only if unrecognized errors occur.
"showOutput": "silent",
// args is the HelloWorld program to compile.
"args": [
"ACD-Manager",
"/B",
"/D",
"./manager/",
"node",
"manager.js"
]
}
The above task using using the cmd start capability. I'm not sure yet how to make several node tasks launch instead of one, but I can't even get one task to launch because of this task-naming issue.
How do I name a task in the tasks.json file?
FWIW, I'm using VS Code 1.20.1 and here's how I got my preLaunchTask to work:
In launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
...
"preLaunchTask": "npm: build",
}
]
}
In my package.json:
{
...
"scripts": {
"build": "tsc"
...
}
}
So, if it's still relevant, or if someone finds this thread with the same problem, I've just figured it out how it works:
In the tasks.json, you need to create a 'tasks' array - code hint will help you with that - which holds an array of objects. Inside an object, you can have the 'taskName' key-value pair.
Example:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"args": ["run-script", "webpack"],
"showOutput": "always",
"tasks": [
{
"taskName": "runwebpack",
"suppressTaskName": true
}
]
}
In my case, I had to run the npm run-script webpack command before running my project.
In the launch.json file, the "preLaunchTask": "runwebpack" will work now.
Note: the suppressTaskName is true in my example. Omitting it, or setting it to false will result in VS Code appending the taskName after the command.
A more general approach would be something like this:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"args": ["run-script"],
"showOutput": "always",
"tasks": [
{ "taskName": "webpack" }
]
}
With the latter example, you can extend the tasks array with other scripts to be run also.
Hint for my usage: npm run-script fetches what to do from the package.json file's scripts object.
Edit: this works with VS Code 1.3.1
For version 2.0.0 configuration you now use label instead of taskName.
package.json:
...
"scripts": {
"tsc": "tsc",
...
}
...
launch.json (My source is in the src directory and tsc compiles to the dist directory):
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"preLaunchTask": "Compile",
"name": "Launch Program",
"program": "${workspaceFolder}/src/index.ts",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"protocol": "inspector",
"sourceMaps": true
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "Compile",
"type": "npm",
"script": "tsc",
"problemMatcher": []
}
]
}
For vscode 1.36.1 (1.36.1):
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "build:tsc",
"type": "npm",
"script": "build:tsc"
},
{
"label": "clean",
"type": "npm",
"script": "clean"
},
{
"label": "build",
"dependsOrder": "sequence",
"dependsOn": ["clean", "build:tsc"]
}
]
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "${workspaceFolder}/dist/main.js",
"preLaunchTask": "build",
"outFiles": ["${workspaceFolder}/dist/**/*.js"],
"console": "integratedTerminal"
}
]
}
Before running node ${workspaceFolder}/dist/main.js, the preLaunchTask will run build task firstly which includes two subtasks: clean and build. It will run clean task firstly, then run build task.
You can specify the label of a task to preLaunchTask option.
The question title is:
"Using “preLaunchTasks” and Naming a Task in Visual Studio Code
I needed to define preLaunchTask***s***.
You can config multiple tasks using the dependsOn property described here
For example, a compound task in your tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "Client Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/client"
}
},
{
"label": "Server Build",
"command": "gulp",
"args": ["build"],
"options": {
"cwd": "${workspaceRoot}/server"
}
},
{
"label": "Build",
"dependsOn": ["Client Build", "Server Build"]
}
]
}
You can find more information about naming tasks here.
I've only really seen the taskName used in relation to Gulp; I'm sure there are others but nothing that I have much insight into. Perhaps this can get you off to a start with what you already have?
Run a pre-launch task in VSCODE

Resources