DEV Community

silentmantra
silentmantra

Posted on

How to debug vue3 (composition api)?

Worked many years with angularjs. Loved the way i could debug it without transpiling and source maps - just pure JS. I was able to quickly navigate through all code in one merged JS file.

Now I'm having a hell debugging Vue3 components with Composition API. Ok, I can debug with watchers but there's no inline breakpoints, syntax highlighting, variable values on mouse hover, etc.

JS modules are easier but anyway it's annoying to deal with Proxies. Though maybe it could be eased with "Custom Object Formatters in Chrome DevTools".

Also the execution point starts jumping randomly between internal Vue code when you want to step in into your own function or something like this.

Any suggestions how to improve debugging of this 'brick' code in Vue?
Is there any better debugger like in VSCode, Webstorm or some settings/plugins for Chrome Devtools?

Image description

Oldest comments (0)