A Quick Look at Debugging Node.js With StrongLoop and Visual Studio Code

as i mentioned in my last entry on strongloop, i’ve decided to move on from api building and begin looking at what else is available when working with strongloop . today i’m going to talk about debugging, and while it mainly “just works”, i ran into a few issues that i want to warn people about.

so first and foremost, the main docs for debugging with strongloop, debugging applications , mention using the command slc debug to begin debugging your application. it wasn’t entirely clear to me at first, but this command is also responsible for starting your application. you can connect to an application that is running, but i figure most people are going to test locally and will probably kill their app and then start it up again via the debugger.

now the first thing that happens after running slc debug is that your default browser will open up with the debugger. the debugger is only supported in chrome and opera. so if your default browser is firefox, like it is for me, just copy and paste the url into chrome.

here is where things got a bit weird for me. i noticed that nothing seemed to be working. but then i saw that the debugger was actually paused :

from what i know, the node debugger wraps your code with – well – a wrapper – and for some reason it is automatically breaking at some point there. clicking the blue arrow on the top right (resume script execution) let’s things carry on. and here is where another odd thing happened.

apparently it takes a little bit of time for the debugger to get up and running. certainly not a long time. i’d say about 30 seconds. but i was convinced the debugger wasn’t working because i immediately tried to run some code with a break point and nothing seemed to work. what you want to do is watch your terminal for your app’s start up message. so here is what i had initially:

i then clicked resume in the debugger, and back in my terminal prompt i waited for it to update:

ok, so in theory, that’s it. to test, i added this route to my code:

app.get('/test', function(req, res) {
console.log('doing test');
var x=1;
x++;
console.log("x is now "+x);
res.send('ok got stuff '+x);
});

in the debugger, i then added a break point:

i then opened up the url in my browser (and while the debugger wants you to use chrome, any request to the url at all will work) and confirmed that the request was hung while the debugger was paused.

note that you can also edit values, which is pretty freaking cool. just double click and enter a new value and resume. all in all – cool – and easy to use.

speaking of easy to use, don’t forget that visual studio code also includes built in support for debugging node.js applications as well. i won’t repeat what their excellent docs say about their debugging support. as with slc debug , you do not want to start your server. instead, you’ll configure vs code to run the proper script when you hit debug.

once you’ve done that, you can go to your files view and add a break point:

then request something that fires the break point. code will automatically take focus (which, i must say, i’m not sure how i feel about – in general, i never want my apps to take focus) and you can then look at variables and begin stepping through the code.

you can modify values too, but the code docs don’t make this explicitly clear in my opinion. you’ll want to open the debug console and then modify the code using simple variable assignments.

so, there ya go, two interesting options for debugging node.js applications, and yes, i know there are even more. to be honest, i’m kinda leaning more towards using code for debugging as i like it in my editor versus my browser (which seems weird, i love dev tools), but i’ll probably go back and forth.