在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（除非我明确介入，否则它确实会跳过文件，因此它可以工作，但不能解决问题）。我还看到了使用Typescript + VSCode调试Node.js异步/等待，但是我已经尝试过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

对于调试，我建议您使用ndbGoogle 的（Node Debugger）。它在 Node 项目上使用 Google Chrome 的开发工具。

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

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

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

我自己认为这比 VSCode 调试器要好得多。

当您想要运行 TypeScript 文件时，您可能应该将其添加ts-node为 devDependency package.json，这将允许您无需编译即可运行 TypeScript 文件。

那么你可以ndb这样使用：ndb ts-node index.ts

尽管如此，TypeScript 并没有在任何调试器 atm 中得到完美支持。如果您需要完整的调试功能，您可能应该调试已编译的 JavaScript 版本 - 您可以美化您的代码tsconfig.json以使代码具有一定的可读性