Visual Studio Code - Debug Node JS via TypeScript
I'm currently trying to debug a Node JS application written in TypeScript from Visual Studio Code and I'm running into some issues. I have a situation similar to the one described in this question
|-- .settings
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|--src
|----- app.ts
|-- tsconfig.json
Then I have tsconfig.json file:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"outDir": "bin",
"rootDir": "src",
"sourceMap": true
}
}
The 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 compile the project manually from the command line
tsc
So I got two files in the bin directory . I set a breakpoint on app.ts and finally run the solution with F5 , the app starts and stops on the right line, but on the JS file instead of the TS : why?
Am I doing something wrong or trying to achieve the impossible?
Thank you for your help! :)
edit
I just shared my project on GitHub to make things easier! Check it out, if you can! :)
Absolutely possible.
The most likely reason is that node.js cannot find the corresponding ts file using the generated map.js file. 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, in my case it looks like this (note that I don't harden the sourceRoot path by using the node.js global variable '__dirname' here):
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, check the generated map.js file. At the beginning it should contain the following:
"sources":["src/app.ts"]
finally:
"sourceRoot":"/Users/SomeUser/projects/test"
When grouped together, they must point to a valid location of the app.ts file. If not, adjust sourceRoot accordingly.
[edit]
Below is the exact same part as your project (without gulp) - I can debug that part on 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 build the task in task.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 have made the following minor update to your git repository to be able to debug it locally.
Add a package.json in the root folder and specify tsc as a dependency there (I prefer a local install):
{
"name": "123",
"namelower": "123",
"version": "0.0.1",
"private": true,
"dependencies": {
},
"devDependencies": {
"typescript": "latest"
}
}
Then go to your git "stackoverflow" root folder and run in command prompt:
npm install
Change tasks.json "command line" to:
"command": "${workspaceRoot}/node_modules/typescript/bin/tsc",
After completing these steps and building the project, I was able to put a breakpoint in app.ts and VSCode stopped on it (F5) while running
[renew]
Windows-compatible task.json version:
{
"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.