Debugging Node.js applications using Node Inspector

Node.js is a JavaScript runtime based on event-driven and non-IO blocking model, and can be used for building lightweight and efficient web applications. Node.js provides server-side JavaScript for performing various business operations ranging from HTTP request processing to database calls using Node packages. One challenge that we usually encounter while creating Node.js apps is to debug code. Generally while debugging JavaScript code, we can use our favorite IDE support feature for debugging. For e.g. in case of Visual Studio 2012 onwards, we can debug JavaScript code using debugger; statement. In a cross-platform IDE like Visual Studio Code (VSCode), we can make use of launch.json to define debug configuration. This configuration can then be processed using F10 and F11 keys.

In the case of Chrome browser, the V8 debugger released as part of the Chrome Developer Tools, can be used to debug Node.js scripts. If you plan to debug this code in a browser like Chrome, Opera or any other browser supporting WebSocket, we need a separate tool like the node-inspector. The node-inspector has been specifically written for debugging Node.js applications and is popular in the web community for debugging Node applications. It is a debugger interface for Node.js applications that uses Blink Developer tools and is a part of the Chromium project. You can get an overview of these tools over here.

Node Inspector

This tool is installed using Node Package Manager via the following command

Npm install –g node-inspector

The interface for the debugger with node inspector can be started using the following command:

Node-inspector

The debugging for JavaScript code can be started using the following command

Node –debug app

The node inspector tool provides several great features like:

• · Setting breakpoints for the JavaScript code.
• · Step over, Step in, Step out, resume.
• · Hover mouse over on the JavaScript expressions to view values in the tooltip.
• · Inspect scopes, object, and variables properties.
• · And many more..

Node.js Implementation

To implement our Node.js application, we will be using Visual Studio Code (VSCode). This is a free IDE for developing modern web and cloud applications and can be installed on Windows, Linux, Mac OSX.

Note: VS Code has the capability to debug Node.js applications. However the focus of this article is to use the browser to debug Node.js apps, hence we will be using VS Code only to develop our application and not for debugging it.

Step 1: Create a new folder on your hard drive called DebuggerApp. Open this folder in the VSCode IDE using File > Open Folder option. In this folder add a new file of name app.js using VSCode.

Step 2: Right click on app.js and select Open in Command Prompt option. This will open the command prompt. We can configure Node.js intellisense from this command prompt using the following command:

npm install -g tsd

tsd query node --action install

Step 3: Add the following code in app.js:

var http = require('http');

var Employees = [
    { EmpNo: 1, EmpName: 'A' },
    { EmpNo: 2, EmpName: 'B' }
];

http.createServer(function (req, resp) {
    resp.writeHead(200, { 'Content-Type': 'application/json' });
    resp.end(JSON.stringify(Employees));
}).listen(5050);

The above code creates a web server using http module. Using the createServer() function and listen() function, it performs request processing and starts listening on port 5050. When the request is made on http://localhost:5050, it returns Employees data in a JSON format.

Step 4: To execute the app from the command prompt, which we opened using Step 2, enter the following command:

node app

Step 5: Now assuming you have already installed node-inspector, open the Chrome browser and enter http://localhost:5050, the following result will be displayed

Step 6: To use Node-Inspector, run the following command from the Command prompt:

npm install –g node-inspector

To start the node inspector, run the following command from the command prompt:

node-inspector

This will show the following debugging details as shown in the following image:

Step 7: Open Chrome browser and enter the address provided in the above image to start debugging in your browser:

Step 8: Open the command prompt as explained in Step 2 and run the following command:

node –debug app

This will show the following details:

Step 9: In another instance of the chrome browser, enter the following link

http://localhost:5050

This will show the following source file in the chrome debugger started using node inspector as of Step 7 as shown in the following image:

This shows the project stricture on the left-side in Sources panel. The central panel shows the app.js code. The right hand side shows Call Stack, Scope variables, breakpoints, etc.

Apply a breakpoint on a line in app.js for e.g. on resp.writeHead( ) line. The breakpoint line will be displayed on the right side panel under breakpoints section, as shown in the following image:

Press F5 on the other chrome instance where http://localhost:5050 is entered, the code will enter the debug mode. The browser will show the debug notification as shown in the following image

The debug mode will be displayed as shown here:

Place the mouse cursor over Employees in resp.end(), and a tooltip will be displayed as shown in the following image:

Similarly you can debug the entire code and check for values generated, Scope variables, etc.

Conclusion

Node Inspector is a great tool used for debugging Node.js applications using the Chrome or Opera browser. Using the interface provide by this tool, we can easily debug through all code blocks of our JavaScript code.

Author

Mahesh Sabnis is a DotNetCurry author and Microsoft MVP having over 17 years of experience in IT education and development. He is a Microsoft Certified Trainer (MCT) since 2005 and has conducted various Corporate Training programs for .NET Technologies (all versions). Follow him on twitter @maheshdotnet