Channels ▼
RSS

JVM Languages

Building Node.js Projects in Visual Studio


Debugging the Application with the Local Debugger

Right-click on the project name within Solution Explorer and the IDE will display the General properties for the project where you can configure the Node.exe path, arguments, and the debugger port, among other properties. In this case, it isn't necessary to start a Web browser when the app is launched, and so, you can uncheck the Start web browser on launch checkbox.

You can set the desired breakpoints in the server.js file and launch the Web application. By default, the tools use node's local V8-based debugger. The debugging experience and the UI is exactly the same that you already know from working with other supported Visual Studio programming languages. Visual Studio connects to the node V8 debugger over a socket, and so you can also debug Node.js remotely running on another Windows computer or a different platform supported by Node.js.

For example, set a breakpoint at the first line of the status function:

var cameraToQuery = 0;

Then, start debugging the Web app. A node.exe window will appear and this window will display the Node.js console output. The window will display the following two lines (the port number might be different in case you have a configured value for process.env.port):

debugger listening on port 5858
Server is listening at port 1337

You can use a Web browser, Telerik Fiddler, or the curl utility to compose and send a GET request to localhost and the port in which the server is listening (1337 or process.env.port), adding /status and one of the possible values for the position parameter. For example, you can enter http://localhost:1337/status?position=left in your Web browser or run the following curl command:

curl -X GET 'http://localhost:1337/status?position=left'

Visual Studio will hit the breakpoint at the first line of the status function. You can use the Autos, Locals, and Call Stack windows (see Figure 2). You can also inspect variables and hover over either selected expressions or valid identifiers to display a popup with the results of their evaluation.

Node.JS
Figure 2: Using the Locals and Call Stack windows when debugging the Node.js Web app in Visual Studio.

This way, you can easily check that the query argument has a position property with a value equal to left. You can step over each line of code and use the Immediate Window to quickly evaluate expressions.

Once you finish executing the code in the status function, you will see the following JSON response in the Web browser or as a result of the curl command:

{"cameraId":3,"globalStatus":"OK","lensStatus":"OK","environmentScore":3,"detectedFacesCount":200}

Remember that the node.exe window displays the messages sent with console.log, consequently, you will see a new line in this window:

Requesting status information for camera #: 3

In this case, I'm using a conventional breakpoint. You can also take advantage of the advanced breakpoints. Go to the Breakpoints window and right click on a breakpoint to see all the available options. For example, the Hit Count… option allows you to make the breakpoint hit when the location is reached and a specific hit count condition is satisfied.

You can also configure how Break on exceptions should work. You just need to select Debug | Exceptions, expand Node.js Exceptions and check all the Thrown checkboxes for the different kinds of exceptions that you would like to make the debugger break when they are thrown.

You realize that back isn't the appropriate position name for camera number 2, and therefore, you want to change it from back to rear. Enter http://localhost:1337/status?position=rear in your Web browser or run the following curl command:

curl -X GET 'http://localhost:1337/status?position=rear'

The IDE will hit the previously set breakpoint again within the status function. Luckily, the IDE supports edit and continue. Thus, you can replace the value in the case statement from case 'back' to case 'rear', save the changes and continue executing the code. Once you finish executing the code in the status function, you will see the following JSON response in the Web browser or as a result of the curl command:

{"cameraId":2,"globalStatus":"OK","lensStatus":"OK","environmentScore":3,"detectedFacesCount":150}

Installing npm Packages with the Integrated NPM UI

The previous example was a very simple Node.js REST API that uses two standard libraries. However, in your real-life Node.js projects, you will want to install additional npm packages and use them. You can run npm from the Node.js Interactive Window (.npm) or the command line. Visual Studio watches the file system and will update the project with the additions.

However, the tools include an integrated NPM UI that enables you to easily search and install npm packages without running commands. In case you are running the project, stop its execution. Right-click on npm within the Solution Explorer and select Install new NPM packages…. A dialog box allows you to search for the available npm packages.

You just need to enter some text from the package name and the list will be updated with the package names and descriptions that match this text. For example, enter express and the dialog box will display all the packages that include express in either the name or the description. Select express 4.10.2 and notice that the right-hand side of the dialog box displays additional information about the selected package (see Figure 3), including its homepage. Then, click on Install Package. By default, the options make NPM install the latest version of the selected package with a standard dependency and automatically add it to package.json.

Node.JS
Figure 3: Installing a new NPM package with the integrated NPM UI.

If you have experience working with Node.js, it is difficult to avoid working with npm in the command line. However, the UI might be helpful to easily search for packages and check whether newer versions are available.

Node.js Tools for Visual Studio transforms Visual Studio into a very good Windows IDE for Node.js projects. If you work with other programming languages and are happy and productive using Visual Studio, you will want to install this add-in to code Node.js projects there as well.


Gastón Hillar is a senior contributing editor at Dr. Dobb's specializing in exploring emerging developer tools and technologies.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.