Question

我正在开发一些vuetify's之类的vue cli插件，以为其他开发人员创建样板，但有时我需要对其进行调试。我真的对使用console.log感到厌倦。如何调试这类插件，尤其是使用vscode？

Answer 1

好了！

我刚刚将添加到主项目的package.json>脚本中的这些行（不是cli插件本身的package.json）

 "debug:cli": "node --inspect-brk --preserve-symlinks ./node_modules/.bin/vue invoke vue-cli-plugin-hello-world",
 "debug:vueui": "node --inspect --preserve-symlinks ./node_modules/.bin/vue ui"

（此外，您还可以将本地vue cli 服务与./node_modules/.bin/vue-cli-service路径一起使用。全局vue cli 服务有所不同。）< / p>

当我通过yarn run debug：cli或debug：vueui触发它时，我可以使用chrome：// inspect或vscode（cmd shift p>附加节点进程）对其进行调试

如果您想直接使用vscode对其进行调试，这也是我的vscode launch.json文件。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug my vue cli plugin",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "debug:cli"
      ],
      "console": "integratedTerminal",
      "port": 9229
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Vue UI",
      "runtimeExecutable": "yarn",
      "runtimeArgs": [
        "debug:vueui"
      ],
      "console": "integratedTerminal",
      "port": 9229
    }
  ]
}

如何使用vscode调试vue cli插件？

1 个答案: