[英]visual studio code - node js error with typescript debug configuration
[英]Visual Studio Code - Debug Node JS through TypeScript
我目前正在尝试从 Visual Studio Code 调试用 TypeScript 编写的 Node JS 应用程序,但我遇到了一些问题。 我的情况类似于此问题中描述的情况
|-- .settings
|----- launch.json
|-- bin
|----- app.js
|----- app.js.map
|--src
|----- app.ts
|-- tsconfig.json
然后我有tsconfig.json文件:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"outDir": "bin",
"rootDir": "src",
"sourceMap": true
}
}
app.ts :
console.log("Hello World!");
启动.json :
{
"version": "0.1.0",
"configurations": [
{
"name": "Launch type",
"type": "node",
"program": "src/app.ts",
"stopOnEntry": false,
"sourceMaps": true,
"outDir": "bin"
}
]
}
然后我从命令行手动编译项目
tsc
所以我在bin目录中得到了两个文件。 我在app.ts上设置了一个断点,最后使用F5运行解决方案,应用程序在正确的行启动和停止,但在JS文件而不是TS文件上:为什么???
我是在做错事还是试图实现不可能的目标?
非常感谢您的帮助! :)
编辑
我刚刚在GitHub 上分享了我的项目,以使事情变得更容易! 可以的话就看看吧! :)
这是绝对可能的。
最可能的原因是 node.js 使用生成的 map.js 文件找不到对应的 ts 文件。 您可以尝试在 tsconfig.json 中指定“sourceRoot”以指向项目的根目录:
sourceRoot: "/Users/SomeUser/projects/test"
就我个人而言,我更喜欢为此目的使用 gulp,在我的情况下,它看起来像这样(注意 - 我在这里没有通过使用 node.js 全局变量 '__dirname' 来硬核 sourceRoot 路径):
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"))]);
});
之后检查生成的 map.js 文件。 它应该在开头包含类似这样的内容:
"sources":["src/app.ts"]
最后:
"sourceRoot":"/Users/SomeUser/projects/test"
组合在一起时,它们必须指向 app.ts 文件的有效位置。 如果不是 - 相应地调整 sourceRoot。
[编辑]
以下是与您的项目相同的项目部分(没有 gulp) - 我可以在我的机器上进行调试。
启动.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/**"
]
}
并在 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"
}
[编辑]
我已经对您的 git 存储库进行了以下小更新,以便能够在本地调试它。
在根文件夹中添加 package.json,并指定 tsc 作为依赖项(我更喜欢本地安装):
{
"name": "123",
"namelower": "123",
"version": "0.0.1",
"private": true,
"dependencies": {
},
"devDependencies": {
"typescript": "latest"
}
}
然后转到您的 git "stackoverflow" 根文件夹并在命令提示符下运行:
npm install
将 tasks.json “命令”行更改为:
"command": "${workspaceRoot}/node_modules/typescript/bin/tsc",
完成这些步骤并构建项目后,我能够在 app.ts 中放置一个断点,并且 VSCode 在运行时停止(F5)
[更新]
与windows兼容的tasks.json版本:
{
"version": "0.1.0",
"command": "tsc",
"showOutput": "always",
"windows": {
"command": "node.exe"
},
"args": ["${workspaceRoot}\\node_modules\\typescript\\bin\\tsc.js"],
"problemMatcher": "$tsc"
}
希望这可以帮助。
2022 年7 月不需要额外的东西(如 gulp 等)
步骤1:
只需全局安装ts-node
:
npm i -g ts-node
第2步:
在 launch.json (VSCode) 中添加新配置。 以下是针对 macOS 的; 对于其他操作系统,相应地修改runtimeExecutable
属性:
{
"version": "0.2.0",
"configurations": [
{
"name": "TypeScript Debugging",
"type": "node",
"request": "launch",
"args": ["${relativeFile}"],
"cwd": "${workspaceRoot}",
"runtimeExecutable": "/opt/homebrew/bin/ts-node"
}
]
}
第 3 步:
打开要调试的 TypeScript 文件并设置断点。
第4步:
然后单击左侧的“运行和调试”。
备份: tsconfig.json
{
"compilerOptions": {
"target": "esnext",
"lib": ["ESNext", "DOM"],
"module": "esnext",
"esModuleInterop": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"sourceMap": true
}
}
这就是我调试我的 typescript (express) 项目的方式。 使用 ts-node 你不必手动编译。 使用这个配置我直接在我的打字稿文件中调试。 希望这可以帮助某人。
{
"version": "0.2.0",
"configurations": [
{
"name": "Current TS File",
"type": "node",
"request": "launch",
"args": ["${workspaceRoot}/src/app.ts"],
"runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
"sourceMaps": true,
"cwd": "${workspaceRoot}",
"protocol": "inspector"
}
]
}
在试图弄清楚如何使用 aws Lambda 调试 TS+nodejs 时遇到了同样的问题。 看起来ts-node-dev
包在监视TS 文件更改方面比nodemon
快。
npm install ts-node-dev --save-dev
最后在launch.json
中添加以下配置:
{
"version": "1.0.0",
"configurations": [
{
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"name": "Local Server",
"restart": true,
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/ts-node-dev",
"skipFiles": [
"<node_internals>/**"
],
"type": "node",
"runtimeArgs": [
"--respawn"
],
"args": [
"${workspaceFolder}/src/script/local.server.ts"
]
}
]
}
按F5
应该使用本机http
或express/koa/hapi...
等启动本地服务器。现在您可以在代码中设置断点。 ts-node-dev
还将在每次保存时观察 TS 文件更改并重新加载服务器。
如果您碰巧使用aws lambda
开发,我为此包装了一个小型库
https://github.com/vcfvct/ts-lambda-local-dev
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.