使用 Typescript+VSCode 调试 Node.js Async/Await
Posted
技术标签:
【中文标题】使用 Typescript+VSCode 调试 Node.js Async/Await【英文标题】:Debug Node.js Async/Await with Typescript+VSCode 【发布时间】:2017-05-29 10:17:06 【问题描述】:我已经检查了以下答案:
async await with nodejs 7
How to debug async/await in visual studio code?
但是两者都没有解决我的问题。
我希望能够使用 Node.js v7.4.0 从 VSCode 调试本机 Async/Await,而无需使用可怕的 Typescript 转译版本。我能够让 Typescript 输出正确的代码,即没有 __awaiter 等。但是,一旦我尝试调试代码,所有转译的状态机代码都会出现!?所以我可以调试代码,它只是不是我要调试的代码。有没有办法阻止被调试的代码有转译的状态机代码?
这是我的配置文件:
tsconfig.json
"compilerOptions":
"target": "es2017",
"module": "commonjs",
"noImplicitAny": false,
"sourceMap": true,
"outDir": "lib",
"noUnusedParameters": false,
"noUnusedLocals": false,
"skipLibCheck": true
//"importHelpers": true
,
"exclude": [
"node_modules"
]
launch.json
"name": "Launch",
"type": "node",
"request": "launch",
"program": "$workspaceRoot/node_modules/jest-cli/bin/jest.js",
"stopOnEntry": false,
"cwd": "$workspaceRoot",
//"preLaunchTask": "tsc",
"runtimeExecutable": null,
"args": [
"--runInBand"
],
"runtimeArgs": [
"--harmony-async-await",
"--no-deprecation"
],
"env":
"NODE_ENV": "development"
,
"console": "integratedTerminal",
"sourceMaps": true,
"outFiles": [
"$workspaceRoot/lib/**/*.js"
],
"skipFiles": [
"node_modules/**/*.js",
"lib/**/*.js"
]
为了进一步说明我的意思,这里是输出 javascript 中的一段 sn-p 代码:
let handler = subscription.messageSubscription.handler;
debugger;
await handler(message.message, context);
但是调试时它看起来像这样:
case 4:
handler = subscription.messageSubscription.handler;
debugger;
return [4 /*yield*/, handler(message.message, context)];
case 5:
【问题讨论】:
【参考方案1】:我将 "smartStep": true
添加到 launch.json 并根据需要调试等待/异步模式(使用 Node v8.4.0)。
这是我的 launch.json:
"version": "0.2.0",
"configurations": [
"type": "node",
"request": "launch",
"name": "Launch Program",
"program": "$workspaceRoot/src/main.ts",
"cwd": "$workspaceRoot",
"console": "integratedTerminal",
"outFiles": [ "$workspaceRoot/dist/*.js" ],
"sourceMaps": true,
"preLaunchTask": "build",
"smartStep": true
]
更多详情请见https://code.visualstudio.com/updates/vApril#_smart-code-stepping。
这不是一个完美的解决方案,因为使用 smartStep 您无法调试到库代码中,因此如果要调试到库中,您必须手动注释掉这个选项。也许有人知道如何解决这个小不便。
【讨论】:
【参考方案2】:终于想通了。使用 Typescript 和 Jest。分享我所拥有的,希望它会对某人有所帮助。节点 11,VScode 1.34.0
launch.json:
"version": "0.2.0",
"configurations": [
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "$workspaceFolder/node_modules/.bin/jest",
"args": ["-i", "$relativeFile"],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"sourceMaps": true,
"smartStep": true,
"windows":
"program": "$workspaceFolder/node_modules/jest/bin/jest"
]
tsconfig.json:
"compileOnSave": false,
"compilerOptions":
"baseUrl": ".",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"inlineSources": true,
"sourceRoot": "/",
"declaration": false,
"module": "es2015",
"esModuleInterop": true,
"resolveJsonModule": true,
"stripInternal": true,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2017",
"typeRoots": ["node_modules/@types"],
"lib": ["es2018", "dom", "esnext.asynciterable"],
"types": ["chrome", "node", "jest"]
但这仅在某些情况下有效。如果您可以将您的应用程序编译为 JS ES2017 就可以了。 angular 不能编译成那个 es 版本,所以。它仅适用于一些测试文件。 angular compile 不输出 es2017 非常令人沮丧。并且在未来很多年都不会。
【讨论】:
以上是关于使用 Typescript+VSCode 调试 Node.js Async/Await的主要内容,如果未能解决你的问题,请参考以下文章
使用 VSCODE 进行调试无法在 Webpack + Typescript + 无框架中工作
如何在 Vscode 中的 Typescript 中等待后调试代码?