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

Posted 2023-03-07

【中文标题】如何在 Vscode 中的 Typescript 中等待后调试代码？

【英文标题】：How to debug code after await in Typescript in Vscode?

【发布时间】：2019-09-15 16:59:13

【问题描述】：

我正在使用 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（它确实会跳过文件，除非我明确介入所以它可以工作，但没有t 解决问题）。我也见过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
  

【问题讨论】：

您的目标是什么版本的 javascript？在将 Typescript 编译为 pre-es6 javascript 时，我个人遇到了调试问题，其中 async/await 被编译为生成器函数。

@JakeHolzinger 我的目标是 ES2017。

生成的 JavaScript 代码如何查看“等待”？

@MichaelDreher 很多 switches 和 cases 在彼此周围疯狂地跳跃。

您在生成的 javascript 中真的有 async 和 await 关键字吗？我赞同@JakeHolzinger 的经验，如果生成的 JS 不包含 async 和 await 关键字，则 VSCode 的调试器会像这样混乱，但如果包含，则可以正常工作。奇怪的是，您使用 ES2017 目标获得它。

【参考方案1】：

对于调试，我建议您使用 Google 的 ndb（节点调试器）。它在您的 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 以使代码更具可读性

【讨论】：

与同样基于 Chrome 调试器的 Vscode 调试器相比，ndb 究竟有什么更好的地方？