如何在 Visual Studio 代码中调试异步/等待？答案

【问题标题】：How to debug async/await in visual studio code?如何在 Visual Studio 代码中调试异步/等待？
【发布时间】：2016-10-12 18:30:03
【问题描述】：

我想在 Visual Studio 代码中调试包含 async/await 的 js 文件，但它提醒我 vscode 不支持它。如何让 vscode 支持 async/await？

【问题讨论】：

async/await 不是 ES7 的一部分。
我建议只使用浏览器的调试器。（Chrome 很棒）这通常是一种更流畅的体验，并且您正在调试正在使用的实际文件。

标签： javascript async-await visual-studio-code

【解决方案1】：

截至目前，在 2019 年最新的 VSCode 支持 async/await 调试，只是想分享解决方案，以防止 VSCode 通过“async_hooks.js" 和 "inspector_async_hook.js" 文件在调试 nodejs 应用程序期间。

如何：

1）在vscode中按ctrl+p，输入“launch”，选择“open launch.json”

2）打开“launch.json”后，只需添加到配置部分：

"skipFiles": [
    "inspector_async_hook.js",
    "async_hooks.js"
  ]

或更通用的版本：

"skipFiles": ["<node_internals>/**"]

所以你最终的 json 应该看起来像这里：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}\\index.js",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

完成这些步骤后，您可以在调试模式下按 F11 后看到您真正的异步方法。

【讨论】：

【解决方案2】：

目前您可以在 Node.js 7 中使用 async/await 或使用 --harmony 标志的最新版本，您可以通过以下方式配置您的 vscode 调试器（launch.json）来运行和调试 async/await Nodejs 代码。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Node 7 Async/Await",
            "program": "${workspaceRoot}/main.js",
            "cwd": "${workspaceRoot}",
            "runtimeArgs": [
                "--harmony",
                "--no-deprecation"
            ]
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Attach to Process",
            "port": 5858
        }
    ]
}

您必须通过启动脚本文件更改程序。

【讨论】：

使用 ES6/ES7 运行调试器似乎对我不起作用。它似乎无法调试 ES6/ES7 代码。有什么想法吗？
您在哪里找到这些配置的，请您分享文档链接

【解决方案3】：

我在 VS Code 使用 TypeScript 调试 Node 项目时遇到了严重的性能问题，无法使用，所以我发现更改 protocol=='inspector'并以es2017 为目标提供了快速可靠的调试体验。这是我使用的配置...

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/lib/main.js",
            "protocol": "inspector",
            "runtimeArgs": [
                "--harmony",
                "--no-deprecation"
            ],
            "outFiles": [
                "${workspaceRoot}/lib/**/*.js"
            ],
             "skipFiles": [
                "${workspaceRoot}/node_modules/**/*.js"
            ],
            "smartStep": true
        }
    ]
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es2017", 
    "module": "commonjs",
    "declaration": true, 
    "sourceMap": true,   
    "outDir": "lib",
    "lib": [
      "dom",
      "es2017"
    ],
    "suppressImplicitAnyIndexErrors": true,
    "allowSyntheticDefaultImports": true  
  },
  "compileOnSave": true,
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src"
  ]
}

【讨论】：

【解决方案4】：

您可以使用 Node.js --inspect 选项在 Chrome 中调试您的代码。就像这样：

# node --inspect app/app.js

然后打开 Chrome：chrome://inspect。太酷了。
您可以在this doc中指定。

【讨论】：

【解决方案5】：

在我们获得 VSCode 对该主题的支持之前，您可以尝试将结果放入这样的 var 中：

var results = async function();

并检查结果中的值

【讨论】：