by Indrek Lasn

Supercharge your debugging experience for Node.js

Debugging with Node

You see this, what do you do?

hypothetical: You might check every line of code and try to find a typo. No typo found… next, you might start using console.logs to see the output for code, which is a pain. Surely there are better methods out there?

Note: This article was originally published at — please give it some love! ❤

Supercharge your debugging experience for Node.js -
hypothetical: You might check every line of code and try to find a typo. No typo found... next, you might start using…

Debugging server-side javascript code with console logs is archaic.

Console logs just simply aren’t enough since it requires us to go line by line in a very slow manner whilst restarting our server each time. Console logs also clutter our codebase with unnecessary code and removing them requires small effort.

Exhibit A: How much energy does it take to spot the console log among the dummy data and other processes?

uh-oh, console cluttered. Where’s my console log?

Very daunting. It doesn’t have to be this way.

A much more efficient way of doing things would be debugging with breakpoints. With breakpoints, we can step over the call stack and event loop to diagnose the problem.

You get the point. Time to explore other options. What are the options? I’m glad you asked!

By the way, there’s a very tasty treat at the end of the article — just saying.

Node has a built-in inspector!

Yes, that’s right. Node actually has a built-in inspector. The inspector uses the v8 debugger protocol viewer under the hood.

Let me show you — let’s start a new node project.

Now we have a basic express server. But instead of using the node server.js command the traditional way, we’re adding an extra flag to our node command, the inspector.

--inspect tells Node to expose the new debugging protocol.

Once we start our server with the inspector, here’s what the console outputs.

Sweet, it worked. Open the Chrome at http://localhost:3000 with the dev tools. Notice something extra?

Notice the Node element next to the mobile inspector

Woot, node inside our browser? Yes indeed! We still consume our app like before — localhost:3000 port is for the DevTools to consume.

Inspecting server side code inside our browser

What does Node Inspector do?

Node Inspector lets you use the DevTools user interface with the native Node debugger. DevTools can now connect directly to the Node process!

If you know how to get this working on Firefox or Safari, let us know in the comments/discussion.

Using the debugger

Using the chrome debugger is very much the same as using the debugger for client-side code. You set breakpoints, execute the code, step over the breakpoints and find the bug.

Using breakpoints to step over our code

Can you imagine how useful this can be when we have an error inside a big controller? We have access to the debugger, call stack, scopes, local variables, global variables, etc. We have so many sharp tools to use!

Taking it to another level

We’re not done yet. 20 July 2018 was a very special day for debugging node. Why?

Google Chrome labs team open sourced their advanced debugging tool — ndb!

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools

Ndb is a sweet tool for debugging. Let’s give it a go.

Installing ndb

npm install -g ndb

It’s like any other npm package, very simple to use and install.


To use ndb, we just have to prefix our start script with ndb.

appending ndb to our start script

That’s all! Let’s restart our server — notice we’re using nodemon — just like any traditional project.

Woot! We have a new chrome instance for the sole purpose of debugging. How cool is that? Epic!

We even have access to the node process global object — which is the window object for node.

Hacker news discussion about the new debugger — check it out!

Ndb - An improved debugging experience for Node.js | Hacker News
That said, with both VSCode and WebStorm, I've seen finicky issues from time to time, like source maps not working…

Thanks for reading, stay awesome! ❤

Indrek Lasn (@lasnindrek) | Twitter
The latest Tweets from Indrek Lasn (@lasnindrek). Author, software engineer, founder. Spread the love ❤. Zurich…twitter.comFrom zero to hero with Vue — Why Vue?
Vue has taken the Javascript world by a huge storm — for a good reason. Vue is a great tool to work with. I had the…medium.comHow to set-up a powerful API with Nodejs, GraphQL, MongoDB, Hapi, and Swagger
Separating your frontend and backend has many advantages:medium.freecodecamp.orgWant to be a top developer? You should build things. Here’s another list to get you started.
Due to high demand I’m extending the list of fun apps to build. 😁 TypeScript — JavaScript with superpowers
Javascript is cool. But do you know what’s even more cool?👆 Pointer events with React — The why, how, and what?
Let’s talk about events, more specifically pointer Let’s build a fast, slick and customizable rich text editor with Slate and React
What is a rich text editor anyway?medium.comIdyll-lang: Make your app stand out with data-driven stories
Do you know what’s hot right now?