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

Question

我正在使用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或其配置有关。

Answer 1

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

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

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

图片来源：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进行修饰，以使代码更具可读性