18

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

justalittleheat
  • 387
  • 2
  • 13
  • 2
    I have the same problem, which is higher than version 99.0.4844.51 of Google browser. Maybe we can find some clues here. https://developer.chrome.com/blog/new-in-devtools-99/#:~:text=%23-,Improved%20source%20folder%20tree%20in%20the%20Sources%20panel,-The%20source%20folder – zhuziyi Mar 08 '22 at 08:04
  • 3
    I'm getting this too. Think it may have something to do with the vue-loader webpack loader, as it seems we get a compiled code page that links together the template and code. – Dalaigh88 Mar 08 '22 at 12:58
  • 1
    I have added a ticket to Chromium for the issue. https://bugs.chromium.org/p/chromium/issues/detail?id=1304217 – justalittleheat Mar 08 '22 at 14:52
  • 1
    Same thing here :(. Our entire team is having this issue (anyone who updated to the latest Chrome). – Jack Mar 08 '22 at 18:11
  • 3
    I was able to confirm that Chrome version 98.0.4758.102 did not have this issue. Updated Chromium ticket with additional details. – justalittleheat Mar 08 '22 at 19:11
  • My Chrome just updated to version 100.x but unfortunately the issue is still present. Looks like your ticket has not been completed yet. Hopefully soon. – thedude19 Mar 30 '22 at 12:15

2 Answers2

1

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).

justalittleheat
  • 387
  • 2
  • 13
  • Is this definitely an issue in Chrome? I get the same with Firefox – Tom Jul 20 '22 at 16:39
  • 1
    @Tom At the time of creating this Stack Overflow Firefox was fine, but I noticed sometime last week or two Firefox pushed an update and caused the same issue that Chrome had. At this point I think this should be brought up with WebPack and Vue. I have tried other configurations for source mapping but I have not had any luck. Per comment 36 from the Chromium dev (https://bugs.chromium.org/p/chromium/issues/detail?id=1304217) "But it's quite arbitrary IMHO. And ideally tools shouldn't generate (and embed) different content under the same URL." – justalittleheat Jul 21 '22 at 17:34
  • Created issue with Vue Repo. https://github.com/vuejs/vue/issues/12689 – justalittleheat Jul 21 '22 at 18:06
  • just wondering did you come up with anything to help get around this issue? – blu10 Aug 02 '22 at 10:22
  • I continue to have the issue in Chrome version 104.0.5112.79. – blackcatweb Aug 11 '22 at 14:40
  • @blu10. The issue was resolved from me in Chrome. Whatever they did fixed it for my instance. For a period of time it was busted in Firefox as well. I am able to see the source maps there now. It seemed like is an issue with Vue Loader for certain versions of Vue. There has not been a lot of momentum from the Vue team in fixing it. Have you tried using ```debugger;``` in your JS code. I did have some success with using that to get the source maps to show in Chrome when it was not working. The source maps were not appearing without it. – justalittleheat Oct 27 '22 at 16:44
  • @blu10 I am planning on trying to migrate to Vite once I get a couple big projects out of the way. I will create an example repo of the migration if it works. Our app is multi-page and not exactly the typical frontend / backend stack you see documented for Vue applications. – justalittleheat Oct 27 '22 at 16:50
0

I have tries to use eval-source-map. It seems like that can see the source code. But there is still some problem when error happened. It would be impossible to locate the specific line directly.

neal
  • 164
  • 3
  • 15