Debugging Vue app not working?


I run the Vue development server at localhost:8080. 

I select "Debug localhost:8080" from the Run menu.

I set some breakpoints in my Vue component.

I activate my debugging helper extension in Chromium.

I reload the dev server and - nothing happens. Breakpoints are ignored.

Any suggestions? Thanks.

Comment actions Permalink

What language do you use for your components - TypeScript or JavaScript? Is your project created with Vue Cli?

Does it help if you add a vue.config.js with

configureWebpack: {
        devtool: 'source-map'
Comment actions Permalink

I didn't know you could use Typescript with Vue - I'm using Javascript. The project is created with Vue Cli, yes. I already have this in my `vue.config.js`:


configureWebpack: (config) => {
config.devtool = 'source-map'


Does the PHPStorm project root somehow have to be the Vue folder? Because in my case it isn't, the Vue application is just a part of a frontend project.

Comment actions Permalink

Debugging works fine for me when using Vue.js projects created with Vue Cli, regardless of the folder used as a Vue project root

Could you share a project the issue can be repeated with?


Please sign in to leave a comment.