3

I'm trying to set up debugging of a nuxt/vue project in vs code on win 10 . I'm using git-bash. I've found https://medium.com/@justin.ramel/nuxt-js-debugging-in-visual-studio-code-822ff9d51c77

Following the directions I've changed my package.json to

{
  "name": "nuxt4",
  "version": "1.0.0",
  "description": "My classy Nuxt.js project",
  "author": "hh",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "dev-debug": "node --inspect node_modules/.bin/nuxt",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "glob": "^7.1.3",
    "nuxt": "^2.0.0",
    "vue2-google-maps": "^0.10.6",
    "vuetify": "^1.2.4",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "nodemon": "^1.11.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

Launch.json:

{
 "configurations": [
{
  "type": "node",
  "request": "attach",
  "name": "Attach to Nuxt",
  "port": 9229
  }
]

}

However:

$ npm run dev-debug

> nuxt4@1.0.0 dev-debug E:\ENVS\js\nuxt4
> node --inspect=0.0.0.0 node_modules/.bin/nuxt

Debugger listening on ws://0.0.0.0:9229/4eda468d-39a4-4ddb-9a73-23e4fa60ed8e
For help, see: https://nodejs.org/en/docs/inspector
E:\ENVS\js\nuxt4\node_modules\.bin\nuxt:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nuxt4@1.0.0 dev-debug: `node --inspect=0.0.0.0 node_modules/.bin/nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nuxt4@1.0.0 dev-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The nuxt file giving the error is:

    #!/bin/sh
    basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

    case $(uname) in
        *CYGWIN*) basedir=$(cygpath -w "$basedir");;
    esac

    if [ -x "$basedir/node" ]; then
    "$basedir/node"  "$basedir/../nuxt/bin/nuxt.js" "$@"
    ret=$?
    else 
    node  "$basedir/../nuxt/bin/nuxt.js" "$@"
    ret=$?
    fi
    exit $ret

How can I get this working?

edit:

I eventually found that

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

got me past that error. However I have a new problem: when I try to debug I get:

enter image description here

It looks like im trying to run package.json. Any Idea how to fix this?

edit2:

after editing the launch json the following based on the articles:

{
  "type": "node",
  "request": "launch",
  "name": "Launch via NPM",
  "runtimeExecutable": "npm",
  "runtimeArgs": [
    "run-script",
    "dev-debug"
  ],

  "program": "${workspaceFolder}\\node_modules\\.bin\\nuxt",
  "args": [
    "invoke",
    "local",
    "-f",
    "<function-name>",
    "--data",
    "{}" // You can use this argument to pass data to the function to help with the debug
],
  // "program": "E:\\ENVS\\js\\nuxt4\\node_modules\\.bin\\nuxt",
  "port": 9229
}

I'm getting

enter image description here

any thoughts?

edit:

Getting a little closer with launch.json changed to:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "npm run dev",
      "runtimeExecutable": "npm",
      "windows": {
        "runtimeExecutable": "npm.cmd"
      },
      "runtimeArgs": [
        "run",
        "dev-debug"
      ],
      "port": 9229
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceRoot}/start"
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Attach to Port",
      "address": "localhost",
      "port": 9229
    }
  ]
}

I'm now able to attach debugger to process.it does not appear to stop at breakpoints though.

user1592380
  • 34,265
  • 92
  • 284
  • 515

1 Answers1

4

The article you are referencing mentions:

I was able to get this to work by changing the line to:

"dev-debug": "node_modules/.bin/nuxt --inspect"

Check if that would be enough.

Similarly, nuxt/nuxt.js issue 2528 includes:

currently got it working by following that article a little bit.

{
        "type": "node",
        "request": "launch",
        "name": "Launch via NPM",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
          "run-script",
          "dev-debug"
        ],
        "port": 9229
      }

"dev-debug": "node --inspect node_modules/.bin/nuxt"

nuxt/nuxt.js issue 433 also includes:

The correct command for windows platform should look like this

"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt",

The OP mentions:

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

Regarding the error message "Cannot launch program… setting the 'outFiles' attribute might help", the question "Cannot debug serverless application in Visual Studio Code" includes:

if I point at node_modules/serverless/bin instead, things work as expected:

"program": "${workspaceFolder}\\node_modules\\serverless\\bin\\serverless",

You have other clues in the comments of the article "Running and debugging AWS Lambda functions locally with the Serverless framework and VS Code".


The OP points to a tip illustrated in standard/standard issue 260:

debugger // eslint-disable-line

or:

/* eslint-disable no-debugger */

Also seen here, in the context of Google Chrome supports debugger command as a tool to setup a breakpoint in code.
See also "how to disable eslint rules when you need to".

Community
  • 1
  • 1
VonC
  • 1,262,500
  • 529
  • 4,410
  • 5,250
  • @user61629 I have edited my answer to address your edited question. – VonC Jun 16 '19 at 18:07
  • @user61629 From what I understand, using the serverless framework is key, in order to avoid that specific error message. – VonC Jun 16 '19 at 19:16
  • @user61629 Would `--debug-brk` help, as in https://stackoverflow.com/questions/34835082/how-to-debug-using-npm-run-scripts-from-vscode#comment57597452_34853427 – VonC Jun 16 '19 at 20:07
  • @user61629 Sorry, I meant `node --inspect-brk` (https://stackoverflow.com/questions/43210203/what-is-the-proper-way-to-debug-an-npm-script-using-vscode#comment92291389_43212281) – VonC Jun 16 '19 at 20:08
  • that didn't work for me , but debugger // eslint-disable-line - from the article - helped. – user1592380 Jun 17 '19 at 00:13
  • @user61629 Great! I have included that in the answer (with additional links) for more visibility. – VonC Jun 17 '19 at 05:15