Debugging nuxtjs .vue Files On the Server in Docker

Question

I currently have a nuxt app setup as a univeral app in which I'm hosting using Docker. I've got pretty much everything working, the debugger attaches and finds local variables just fine when walking through middleware and api calls, but when debugging the asyncData method in the .vue file I can't see any of the local variables and my breakpoint keeps moving to the .catch line:

I also get a bunch of other random things in the current context, which in this case is "Module"??

I've added this line to my nuxt.config.js file as well to make sure it uses the correct source maps:

     /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      console.log(`IsClient: ${ctx.isClient}`);
      console.log(`isDev: ${ctx.isDev}`);
      if (ctx.isDev) { 
        config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
      }
    }
  }

Also here is my .vscode config:

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Docker: Attach to Node",
            "type": "node",
            "request": "attach",
            "remoteRoot": "/usr/share/nginx/app",
            "port": 9229,
            "address": "localhost",
            "localRoot": "${workspaceFolder}/app",
            "protocol": "inspector",
            "restart": true,
            "sourceMaps": true
        }
    ]
}

Also, here is the command I use to start the container:

 node --inspect=0.0.0.0:9229 \
            ./node_modules/.bin/nuxt \
            & nginx -g "daemon off;" \

I've tried a lot of different things including using babel-register and starting it with babel-node since its transpiled, but none of those methods worked.

Is there anything I'm missing here? Can we just not debug .vue files on the server when creating a universal app?

UPDATE

I switched to Webstorm and for whatever reason the debugging works flawlessly. I guess that is the difference between using an IDE and a text editor.

Answer 1

vs code attach inspector when your nuxt app is already started.
To see whats happen in server side, vs code have to launch your nuxt app.
Add this script to your package.json:

...
scripts: {
   "dev": "nuxt,
   "dev-debug": "node --inspect node_modules/.bin/nuxt",
   ...
}
...

In .vscode config or .vscode/launch.json:

"configurations": [{
    "type": "node",
    "request": "launch",
    "name": "Launch nuxt",
    "runtimeExecutable": "npm",
    "runtimeArgs": [
        "run",
        "dev-debug"
    ],
    "port": 9229
},
...

And finally, extend the build in nuxt.config.js to add source maps when we are running in development mode and ensure the correct type for both the client and server.

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

It's work for me on localhost, but I'm not sure it's working with remote root...

Also, it's not a perfect solution. I saw sometimes breakpoint jump from different line. I think this is because vs code cannot handle same lines in source and inline-source.

Alternative way:

To debug only javascript of a single file component (.vue), it's possible to extract the javascript part in an external .js file, and import it with <script src="./path-to-js"></script>.