使用Typescript + VSCode调试Node.js Async / Await

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (38)

我检查了以下答案:

异步等待与nodejs 7

如何在visual studio代码中调试async / await?

然而,两者都没有解决我的问题

我希望能够使用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中有一段代码:

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:
提问于
用户回答回答于

我添加"smartStep": truelaunch.json并调试await / async模式根据需要工作(使用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您无法调试到库代码,因此如果要调试到库中,您可以手动注释掉该选项。也许有人知道如何解决这个小小的不便。

用户回答回答于

终于想通了。使用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版本。它仅适用于某些测试文件。角度编译不输出es2017是非常令人沮丧的。它不会在未来很多年里继续存在。

扫码关注云+社区

领取腾讯云代金券