Wednesday, 21 August 2019

Debugging nuxtjs .vue Files On the Server

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 brakepoint keeps moving to the .catch line:

enter image description here

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
        }
    ]
}

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



from Debugging nuxtjs .vue Files On the Server

No comments:

Post a Comment