Debugging Node in VS Code

Node Interactive was just hold in Vancouver. I was listening to Chris Dias good talk about VS Code and how you can set up tasks, debug it, debug it inside a container and deploy it to a cloud (he show Azure). The Azure + Code integration was amazing, I’m using google cloud, I really hope there comes and extension like that is as good as the one he showed for Azure!

Anyways, he showed how to debug native node. But our stack is a isomorphic webapp where we are using import and not require. The common way to do this was to use babel to transpile the code down to older ES code.

But for the people that like to live on the bleeding edge of technology , node 8.5 ships whit the experimental-modules flag. So you can write your modules with native modules support. The problem is that the module is not backward compatible so all people using it most use the flag or wait util a new version of node has it turn on by default.

In august John-David Dalton announced the release of the std/esm libary that tries to pinpoint this issue. Now you can support both, by adding a small wrapper/proxy around your main entry point.

So dependent on your context, there exist at least three different setups that could be useful for you when you are debugging.

Debug node with std/esm

This is so straight forward you want everything to be when we are developing stuff! And the method I would recommend for most cases. You only need to change the main entry point to use the lib. Then you can write esm modules with the file ending .mjs and its backwards compatible with node versions that do not support ESM modules.

If you are working on and existing project, remember to add the { "esm": "js" } as the second argument to the lib, so that you unlock the use of import and export with .js files.
See example here

When that is setup push F5 (run debug) in Code. If you need to create the launch.json this is how it should look like:

{
“version”: “0.2.0”,
“configurations”: [{
“name”: “Launch Program”,
“type”: “node”,
“request”: “launch”,
“program”: “${file}”,
}]
}

Debug with node 8.5+ experimental-modules flag

Code are using the file ending to understand what kind of module it is, since the mjs file extension is new and Code is not updated to understand this
there exist several issues on this, so if we want to walk down this path, I would recommend using the insiders build.

So to be able to debug you app with today's version of Code you need to add #!/usr/bin/env node as first line of your module so that the debugger accept the file as and JS file. Example

The second thing you need to do is to use ${file} in launcher.json so that it finds the file, if you write the filename it will add a .js to the end and complain that is not able to find the file.

I was not able to trigger the breakpoints in this code at all, even with this things set, but other people has been able to get this to work. Hopefully the support will be better in Code soon. If you do see a mistake I have done in the setup so I can get the breakpoints to work, I would be eager to hear about it

Debug node with babel

So I tried to set up it with babel, in general i would say that the documentation on VS Code is really good, so I was a bit surprised that I was not able to find any reference on how setup and debug babel on their site.

So here are the gotchas I got when trying to get it to work with babel:

• Remember to add --source-maps in babel config
• Remember to add babel-pollyfill when changing to babel from babel-node
• Remember to add a preLaunchTask so you are not running against all files.
• Env var file can not contain export syntax if used as a envFile attribute in lanuch

See the launch.json for details on the debugger settings for babel. And remember that here you are transpiling the code back to and older format that most likely is running slow and you have a inserted babel as extra complexity, it could be correct for your use case, but be sure it is, and that your are not just stuck with old habits.

F|or a working example on all of these example check out the github repo