Debugging ES2017 async/await in VS Code using Source Maps
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.