Approx 5 minutes read

async/await has been the most promising feature of ES2017. It allows you to write asynchronous code in more elegant way saving you from the hassles of callback. async/await is supported from Node versions >= 8.5. However if you are writing JavaScript code targeting Node versions < 8.5, you need to set up a transpiler like Babel to convert your code compatible to your version of Node. To debug in this scenario, you need to make sure that Source Maps are generated and are linked in transpiled version generated by Babel. To do so, add following parameters in your .babelrc file:

1
2
"sourceMaps": true,
"retainLines": true

For more details about .babelrc, refer this. Now add following configuration to launch.json file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/dist/index.js",
      "stopOnEntry": false,
      "args": [],
      "cwd": "${workspaceRoot}",
      "preLaunchTask": null,
      "runtimeExecutable": "nodemon",
      "restart": true,
      "runtimeArgs": ["--nolazy"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "internalConsole",
      "sourceMaps": true,
      "outFiles": ["${workspaceRoot}/dist/**/*.js"],
      "skipFiles": [
        "${workspaceRoot}/node_modules/**/*.js",
        "<node_internals>/**/*.js"
      ],
      "smartStep": true
    }
  ]
}

Here in line number 8, program points to entry point of your transpiled code. We are also setting sourceMaps parameter to true in line number 20. The outFiles parameter in line number 21 contains a glob pattern for an absolute path that matches our .js files. We also don’t want to debug the Node internal programs and programs in node_modules folder and hence they are specified in skipFiles parameter in line number 22. Finally I have set the smartStep to true in line number 26 to automatically step over code that doesn’t map to source files. These codes are generally injected by compiler during async/await downcompilation. smartStep will automatically step through code not covered by a source map until it reaches a location that is covered by a source map again.

Now before starting debugging, make sure the transpiled code is availabe in directory specified in configuration file above. Also make sure source maps are generated and are present along with .js files. Once everything is in place, just press F5 and start debugging.