Nuxt.js Debugging for WebStorm

Did you ever try to debug a problem using only console logs? did your head hurt before and after this? did it take a long time to find out it was a missing property in an object? Let’s face it… almost everyone had to recur to this method, including myself.

console.log is not and will not ever be a silver bullet for debugging

Debuggers are tools that have been between us for years but for some reason people stop to use them in the NodeJS world. Our friends from NodeJS, VSCode and Jetbrains have created a plenty of tools that help us to “stop” the application and get the current state of the application in that moment in time.

NuxtJS, in the other hand, have been a pain in the ass to try to get the debugger up and running, has been so hard to figured out that people tend to just drop the race and start to use console.log.

Well, fear not my friend! I actually have a quick, safe and nice solution for all your problems! Actually, NuxtJS debugging is easier than everyone think and I want you to know this since there’s almost NO documentation of the subject and want to make your life easier.

Project Config

Open your nuxt.config.js and go to the build property because we are going to modify the extend method.

We need only add one line of code but is extremely meaningful to enable debugging:

What does this line mean to us?

config.devtool is a property of Webpack that let us configure how the SourceMap for that JS should be generated (Reference)

eval-source-map is a SourceMap that matchers exactly to the line number and this help us to debug in the client. (More Info)

inline-source-map is very similar to the last one but with the exception that is added as DataUrl in the bundle. It help us to debug our NuxtJS app in the server. (More Info)

Note: Try adding a development environment validation. It’s not recommended to use this on production.

Running the NodeJS Debugger with nodemon

We will use an excellent tool for development called nodemon which basically let us watch any change in our project and restart the server automagically.

To run the NodeJS debugger with nodemon just add the flag --inspector and that’s it!!

WebStorm

Open your project with WebStorm and wait for everything to be indexed.

Configure Server Side Debugging

1. Click on “Add Configuration”

1. Click in the plus sign and then in npm

1. In command use run and in scripts use dev and save!

Configure Client Side Debugging

1. Go to the same Add Configuration place

1. Click the plus sign and click in Javascript Debug

1. Put a name to this; URL should be the URL where Nuxt will run, browser can be your favorite one but i’d recommend to use Chrome and enable the option of “Ensure breakpoints are detected when loading scripts” and save!

How to get both running

First run the Server Side Debugger by having the run option selected and then running the bug

After the project loads correctly, select the client side run config and click the same icon. It should open a new chrome instance.

And we are absolutely ready to debug our application! 🎉

Demo Video!

Have a great hunt, Bug Hunter! May this article were of your help in your job!

🙌 Thanks fo reading! 🙌