Visual Studio Code - Debugging Node JS via TypeScript

Question

I am currently trying to debug a Node JS application written in TypeScript from Visual Studio Code, but I have some problems. I have a situation similar to that described in this question

|-- .settings |----- launch.json |-- bin |----- app.js |----- app.js.map |--src |----- app.ts |-- tsconfig.json 

Then I have a tsconfig.json file:

 { "compilerOptions": { "module": "commonjs", "target": "es5", "outDir": "bin", "rootDir": "src", "sourceMap": true } } 

app.ts :

 console.log("Hello World!"); 

launch.json :

 { "version": "0.1.0", "configurations": [ { "name": "Launch type", "type": "node", "program": "src/app.ts", "stopOnEntry": false, "sourceMaps": true, "outDir": "bin" } ] } 

Then I will manually compile the project from the command line using

 tsc 

so I get two files in the bin directory . I set a breakpoint on app.ts and finally launched the solution with F5 , the application starts and stops on the right line, but on JS instead of TS : why ???

Am I doing something wrong or trying to achieve the impossible?

Many thanks for your help!:)

EDIT

I just shared my project with GitHub to make things easier! See if you can! :)

Answer 1

It is absolutely possible.

The most likely reason is that node.js cannot find the corresponding ts files using the generated map.js. You can try specifying "sourceRoot" in tsconfig.json to point to the root of your project:

 sourceRoot: "/Users/SomeUser/projects/test" 

Personally, I prefer to use gulp for this purpose, and in my case it will look like this (note - I do not hardcore the sourceRoot path here using the global variable node.js '__dirname'):

 var ts = require('gulp-typescript'); gulp.task('build.js.dev', function() { var tsProject = ts.createProject('tsconfig.json'); var tsResult = tsProject.src() .pipe(sourcemaps.init()) .pipe(ts(tsProject)); return merge([ //Write definitions //tsResult.dts.pipe(gulp.dest("bin")), //Write compiled js tsResult.js.pipe(sourcemaps.write("./", { sourceRoot: __dirname })).pipe(gulp.dest("bin"))]); }); 

After that, view the generated map.js. It should contain something like these lines at the beginning:

 "sources":["src/app.ts"] 

and in the end:

 "sourceRoot":"/Users/SomeUser/projects/test" 

When combined with each other, they must indicate the valid location of your app.ts file. If not, edit sourceRoot accordingly.

[EDIT]

Below are parts of the project that are identical to yours (without gulp) - so that I can debug my machine.

launch.json:

 { // Name of configuration; appears in the launch configuration drop down menu. "name": "Launch Server", // Type of configuration. "type": "node", // Workspace relative or absolute path to the program. "program": "${workspaceRoot}/src/app.ts", // Automatically stop program after launch. "stopOnEntry": false, // Command line arguments passed to the program. "args": [], // Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace. "cwd": "${workspaceRoot}", // Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH. "runtimeExecutable": null, // Optional arguments passed to the runtime executable. "runtimeArgs": ["--nolazy"], // Environment variables passed to the program. "env": { "NODE_ENV": "development" }, // Use JavaScript source maps (if they exist). "sourceMaps": true, // If JavaScript source maps are enabled, the generated code is expected in this directory. "outDir": "${workspaceRoot}/bin", "request": "launch" } 

tsconfig.json:

 { "compilerOptions": { "emitDecoratorMetadata": true, "experimentalDecorators": true, "moduleResolution": "node", "module": "commonjs", "target": "es6", "sourceMap": true, "outDir": "bin", "declaration": true, "noImplicitAny": true }, "exclude": [ "node_modules", "bin", ".vscode", "typings/browser.d.ts", "typings/browser/**" ] } 

And create a task in tasks.json:

 { "version": "0.1.0", // The command is tsc. Assumes that tsc has been installed locally using npm install typescript "command": "${workspaceRoot}/node_modules/typescript/bin/tsc", // 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": [], // use the standard tsc problem matcher to find compile problems // in the output. "problemMatcher": "$tsc" } 

[EDIT]

I made the following minor updates to the git repository so that it can be debugged locally.

Add package.json to the root folder and specify tsc there as a dependency (I prefer local installations):

 { "name": "123", "namelower": "123", "version": "0.0.1", "private": true, "dependencies": { }, "devDependencies": { "typescript": "latest" } } 

then go to the git root folder "stackoverflow" and run on the command line:

 npm install 

Change the tasks.json "command" command to:

 "command": "${workspaceRoot}/node_modules/typescript/bin/tsc", 

After completing these steps and creating the project, I was able to set a breakpoint in app.ts and VSCode to stop it at startup (F5)

[UPDATE]

Windows compatible version of task.json:

 { "version": "0.1.0", "command": "tsc", "showOutput": "always", "windows": { "command": "node.exe" }, "args": ["${workspaceRoot}\\node_modules\\typescript\\bin\\tsc.js"], "problemMatcher": "$tsc" } 

Hope this helps.