使用 vs 代码设置 nuxt/vue 调试的语法错误

Posted 2023-02-22

【中文标题】使用 vs 代码设置 nuxt/vue 调试的语法错误

【英文标题】：Syntax error setting up nuxt/vue debugging with vs code

【发布时间】：2019-10-27 09:59:12

【问题描述】：

我正在尝试在 win 10 的 vs 代码中设置 nuxt/vue 项目的调试。我正在使用 git-bash。我找到了https://medium.com/@justin.ramel/nuxt-js-debugging-in-visual-studio-code-822ff9d51c77

按照我已将 package.json 更改为

的说明

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

但是：

$ 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.

给出错误的nuxt文件是：

    #!/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

我怎样才能让它工作？

编辑：

我终于找到了

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

让我克服了那个错误。但是我有一个新问题：当我尝试调试时，我得到：

看起来我正在尝试运行 package.json。任何想法如何解决这个问题？

编辑2：

根据文章编辑启动 json 后：

  "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

我来了

有什么想法吗？

编辑：

将 launch.json 更改为：

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

我现在可以将调试器附加到进程。但它似乎不会在断点处停止。

【问题讨论】：

尝试节点 --inspect=0.0.0.0 node_modules/nuxt/bin/nuxt

对不起，我得到相同的输出，请参阅编辑。

您无法获得相同的输出。 node_modules/nuxt/bin/nuxt 是一个js文件，和你帖子里的完全不一样

但是你看到了错误： basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") 我不明白跨度>

如果你使用 node_modules/nuxt/bin/nuxt 则不会发生此错误，因为它的 js 文件具有完全不同的内容

【参考方案1】：

您引用的文章提到：

我可以通过将行更改为：

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

检查这是否足够。

同样，nuxt/nuxt.js issue 2528 包括：

目前通过稍微关注那篇文章使其工作。

        "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 还包括：

windows平台的正确命令应该是这样的

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

OP 提到：

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

---

关于错误消息“无法启动程序...设置'outFiles'属性可能会有所帮助”，问题“Cannot debug serverless application in Visual Studio Code”包括：

如果我指向 node_modules/serverless/bin，则一切正常：

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

你在文章“Running and debugging AWS Lambda functions locally with the Serverless framework and VS Code”的cmets中还有其他线索。

---

OP指向standard/standard issue 260中说明的提示：

debugger // eslint-disable-line

or:

/* eslint-disable no-debugger */

另外seen here，在 Google Chrome 的上下文中支持调试器命令作为在代码中设置断点的工具。 另见“how to disable eslint rules when you need to”。

【讨论】：

@user61629 我已经编辑了我的答案以解决您编辑的问题。

@user61629 据我了解，使用无服务器框架是关键，以避免出现特定的错误消息。

@user61629 将--debug-brk 提供帮助，如***.com/questions/34835082/…

@user61629 对不起，我的意思是node --inspect-brk (***.com/questions/43210203/…)

这对我不起作用，但调试器 // eslint-disable-line - 来自文章 - 有帮助。