如何在 Visual Studio 代碼中調試異步/等待？

Question

我想在 visual studio 代碼中調試包含 async/await 的 js 文件，但它提醒我 vscode 不支持它。 我該怎么做才能使 vscode 支持異步/等待？

Answer 1

和現在一樣，2019年最新的支持async/await調試的VSCode，只是想分享解決方案，防止vscode通過“ async_hooks.js ”和“ inspector_async_hook.js ”“Step into”（按f11）進入async/await方法調試 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 后看到真正的異步方法。

Answer 2

目前，您可以在 Node.js 7 或最新版本中使用 --harmony 標志使用 async/await，您可以通過以下方式配置您的 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
        }
    ]
}

您必須通過啟動腳本文件更改程序。

Answer 3

我在使用VS Code調試Node項目時遇到了嚴重的性能問題，無法使用TypeScript ，因此我發現更改protocol=='inspector'並針對es2017可以提供快速可靠的調試體驗。 這是我使用的配置...

啟動文件

{
    "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
        }
    ]
}

配置文件

{
  "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"
  ]
}

Answer 4

似乎沒有一個解決方案提到我遇到的問題。

我將jest與typescript ( ts-jest ) 一起使用。 每當我嘗試進入awaitable方法時 - 調試器將跳過該方法並以右括號結束，因此完全跳過該方法。 （我仍然能夠通過在方法中放置一個調試點來進入代碼，但至少可以說是不方便）

給定配置：

/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",

  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.testing.jest.json"
    },
  },
}

我的解決方案是在tsconfig中更新target ：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "ES2017",
    "lib": ["es2017"],
    "declaration": false,
    "noImplicitAny": false,
    "removeComments": true,
    "inlineSourceMap": true,
    "moduleResolution": "node",

    //
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.js",
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.test.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "exclude": ["dist", "node_modules"]
}

它的目標是ES2015所以我把它改成了ES2017 。 我認為 typescript 編譯器正在生成 vscode 不知道如何處理的代碼，而最新的ES基本上允許按原樣編譯async / awaits 。

ps 我不知道這在這一點上是否相關，但我嘗試了很多解決方案，只是為了確保 - 如果上面的提示沒有為你解決問題 - 請嘗試下面的一些配置選項:)

  preset: "ts-jest",
  testEnvironment: "node",

  automock: false,

  globals: {
    "ts-jest": {
      tsconfig: "tsconfig.testing.jest.json",
    },
  },

  rootDir: "./",
  modulePaths: ["<rootDir>"],

  moduleNameMapper: {
    "#(.*)": "<rootDir>/node_modules/$1",
  },

  moduleDirectories: ["node_modules"],

  transform: {
    "^.+\\.(t|j)s$": "ts-jest",
    "^.+\\.tsx?$": "ts-jest",
  },

  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",

  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],

  roots: [
    //"<rootDir>",
    "./tests",
  ],

這個配置是非常特定於ts測試的，所以請記住這一點

Answer 5

您可以使用 Node.js --inspect選項在 Chrome 中調試代碼。 就像這樣：

# node --inspect app/app.js

並打開 Chrome： chrome://inspect 。 那太酷了。
您可以在此文檔中指定。

Answer 6

在我們獲得 VSCode 對該主題的支持之前，您可以嘗試將結果放入 var 中，如下所示：

var results = async function();

並檢查結果中的值