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

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服务不同。）

当我通过 yarn 运行 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
    }
  ]
}

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

How can I debug vue cli plugins with vscode?

debugging

vue.js

vue-cli

vscode-debugger