Search code examples
vue.jsgoogle-chromewebpackdevtools

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

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.

Chrome DevTools Source Tab

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.

UPDATE 1:

Here is what I have found so far. The sources panel does not load the vue file as expected in local development on localhost.

On our production site some page will and others won't. The only differences between the pages that do and the ones that don't are relative imports.

Example Pages that work will use imports that utilize Webpack's resolve alias configs.

Pages that don't will have imports with paths like import file"./somefile.js" or import file from "../../folder/somefile.js"

I have tested locally by changing import paths to Webpack's resolve alias paths but it did not fix the issue.

Does anyone suffering from this issue import similarly?

Update 2:

I created a project/repo showing the issue so the Chromium team can fix the issue.

Update 3: Firefox seems to be having a very similar issue that Chromium had. I opened an issue with Vue because while Chromium fixed it with a band aid, clearly the root is Vue and Webpack.

Final Update: I posted a vite config for migrating to vite. I was finally afford some time a month ago to do all of the work. You can view a breakdown here. https://github.com/vuejs/vue/issues/12689#issuecomment-1536760736

https://github.com/vuejs/vue/issues/12689

Solution

  • This was an issue with chromium and the ticket has been closed and marked fixed. Current fix is working in Version 103.0.5016.0 (Official Build) canary (64-bit).