Debugging Node.js Application Using NDB

Google Chrome LABS has released a new Node Debug tool to improve the developer experience. In this article, we will give a full introduction to the Node tool NDB

Those familiar with Node probably know that node has always supported a headless debugging tool:

It uses a deprecated protocol called the V8 debugger protocol, and it’s not a full-featured debugger, just a few simple checks.

In the past, a new debugging tool based on the V8 debugger protocol and Blink has been introduced to developers that allows us to debug our Node applications on DevTools, a browser with a Webkit kernel. Yes, node-Inspector, It has greatly increased the efficiency of debugging Node applications.

V8 Inspector was added as an experimental feature in the V6.3.0 version of Node, which brings a very powerful debugging protocol, It also integrates with Chrome’s DevTools and supports many new features such as Blackbox, Profiling, Workspaces and Sourcemap. In addition, it doesn’t rely on the deprecated V8 debugger protocol, but is directly based on Chrome’s debugging protocol, so it can run directly in debug clients like Chromium Kernel Browser, VSC ODE, WebStorm, etc. Launching it is as simple as typing the command node –inspect scrip.js.

On July 20, a new Node debugging tool called NDB will also be open sourced.

It’s exciting to have new Node debugging tools, but what new features does this new NDB have?

The background of NDB

First, attach the official definition of NDB:

NDB is an improved debugging experience for Node.js, enabled by Chrome DevTools (NDB is an improved debugging experience for Node.js, enabled by Chrome DevTools) Chrome DevTools native NDB support)

From the above definition, we can find:

  1. NDB improves debugging experience
  2. Chrome DevTools natively supports NDB, which means it uses Chrome’s debugging protocol, similar to V8 Inspector
  3. NDB is maintained by Google Chrome LABS

So you might think that the NDB is just offering an upgraded version of the V8 Inspector, but that’s not the case.

There are two prerequisites for using V8 Inspector and Chrome DevTools: Node is older than 6.3.0, and you must use Chrome or Chromium. What if we don’t meet either of these criteria or want to debug in a non-Chromium kernel?

We didn’t say what environment NDB relies on, but it relies on a package called Puppeteer, which controls Chromium through the Chrome DevTools protocol and provides a lot of wrapped interfaces.

When the NDB installs the Puppeteer, a new version of Chromium compatible with the current environment is installed in the dependency package.

Because it is installed independently, NDB is not dependent on the browser of the operating system, and this browser-independent feature is also an advantage of NDB.

But it also has a problem, node_modules is bigger, because there’s Chromium in it.

So what’s the NDB debugging experience like?

To explore the NDB

The first step is to build a Node application demo using Express:


// app.js
const express = require('express');
const app = express();

app.get('/', (req, res) => res.send('Hello World! '));

app.listen(3000, () = >console.info('Example app listening on port 3000! '));


Copy the code

Then define a run script in package.json:


"scripts": {
  "start": "node app.js"
}

Copy the code

How to install

First we install NDB in the global environment or locally.


npm install -g ndb

Copy the code

Start the NDB

There are several ways to start NDB:

1️ – direct execution of files

We can start NDB by executing a file directly with the NDB command, for example:


ndb app.js


Copy the code

2️ one – run a binary executable

Sometimes we want to use NDB to debug services that start with executable binaries, such as NPM scripts, Webpack, unit tests, etc.

Run the following command:


ndb npm start

Copy the code

We ran an NPM script using NDB above, and we can also run NDB webpack or NDB mocha commands if configured properly

3️ one project run

If we just need to open an NDB service, we can execute NDB directly in the project directory. This command allows us to set breakpoints, edit files, or anything else before executing the script.

PS: We will use the third boot method to demonstrate the following examples

Place a breakpoint

Placing breakpoints during debugging is very simple

We can place breakpoints before the module is actually loaded

Handle file

With Chrome DevTools, you can create and edit files in your project and save them

Run the NPM script

If your project contains some NPM scripts, you can run them from the NDB panel

! [Running an NPM script] qpic. Url. Cn/feeds_pic/a…

Built-in terminal

You can also directly access terminals through NDB

Blackboxing

By default, NDB blocks some external files, such as the Node library, which we don’t care about when debugging

The process of panel

This panel lists all node processes currently started by NDB. In addition, the child process is folded into its parent process for easy management and termination

Code snippet

NDB supports the creation of snippets of code for execution and debugging

Variable access

NDB can access both current process variables and node global variables

IVWEB Technology Weekly shocked online, pay attention to the public number: IVWEB community, weekly timing push quality articles.

  • Collection of weekly articles: weekly
  • Team open source project: Feflow