Chrome Dev Tools for Node.js

In this article, you will understand to connect node.js code with chrome dev tools. Here will start first understanding Devtools and Chrome and continue with the steps to connect Node.js with Chrome Devtool.

Chrome dev tools: Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser which lets you inspect the DOM and network activity of your web pages.

Node.js: Node.js is a javascript runtime engine built on Chrome's V8. It is used for server-side programming and basically deployed for non-blocking, event-driven servers, such as static websites and back-end API services.

The problem with node JS is inflexible debugging options. In node, you can test the code only by consoling it on the CLI which makes it very difficult for us to log bigger messages or object structure, you cannot even profile the CPU or heap memory. To solve this problem you can make use of chrome DevTools. Nodejs provides a way to connect your scripts with chrome. The approach for the same is explained below:

Approach to Use Chrome dev tools for node.js:

Step 1: Download and install NODE.JS following this

Step 2: Run node with the --inspect flag on CLI

$ node --inspect index.js

Note: Use --inspect-brk to add line breakpoints

$ node --inspect-brk index.js

Step 3: Next, open chrome and type about:inspect on the address bar. It’ll redirect you to chrome://inspect

👁 Image

Step 4: Click the Open dedicated DevTools for Node link. It takes you to the dev tools.

About Inspect: This is the way to the DevTools page it consists of some options like:

• Discover USB devices and Discover network targets: To find the connected servers
• Port forwarding button: to add port and IP addresses
• Service Workers: About the service worker
• Pages: Pages Opened in chrome with inspect options

About devtools: The devtools contains 5 tabs:

1. Connection: Here you can add the connection address like localhost:9229 where you are running your node script.

👁 Image

2. Console: To log debugging, warning, or error messages. This tab is like a command prompt. It consists of Options like:

• Preserve logs: To retain logged messages
• Live expression: To create an expression that updates in real-time
• Clear Console button: to clear the logs
• Filter: to filter the logs

👁 Image

3. Sources: Your script and debugging options. Here you can run a script and debug with breakpoints. It consists of :

• filesystem: To open the local folder.
• play/pause, step in, step out, deactivate/activate the breakpoint.
• call stack: A stack of the function execution sequence.
• scope: local and global scope of variables.

👁 Image

4. Memory: To perform memory-related operations. You can find the amount of heap memory used by your node script. It consists of options like:

• Heap snapshot: Heap snapshot profiles show memory distribution among your page's javascript objects and DOM nodes
• Allocation instrumentation on timeline: Allocation timelines show instrumented JS allocations over time
• Allocation Sampling: Record memory allocations using a sampling method
• Take / clear snapshot button

👁 Image

5. Profiler: To inspect the project performance. It has one option which is Record JS CPU Profile which shows the execution time spent in your page's JS functions.

👁 Image

Application: Now, you have all the chrome debugging features for Nodejs as well. Like:

• Breakpoint debugging with sources tab.
• Consoling With new ES6 node.js features like object expanding.
• Profiling JavaScript code.
• Heap snapshot, Allocation sampling.
• Stack for asynchronous features like promises.
• CPU inspection.

Now, you need not depend on the CLI to debug your Javascript Project. With this flexible Chrome, you can profile your project very well and quickly.