Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

nodejs
adonisjs
debugging
chromedev tools
community creator

How to debug Adonis with Chrome DevTools

Emmanuel Awotunde

Debugging Node.js can be very difficult. Most times, when something goes wrong, it may take a while to get to the root of the problem because the error message may not be descriptive enough or there’s a variable that you expect to have a value but is null or undefined.

Printing on console

The first thing that comes to mind when debugging in Node.js is to use console.log. This will usually get you a solution, but it wastes time in the long run.

We’ve all been in a situation where we had to use console.log multiple times because once wasn’t enough. In a bid to quickly solve the problem, we end up spending more time logging in at different points of the application.

Debugger

There is a much simpler and more effective way to debug in Node.js, use a very simple keyword:

debugger;

As simple as this is, many people do not know about it. The keyword is more popular for Javascript on the browser because it doesn’t need anything more than to be typed anywhere in your code. However, in Node.js, it’s a little different. You have to do more than just type in the keyword. To enable debugging in Node.js, in addition to adding debugger; in your code, you have to run the application using:

node inspect <file_name.js>

There are other ways to debug Node.js aside from node-inspect, some are:

  • Chrome DevTools
  • Visual Studio Code: It’s the most effective if you already use VS Code.
  • Visual Studio
  • Some JetBrains IDEs
  • Eclipse IDE

Debugging with Chrome DevTools

We’ll be using AdonisJs (a Node.js web framework) as an example. To enable debugging mode on Adonis, run:

adonis serve --dev --debug

Adonis debug

This debugger makes use of Chrome DevTools, so head over to Chrome (if you have it installed). Once you enable DevTools, you should see the Node.js icon – clicking it will open a new window for debugging.

Chrome dev tools

Whenever the execution of your application encounters the keyword debugger, it will automatically pause execution and open the Chrome debugger window. You can do a lot of things in this window:

  • See the value of scope and global variables
  • View the call stack

Allows you to see all the functions that were executed up until the current function being executed.

  • Resume execution
  • Step over to the next function call
  • Step into the next function call
  • Step out of the current function
  • Pause execution where exceptions are thrown
  • Etc.

Voila! That’s it. With this, you can easily debug your AdonisJs application and not have to console.log everywhere😂.

You can check Node.js docs for more information on debuggers.

RELATED TAGS

nodejs
adonisjs
debugging
chromedev tools
community creator
RELATED COURSES

View all Courses

Keep Exploring