Nuxt.js Debugging for WebStorm
Tags: javascript, nuxt, tips, debugging
Published: 2019-03-30 23:48:56

---
title: Nuxt.js Debugging for WebStorm
published: true
tags: javascript,nuxtjs,tips,debugging
canonical_url: https://medium.com/@fernalvarez/nuxt-js-debugging-for-webstorm-9b4ef5415a5
---

![](https://cdn-images-1.medium.com/max/500/0*YtQbCCC1nlJs4-XH.jpg)<figcaption>The very first recorded computer bug (<a href="https://thenextweb.com/shareables/2013/09/18/the-very-first-computer-bug/">The Next Web</a>)</figcaption>

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.

![](https://cdn-images-1.medium.com/max/480/0*DLgXbrOtUiGWGbGq.gif)<figcaption>Everyone trying to get NuxtJS debugger running, including myself</figcaption>

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:

{% gist https://gist.github.com/jefer590/81459430c38c84eb0090f055d4aa72e0 %}

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](https://webpack.js.org/configuration/devtool/))

eval-source-map is a SourceMap that matchers exactly to the line number and this help us to debug in the client. ([More Info](https://webpack.js.org/configuration/devtool/#development))

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](https://webpack.js.org/configuration/devtool/#special-cases))

_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**](https://nodemon.io/) 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!!

{% gist https://gist.github.com/jefer590/968cc6e8610e6177f1e849ceca5b5558 %}

{% gist https://gist.github.com/jefer590/6e01f3d841215dff627c0874fee551eb %}

### WebStorm

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

#### Configure Server Side Debugging

1. Click on “Add Configuration”

![](https://cdn-images-1.medium.com/max/1024/1*7vA3RZKvAwmIQI4ZBsHffQ.png)

2. Click in the _plus_ sign and then in npm

![](https://cdn-images-1.medium.com/max/1024/1*8jLrzz5nxdB13T_ZkNR60w.png)

3. In _command_ use run and in _scripts_ use dev and save!

![](https://cdn-images-1.medium.com/max/1024/1*771GFyMn_S43BEGncG7yBw.png)

#### Configure Client Side Debugging

1. Go to the same _Add Configuration_ place

![](https://cdn-images-1.medium.com/max/1024/1*7vA3RZKvAwmIQI4ZBsHffQ.png)

2. Click the _plus_ sign and click in _Javascript Debug_

![](https://cdn-images-1.medium.com/max/1024/1*npAZEb45DgPzKcSIIYOKTQ.png)

3. 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!

![](https://cdn-images-1.medium.com/max/1024/1*7ribO4hCoikNUJZaChk5TA.png)

#### How to get both running

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

![](https://cdn-images-1.medium.com/max/1024/1*XxlkUBd8Z0xz6JqxFCb0lg.png)

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

![](https://cdn-images-1.medium.com/max/1024/1*VmI-8YwesmjpSB6jJrmllQ.png)

And we are absolutely ready to debug our application! 🎉

#### Demo Video!

{% youtube -zqknOA25-o %}

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

![](https://cdn-images-1.medium.com/max/1024/0*fZaDbuMc_XjPtFC4.jpg)<figcaption>The Hunter from Bloodborne (From Software)</figcaption>

### 🙌 Thanks fo reading! 🙌