How to debug Nuxt.js with VS Code and Chrome

Every front-end developer will have their different ways of doing things, but one thing that affects a lot of them is an over-reliance on the console log method to debug—and for good reason. It’s tried and tested, reliable and easy to use. As solid as console.log() is though, you can’t use it for everything. Here’s what to use instead...

If you’ve been using a Javascript framework like Vue or React you should know that Visual Studio Code (VS Code) has extensions to debug your code with Chrome and Firefox. These extensions boot an instance of your browser running your application, and break on your predetermined breakpoints. You can step through your code in the browser’s dev tools and see exactly what is happening at any stage of the code being executed. It’s fairly simple to get Visual Studio Code working, although some set up is required.

Now, you're wondering if this works with server-side rendering (SSR) frameworks like Nuxt and Next? Of course it does, but it does needs some prior configuration: 

How to configure Visual Studio Code for Nuxt and Next

1. The first thing you need to do is to open your project in VS Code. This can be a new Nuxt app created using create-nuxt-app, or an existing app you’ve already been working on. 

2. Next, make sure the debug extension has been added to VS Code and activated. 

3. You then need to configure your Nuxt app. Open nuxt.config.js and add the following to the build configuration:

build: {
  extend(config, ctx) {
    if (ctx.isDev) {
      config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
    }
  }
}

One of the issues faced with debugging an SSR app is correct source mapping. VS Code solves this issue by using source-map on the client side and inline-source-map on the server side. Without this, server side sourcemapping will fail. You can read more about extending the Nuxt build property here.

4. Next you need to configure VS Code. In the app’s root folder, you should see a .vscode folder like this:

5. Open launch.json. It should look like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt"
      },
      "windows": {
        "program": "${workspaceFolder}/node_modules/nuxt/bin/nuxt.js"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

That’s it done successfully, now it’s time to start debugging.

How to debug Nuxt.js using VS Code 

1. Use yarn dev to run your app then run the debugger (⇧⌘D). 

2. Click the play icon button, making sure the dropdown is at “fullstack: nuxt”. A new instance of Chrome running your app will start and the Debug Console panel will appear at the bottom of the VS Code window.

3. It’s time to start setting breakpoints. Breakpoints are set by right-clicking the empty space to the left of your code and choosing “Add Breakpoint”.

One thing to bear in mind when setting breakpoints is that there are two separate debug processes running–client and server. If you want to set a breakpoint in server middleware, “server” must be selected, whereas “client” should be selected for a breakpoint in a component’s method etc. Failure to select the correct process will result in weird bugs.

4. Refresh the chrome window and you should see it break where you’ve set your breakpoint.

That’s it. Now you’re up and running, well done. 

Debugging Nuxt.js with VS Code and Chrome can be a complicated process. If you need some help, or want to know more, get in touch or visit our services page to learn more about what After Digital can do for you.