How can I debug vue cli plugins with vscode? - vue.js

Question

I am developing some vue cli plugins like vuetify's to create a boilerplate to other developers, but sometimes I need to debug it. I am really tired of using console.log. How can I debug this kind of plugins especially with vscode?

Answer 1

Ok it's done.
I just added to main project's package.json > scripts object these lines (not the cli plugin's itself 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"
(Also you can use local vue cli service with ./node_modules/.bin/vue-cli-service path. Global vue cli service is different.)
When I trigger it via yarn run debug:cli or debug:vueui, I can debug them with chrome://inspect or vscode (cmd shift p > attach node process)
Also if you want to debug it with vscode directly, here is my vscode launch.json file.
{
"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
}
]
}