19

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

Improve this question
6
  • 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. developer.chrome.com/blog/new-in-devtools-99/… Commented Mar 8, 2022 at 8: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. Commented Mar 8, 2022 at 12:58
  • 1
    I have added a ticket to Chromium for the issue. bugs.chromium.org/p/chromium/issues/detail?id=1304217 Commented Mar 8, 2022 at 14:52
  • 1
    Same thing here :(. Our entire team is having this issue (anyone who updated to the latest Chrome). Commented Mar 8, 2022 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. Commented Mar 8, 2022 at 19:11

2 Answers 2

Reset to default
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).

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Is this definitely an issue in Chrome? I get the same with Firefox
@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 (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."
Created issue with Vue Repo. github.com/vuejs/vue/issues/12689
just wondering did you come up with anything to help get around this issue?
I continue to have the issue in Chrome version 104.0.5112.79.
|
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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.