node.js - 如何在 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(无论如何不允许Vscode)，skipFiles(它确实会跳过文件，除非我明确介入所以它有效，但不能解决问题)。我也看过 Debug Node.js Async/Await with Typescript+VSCode但我已经尝试过 smartStep 并且这个问题的问题是老问题并且已经在许多版本之前解决了。

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

更新:当我绕过 Vscode 调试/配置并在 Chrome 和 vanilla 终端(即 react-native run-ios)中进行调试时，它工作得很好。所以它与 Vscode 或其配置有关。

更新 2:我的目标是 ES2017，这是我的 tsconfig:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "jsx": "react-native",
    "strict": true,
    "noImplicitAny": false,
     "moduleResolution": "node",
     "baseUrl": "./app",
     "paths": {
       "assets/*": ["assets/*"],
       "components/*": ["components/*"],
       "navigation/*": ["navigation/*"],
       "utils/*": ["utils/*"],
       "views/*": ["views/*"],
       "types/*": ["types/*"],
       "services/*": ["services/*"],
       "state/*": ["state/*"],
       "constants/*": ["constants/*"]
     },
     "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

Answer 1

对于调试，我建议您使用 ndb ( Node 调试器)来自谷歌。它在您的 Node 项目上使用 Google Chrome 的开发工具。

当您正确安装了 ndb 后，您可以通过以下方式简单地运行您的文件:ndb node index.js 等。

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

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

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

如果你想运行 TypeScript 文件，你可能应该在你的 package.json 中添加 ts-node 作为 devDependency，这将允许你运行 TypeScript 文件而无需编译。

您可以像这样使用 ndb:ndb ts-node index.ts

---

仍然，任何调试器 atm 都不能完全支持 TypeScript。如果您需要完整的调试功能，您可能应该调试已编译的 JavaScript 版本 - 您可以美化您的 tsconfig.json 以使代码具有一定的可读性