Nuxt.js: Breakpoints doesn't work in vscode debugger

[ralphchristianeclipse]

I'm using this command to debug nuxt server store

"debug": "node --inspect-brk=9229 node_modules/nuxt/bin/nuxt",

and in vs code
i'll attach it when it runs

{
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9229,
      "protocol": "inspector",
      "restart": true,
      "sourceMaps": true
    }

seems breakpoints doesn't work and grayed out turned sourceMaps on too

_{This bug report is available on Nuxt.js community (#c2374)}

[tim-yao]

I can not make breakpoints working in Vscode and WebStorm. I followed https://github.com/nuxt/nuxt.js/issues/2341 It stops in first line but not hit breakpoints. So as above indicated, it's a bug I think. Hope we can have a solution soon.

[sobolevn]

@ralphchristianeclipse @tim-yao any news on this one?

[tim-yao]

Hi @sobolevn I have made it working, looks not a issue anymore. Here is my VSCODE debug config for my Nuxt project:

{
            "type": "node",
            "request": "launch",
            "name": "My Nuxt project",
            "protocol": "inspector",
            "program": "${workspaceRoot}/node_modules/.bin/nuxt",
            "stopOnEntry": true,
            "args": ["dev"],
            "cwd": "${workspaceRoot}",
            "sourceMaps": true,
            "env": {
                "NODE_ENV": "development",
                "DEBUG": "nuxt:*,app"
            }
        }

Use debugger as breakpoint works now.

[sobolevn]

@tim-yao debug app actually starts, but I am facing this problem:

Could you please provide a reproduction repo?

That's the setup I am using: https://github.com/wemake-services/wemake-vue-template
My launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "My Nuxt project",
      "protocol": "inspector",
      "program": "${workspaceRoot}/node_modules/.bin/nuxt",
      "stopOnEntry": true,
      "args": ["dev"],
      "cwd": "${workspaceRoot}",
      "sourceMaps": true,
      "env": {
          "NODE_ENV": "development",
          "DEBUG": "nuxt:*,app,client"
      }
        }
  ],
  "compounds": []
}

[tim-yao]

Hi @sobolevn yes, just noticed I still have the same issue as you. However, I can use debugger to stop the code. It's not as good as IDE "red dot" breakpoint but at least I can do the debug now.
Also when it stops, the VSCODE opens server-bundle.js which is the Webpack generated file and stops in same code line. I can put IDE breakpoints in that file.

Mostly it is a source maps issue still need some one to find a solution. Not sure how to make it.
Hope someone has better understanding of this, I am not sure how to do: https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-source-map-tips

Are you using Webpack? By default, it outputs paths with a webpack:/// prefix, which the debug adapter can't resolve. You can change this in your Webpack configuration with the devtoolModuleFilenameTemplate option, or try using the 'inspector' protocol, which provides some extra options for resolving these paths.

[sobolevn]

I verify that debugger statement works.

[clarkdo]

This issue should be relate to https://github.com/vuejs/vue-loader/issues/1163, as the comments said, you may try to upgrade babel to 6.26.3, or just try nuxt-edge.

[sobolevn]

I am already using the latest babel-core. It sill does not solve it.

» cat node_modules/babel-core/package.json        
{
  "name": "babel-core",
  "version": "6.26.3",
  ...
}

I will try to update to nuxt-edge.

[jdamboeck]

Any luck?

[clarkdo]

@sobolevn @jdamboeck It seems that vue-loader issue is still not solved, let's keep tracking it.

And you can also take a look at: https://github.com/webpack/webpack/issues/7199#issuecomment-389931858.

If it's confirmed to be a proper fix for css sourcemap, I'll change the Nuxt cssSourceMap behaviour.

[KennanChan]

New to nuxt and I am facing the same debugging issue.

After setting the webpack devtool for the server to "inline-source-map" as I set in Vue projects, breakpoints now get hit.

In my nuxt.config.js, I have:

if (isClient)
  config.devtool = 'eval-source-map'
else
  config.devtool = "inline-source-map"

in the build configuration. Just refer to the documentation and make the modification.

I am using the vs code debug configuration provided by @tim-yao .

Now server side code can be debugged in vs code and client side code can be debugged in Chrome.

It will be perfect if all the code can be debugged right in vs code. Any solution?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.