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

【问题标题】：How can I debug vue cli plugins with vscode?如何使用 vscode 调试 vue cli 插件？
【发布时间】：2019-12-14 18:02:48
【问题描述】：

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

【问题讨论】：

标签： vue.js debugging vue-cli vscode-debugger

【解决方案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"

（也可以使用 local vue cli 服务和 ./node_modules/.bin/vue-cli-service 路径。全局 vue cli 服务不同。）

当我通过 yarn run debug:cli 或 debug:vueui 触发它时，我可以使用 chrome://inspect 或 vscode 调试它们（cmd shift p > attach node process）

另外如果你想直接用 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
    }
  ]
}

【讨论】：