A quick look at Visual Node

I came across Visual Node a few months ago and was excited by the looks of it. For those that didn’t click that link, it basically brings the power of Visual Studio debugging to a node.js app. You can write your node.js app in Visual Studio, fire up the debugger by hitting F5 and use breakpoints and watches to see what’s going on.

The hipster in me is screaming saying “You should be using Sublime Text and node-inspector for debugging” but to be honest I found it a bit hackety-hack and it seemed a bit odd debugging my server app in Chrome but maybe that’s just something I need to get over. JavaScript is getting a huge surge in popularity recently so its your duty as a developer to investigate this. I want to learn and understand JS better but I always get frustrated with it after 10mins and swear that I’m never going to touch a dynamic language again, “give me a statically typed language every time with a compiler”. I have a bit of a Jekyll and Hyde situation going on that I need to overcome.

When I saw Visual Node it appeared to my statically typed side. “Ooooh, proper debugging, this looks interesting”. So I signed up to be kept up to date when they were ready for beta testers and yesterday I got my email saying I could download a private beta version and give it a whirl. So that’s what I did.

I went over to their README page which explained how to install it and some of the features. I installed a VSIX which gives me a project template to choose from when creating a project in Visual Studio(VS).

Selecting this gives you a basic http server app template.

I like that they have tried to bring a NuGet style dialog for searching packages in NPM.

This brings a sense of familiarity to Visual Studio users which is great. It orders its results alphabetically. I found the searching a bit slow but I’m not sure if that’s down to my internet connection or how NPM handles searching.

The code in the template is:

// Load the http module to create an http server.
var http = require('http');

// Configure our HTTP server to respond with Hello World to all requests.
var server = http.createServer(function (request, response) {
    response.writeHead(200, { "Content-Type": "text/plain" });
    response.end("Hello World\n");
});

// Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8000);

// Put a friendly message on the terminal
console.log("Server running at http://127.0.0.1:8000/");

I then pressed F5 to see what happened.

It fires up a console app and a browser:

I then went back to Visual Studio and put a breakpoint on the response.end("Hello World\n");" to see what would happen when I refreshed my browser.

It stopped on the breakpoint and gives me information about the objects in scope etc and let me step into the current line.

That’s a pretty basic hello world style of seeing what Visual Node can do but that static language side of me really likes the look of this and the potential it can bring. I believe WebStorm also provides node.js debugging so check that out but for pure familiarity reasons I like the look of this.

For a better understanding here’s a video: