Chrome Dev Tools for Node.js
Last Updated : 17 Nov, 2022
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
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.
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
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.
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
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.
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.
Similar Reads
Uses of Chrome Developer Tools
Chrome developer tools are a set of features available in Chrome for web developers to make the process of website development more efficient by providing many useful tools that assist the developers in different aspects of development. These tools range from displaying the entire code of the web pa
5 min read
Why to Use Node.js For Backend Development?
JavaScript is the universal language for building web applications. It is used in frontend (client-side) and backend (server-side) development as well. But the truth that the beauty of the front-end relies on the back-end can't be denied. This is when NodeJS comes into the picture. Node.js is the be
7 min read
Docker - Docker Container for Node.js
Node.js is an open-source, asynchronous event-driven JavaScript runtime that is used to run JavaScript applications. It is widely used for traditional websites and as API servers. At the same time, a Docker container is an isolated, deployable unit that packages an application along with its depende
12 min read
How to Use Node.js for Backend Web Development?
In the world of website design nowadays, NodeJS is a supportive tool for making capable backend systems. Whether you are an experienced web designer or just beginning out, NodeJS can upgrade your aptitude and help you in building extraordinary websites. This guide will show you how to use NodeJS to
8 min read
How to Use jQuery with Node.js ?
jQuery is a popular JavaScript library primarily used for client-side scripting to simplify HTML document traversal, event handling, animation, and AJAX interactions. Although jQuery is designed for the browser, you might find scenarios where you want to use it on the server side with Node.js, such
3 min read
How to Run Java Code in Node.js ?
Running Java code within a Node.js environment can be useful for integrating Java-based libraries or leveraging Java's robust capabilities within a JavaScript application. This article will guide you through the steps required to execute Java code from a Node.js application, covering various methods
2 min read
How to Completely Remove Node.js from Windows ?
We can remove the nodejs from window by uninstalling it from the programs list. Node.js is a popular JavaScript runtime used for building server-side applications. However, there may come a time when you need to remove Node.js from your Windows system completely. Whether it's due to a corrupted inst
3 min read
Node.js Roadmap: A Complete Guide
Node.js has become one of the most popular technologies for building modern web applications. It allows developers to use JavaScript on the server side, making it easy to create fast, scalable, and efficient applications. Whether you want to build APIs, real-time applications, or full-stack web apps
6 min read
Top 10 JavaScript Concepts for Node.js Developers
In 2024, JavaScript remains the most important part of web development, with its significance in Node.js development reaching new heights. As Node.js evolves, developers need to stay updated on the latest JavaScript concepts and principles for creating efficient, scalable, and secure web application
11 min read
Node.js OS Complete Reference
Node.js OS module provides information about the computer operating system. Below example illustrate the os.version() method in Node.js: Example: C/C++ Code // Import the os module const os = require("os"); let osVersion = os.version(); console.log("OS Version:", osVersion); Outp
2 min read