Attach to Vuejs
Hi,
let's say I started my vue app with the windows terminal "yarn serve" and want to attach the debugger to that process because I don't like the Devtools of the common browsers. What can I do to achieve this?
I tried
- running the "yarn serve" command in the terminal, ctrl+shift clicked the localhost url to start a debug session. This works sometimes when starting it like for the first time. When I cancel the command in the terminal and start a new debug session by using the temporary debug configuration, the breakpoints are no longer hit
- created a nodejs debug configuration pointing to the url of the app, breakpoints are not hit
- created a nodejs debug configuration pointing to a proxy url of the app, setting the proxy url also in chrome
- used a npm script to run "npm run serve", but no breakpoints are hit either
So now I try to just attach, so I can debug because I like it to start the app independently of Rider (let's say via windows terminal or powershell).
Thanks and kind regards
Please sign in to leave a comment.
>When I cancel the command in the terminal and start a new debug session by using the temporary debug configuration, the breakpoints are no longer hit
Hmm... What do you mean by canceling the command? Is the dev server still running?
>created a nodejs debug configuration pointing to the url of the app, breakpoints are not hit
This configuration allows running/debugging Node.js apps, it can't be used for debugging applications that run in browser, nether it accepts http URL as entry points
>created a nodejs debug configuration pointing to a proxy url of the app, setting the proxy url also in chrome
same as above
>used a npm script to run "npm run serve", but no breakpoints are hit either
equal to running yarn serve in terminal - it builds the app and starts a dev server, but doesn't attach a debugger to the browser tab where your application is running
The right way to debug Vue.js applications is described in Help (https://www.jetbrains.com/help/webstorm/2021.1/vue-js.html#vue_running_and_debugging_debug): you have to start the server with yarn serve and then use JavaScript Debug configuration for debugging
Ok got it. I recognized that the debugger stops at some times even if there is no breakpoint, for example at the declaration of a class (i dont know when this happens).
The solution you provided opens up a new browser, but I actually want to use the running browser (when I do yarn serve, this will start up a new browser).
There is no way to attach to a running browser. The IDE uses Chrome protocol with
--remote-debugging-portoption for javascript debugging. But there is no way to pass this option to a running Chrome