在Vscode中的Typescript中等待后如何调试代码?

时间:2019-04-26 07:57:09

标签: node.js typescript react-native visual-studio-code async-await

我正在使用Vscode 1.33.1,Node 11.12,Typescript 3.4.3,vscode-chrome-debug-core 6.7.46,并且正在尝试调试React Native项目。

只要我不打await,一切都会很好。但是,当我命中包含await的行时,我没有命中await行(包括await行)之后的任何断点。代码正常运行,但是调试器陷入混乱。如果我在await行的前面放置一个断点并尝试进入/移出/跳出,它会跳到难看的index.bundle代码中。

这种情况发生在我的应用中的多个位置,因此也不是孤立的情况。

这是我在launch.json中的活动配置:

{
    "name": "Debug iOS (sim)",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react",
    "smartStep": true,
    "skipFiles": [
        "${workspaceFolder}/node_modules/**/*.js",
        "${workspaceFolder}/lib/**/*.js",
        "<node_internals>/**/*.js"
      ]
},

从配置中可以看出,我已经尝试过smartStep(无论如何都不允许使用该代码。)skipFiles(除非我明确介入,否则它确实会跳过文件,因此它可以工作,但不能解决问题)。我也见过Debug Node.js 7 Async/Await with Typescript+VSCode,但是我已经尝试过smartStep,而且这个问题的关注已经很久了,许多版本已经解决了。

如何正确调试包含await的Typescript代码?

更新:当我绕过Vscode调试/配置并在Chrome和普通终端(即react-native run-ios)中调试时,它可以完美运行。因此,这与Vscode或其配置有关。

1 个答案:

答案 0 :(得分:2)

对于调试,我建议您使用Google的ndb(节点调试器)。它在您的Node项目上使用Google Chrome中的开发工具。

正确安装了ndb后,您可以通过ndb node index.js等运行文件。

它将自动启动调试器并运行您的命令:

Screenshot 图片来源:https://github.com/GoogleChromeLabs/ndb/blob/v1.1.4/README.md

我个人认为这比VSCode调试器好得多。

要运行TypeScript文件,您可能应该在ts-node中将package.json添加为devDependency,这将允许您运行TypeScript文件而不进行编译。

您可以这样使用ndb,然后:ndb ts-node index.ts


不过,任何调试器atm都不完全支持TypeScript。如果您需要完整的调试功能,则可能应该调试已编译的JavaScript版本-您可以对tsconfig.json进行修饰,以使代码更具可读性