- Node.js Development for .NET Developers: Overview
- Node.js Development for .NET Developers: Tools
- Node.js Development for .NET Developers: Developing & Debugging Workflow (this post)
- Node.js Development for .NET Developers: Developing & Debugging Workflow - with Visual Studio Code
In my previous posts I mentioned the different tools you can use to code in Node.js. Microsoft stepped up to the plate and provided an add-on to Visual Studio for Node.js development. If you want to see the development and debugging story around that, I’d recommend checking out the official page for the tools, as well as their YouTube channel and a good post by John Papa: Get Up and Running with Node & Visual Studio. However as I said, I’m going to focus on using Visual Studio Code for the remainder of this series. In this post I want to not just explain what the development and debugging workflow process is like, but I’d like to explain how it works. A lot of this is abstracted away from you if you’re using Visual Studio but like every good developer, you want to know how this stuff works… so here’s my spin on it! Before I show you how you can debug in Visual Studio Code, let’s first look at debugging Node.js at it’s core.
Sample Node.js Site - Get it Working
For this post I’m going to use a very simple Node.js website that you can get from my public GitHub repository here: https://github.com/andrewconnell/node-simple-mvc-web. This site implements the MVC pattern with a single view and controller… I’ll look at the MVC aspects of this more in a later post. Let’s focus on running this sample first. To run this you first have to put all the code in one spot and then run the command:
npm install which will download the two required NPM packages required to run the sample (Express, which is the web server & HBS, which is the server-side implementation of the popular handlebars data binding framework used for MVC in this example).
Once you’ve done that, from the root directory of the project, run the website by typing
node src/server/server.js at the command line. This will start the Express web server and host the site at
http://localhost:3000. Open a browser and navigate to that site… it’s pretty basic. Stop the site by pressing CTRL + C.
Understanding Node.js Debugging
When you run the site the way we did above using
node src/server/server.js you are running in the production mode. For .NET developers, this is like running in the Release build configuration in Visual Studio.
Similar to Visual Studio, running in production / release mode means you don’t get additional debugging data emitted from your process. In .NET this means you have no debugging symbols that map the compiled code to your source code so you can’t set breakpoints and the like. The same is true in Node.js. When you want to run in debug mode in Visual Studio, you run in Debug mode:
To run in debug mode in Node.js, you simply add a flag when you start the process:
node --debug src/server/server.js. When you do that, you’ll see on the command line that Node.js reports that the debugger is listening a specific port:
What does this give you? This means the Node.js process has an open port where extra debugging data is emitted and you can talk to Node from different tools. This allows you to set breakpoints, get data about the script running & the overall Node.js process… tons of stuff.
But by itself, this won’t help you… what you want are some tools…
Inspecting the Node.js Process with Node Inspector
So how do you use it? From the command line you have two options. If you run
node-debug src/server/server.js you’ll see a new browser window open and load the tools:
Check out the node-inspector site for a bunch of ways you can configure it such as ways to hide certain files from showing up in the debugger tools (such as hiding the
node_modules directory if you don’t want to debug or step through packages you rely on).
This is done using the tool nodemon. The way I run nodemon & node-inspector together is by running a command like this:
node-inspector --web-port=8888 & nodemon --debug src/server/server.js
This will start Node.js in debug mode as well as node-inspector and watch for any changes to any file within your site:
rs and pressing ENTER) and the node-inspector browser tools refreshed.
Pretty cool huh? So at this point you’ve seen how to do some basic debugging by using a few handy free tools. In the next post I’ll take this a step further and show you how you can debug your Node.js apps within Visual Studio Code.
Page update history / changelogThis page has been updated since it was originally published. The following list details each change and when it occurred.
- Thursday, August 15, 2019 - 8:14 AM
Clean up HTML to markdown, convert code samples to gists.