Nuxt.js: Possible to debug with breakpoints in Visual Studio Code?

Created on 7 Dec 2017  路  5Comments  路  Source: nuxt/nuxt.js

Attempting to debug SSR requests with VSCode on macOS is currently a pain. There are basically 4 places to check for errors:

  1. Browser screen when the error is caught and displayed
  2. Browser console
  3. Terminal
  4. VSCode debug tools

The pain arises from the fact that the error message could be on all, some, or none of these. My most fervent wish would be to use the editor debug mode with breakpoints, but current configuration does not make them usable (source maps not found):

{
    "type": "node",
    "request": "launch",
    "name": "launch nuxt",
    "protocol": "inspector",
    "program": "${workspaceRoot}/build/node_modules/.bin/nuxt",
    "cwd": "${workspaceFolder}/build"
}

Caveat: my repo has the Nuxt project in /build/ folder not at root.

This question is available on Nuxt.js community (#c2042)

Most helpful comment

Why is it, that you always find the solution yourself 15 minutes after you post a comment?
Anyways, for future reference.
On Windows this works if you use modify the program parameter a bit

"program": "${workspaceRoot}/node_modules/nuxt/bin/nuxt"

All 5 comments

Do you want to debug builded dist ? In build, there is no detailed source map, you can config it by:

// nuxt.config.js
build: {
    extend(config, options) {
      return Object.assign({}, config, {
        devtool: 'source-map'
      })
    }
  }

If you want to debug in dev mode, use:

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

I didn't get this to work.

The first error I got is:

Cannot launch program 'C:\Repositories\non-ts-nuxt\node_modules\.bin\nuxt'; setting the 'outFiles' attribute might help.

Then after adding the outFiles attribute with pretty much every possible config I could think of, I keep getting:

Cannot launch program 'C:\Repositories\non-ts-nuxt\node_modules\.bin\nuxt' because corresponding JavaScript cannot be found.

Important detail: I ran this on Windows10

Why is it, that you always find the solution yourself 15 minutes after you post a comment?
Anyways, for future reference.
On Windows this works if you use modify the program parameter a bit

"program": "${workspaceRoot}/node_modules/nuxt/bin/nuxt"

@luminarious @clarkdo Can you please provide a full working example? I have spent the whole day trying to put this together.

There's almost no valid information on this topic available.

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jaredreich picture jaredreich  路  3Comments

mattdharmon picture mattdharmon  路  3Comments

msudgh picture msudgh  路  3Comments

gary149 picture gary149  路  3Comments

mikekidder picture mikekidder  路  3Comments