How to debug async/await in visual studio code?

Question

I want to debug js file that includes async/await in visual studio code,but it reminds me that vscode doesn't support it. What can I do to make vscode support async/await?

Answer 1

None of the solutions seems to mention the issue I had.

I am using jest with typescript (ts-jest). Whenever I tried to step into the awaitable method - the debugger would skip through the method and end up on a closing bracket, hence skipping the method entirely. (I was still able to step into the code by placing a debug point inside the method, but it is inconvenient to say the least)

Given the config:

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

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

The solution for me was updrading the target in tsconfig:

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

It was targeting ES2015 so I changed it to ES2017. I think under the hood the typescript compiler was producing a code that vscode didn't know how to deal with and the latest ES basically allows compiling async/awaits as-is.

p.s. I don't know if this is relevant at this point but I tried a bunch of solutions and just to make sure - if the problem is not resolved for you with the tip from above - try some of the config options from below :)

  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",
  ],

this config is very specific to ts tests, so keep that in mind

Answer 2

As now, in 2019, latest VSCode supporting async/await debug, just would like to share solution to prevent vscode to "Step into" (by f11) into async/await method through the "async_hooks.js" and "inspector_async_hook.js" files during debug nodejs applications.

Howto :

1) press ctrl+p in vscode and type ">launch", select "open launch.json"

2) after opening "launch.json", just add to configuration section :

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

or some more generic version :

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

So you final json should looks something like here:

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

After these steps you can see your real async method after pressing F11 in debug mode.

Answer 3

until we have VSCode's support on that subject, you can try putting your results into a var like this:

var results = async function();

and check the value in results

Answer 4

You can use the Node.js --inspect option to debug your code in Chrome. Just like this:

# node --inspect app/app.js

And open the Chrome: chrome://inspect. That's so cool.
You can specify in this doc.

Answer 5

I had major performance issues with VS Code debugging a Node project with TypeScript was unusable, so I found that changing the protocol=='inspector' and targeting es2017 allowed a fast and reliable debugging experience. Here is the config I used...

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

Answer 6

Currently you can use async/await in Node.js 7 or latest using --harmony flag, you can configure your vscode debugger (launch.json) in the following way to run and debug async/await Nodejs code.

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

You must change the program by your startup script file.