Debugging is broken in the official scaffolds

I’m maintaining a Vue2 project in which I’ve recently upgraded @vue/cli-service to version 5.0.4 (from 4.5.0).
Now I’ve noticed that I can’t use my browser devtools to debug the app anymore. Specifically, when I open the devtools and press CTRL+P and type App.vue, the browser opens a compiled version of that file. Previously, it would open the original source file and allow me to place working breakpoints in that file.

This problem occurs in Chrome, Edge, and Firefox.

This problem even happens to the default project scaffold generated by the latest @vue/cli (version 5.0.4 also), with typescript and babel disabled (eg the project generated using vue create testProject).

As a matter of fact, this problem even happens to the default Vue3/Vite project scaffold generated by npm init vue@latest. With or without typescript. Yes, I’m using VueDevtools, but it is no substitute for the ability to place breakpoints and step through the code.

I’ve already tried setting configureWebpack.devtool = 'source-map' - that hasn’t had any effect.

Am I doing something wrong?

Hi @andrewsm80

This is working fine for me. You can add folder to workspace and it will open the original source files and allow you to place breakpoints in the files.

Hope this helps!!