Google Chome 99+ DevTools Source Tab not showing VUE file code in Webpack SRC folder

[zhuziyi1989]

I am sorry if I did not phrase the title well because I am at a complete lost of what the technical terminology is and really how to search for an answer. This was not an issue until I updated Google Chrome to Version 99.0.4844.51. This is also an issue in Window's Edge, but not Firefox 97.0.2 dev tools.

I have a fairly standard multi-page Vue 2 app. I am trying to debug an issue and in the Chrome DevTools, NOT Vue DevTools, I used to be able to see the source code of a single file component and step through methods etc.

On the left hand side in the Chrome DevTools Source Tab there is the Page tab. In the webpack:// folder you have four sub folders one of those is SRC. It lists my .vue files but instead of showing the typical template, script, and style code sections it shows the following. A list of imports and a hot reload.

I am not sure what changed with the Chrome based DevTools. Is there a new setting in Chrome or something?

If you can make suggestions on how to phrase my question better please advise. Thanks for your patience and understanding.

Via:stackoverflow