【问题标题】:Google Chome 99+ DevTools Source Tab not showing VUE file code in Webpack SRC folderGoogle Chrome 99+ DevTools 源选项卡未在 Webpack SRC 文件夹中显示 VUE 文件代码
【发布时间】:2022-07-22 02:05:53
【问题描述】:

如果我没有很好地表述标题,我很抱歉,因为我完全不知道技术术语是什么以及如何搜索答案。在我将 Google Chrome 更新到版本 99.0.4844.51 之前,这不是问题。这也是 Window's Edge 中的问题,但不是 Firefox 97.0.2 开发工具。

我有一个相当标准的多页 Vue 2 应用程序。我正在尝试调试一个问题,在 Chrome DevTools 中,NOT Vue DevTools,我曾经能够查看单个文件组件的源代码并逐步执行方法等。

Chrome DevTools Source 标签的左侧是 Page 标签。在 webpack:// 文件夹中有四个子文件夹,其中之一是 SRC。它列出了我的 .vue 文件,但没有显示典型的模板、脚本和样式代码部分,而是显示了以下内容。导入列表和热重载。

我不确定基于 Chrome 的 DevTools 发生了什么变化。 Chrome 中是否有新设置?

如果您可以就如何更好地表达我的问题提出建议,请提出建议。感谢您的耐心和理解。

更新 1:

这是我目前发现的。在 localhost 的本地开发中,源面板未按预期加载 vue 文件。

在我们的生产网站上,有些页面会,有些则不会。执行和不执行的页面之间的唯一区别是相对导入。

有效的示例页面将使用利用 Webpack 解析别名配置的导入。

没有导入路径的页面,例如 import file"./somefile.js"import file from "../../folder/somefile.js"

我已经通过将导入路径更改为 Webpack 的解析别名路径进行了本地测试,但它没有解决问题。

是否有人遭受此问题的类似进口?

更新 2:

我创建了一个项目/存储库来显示该问题,以便 Chromium 团队可以解决该问题。

更新 3: Firefox 似乎遇到了与 Chromium 非常相似的问题。我用 Vue 提出了一个问题,因为虽然 Chromium 用创可贴修复了它,但显然根源是 Vue 和 Webpack。

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

【问题讨论】:

  • 我也有同样的问题,高于谷歌浏览器的99.0.4844.51版本。也许我们可以在这里找到一些线索。 developer.chrome.com/blog/new-in-devtools-99/…
  • 我也收到了。认为它可能与 vue-loader webpack 加载器有关,因为我们似乎得到了一个将模板和代码链接在一起的编译代码页。
  • 我已经为这个问题添加了一张到 Chromium 的票。 bugs.chromium.org/p/chromium/issues/detail?id=1304217
  • 同样的事情 :(。我们整个团队都遇到了这个问题(任何更新到最新 Chrome 的人)。
  • 我能够确认 Chrome 版本 98.0.4758.102 没有这个问题。更新了 Chromium 票证,提供更多详细信息。

标签: vue.js google-chrome webpack devtools


【解决方案1】:

我尝试使用eval-source-map。好像可以看到源代码。但是发生错误时仍然存在一些问题。直接定位到具体线路是不可能的。

【讨论】:

    【解决方案2】:

    这是 Chromium 的问题,该票已关闭并标记为已修复。当前修复在版本 103.0.5016.0(官方构建)金丝雀(64 位)中运行。

    【讨论】:

    • 这绝对是 Chrome 的问题吗?我对 Firefox 也有同样的感觉
    • @Tom 在创建这个 Stack Overflow 时,Firefox 很好,但我注意到上周某个或两个 Firefox 推送了更新并导致了与 Chrome 相同的问题。在这一点上,我认为这应该与 WebPack 和 Vue 一起提出。我已经尝试过其他的源映射配置,但我没有任何运气。根据 Chromium 开发人员 (bugs.chromium.org/p/chromium/issues/detail?id=1304217) 的评论 36 “但恕我直言,这是非常随意的。理想情况下,工具不应该在同一个 URL 下生成(和嵌入)不同的内容。”
    • 创建了 Vue Repo 的问题。 github.com/vuejs/vue/issues/12689
    猜你喜欢
    • 2021-07-31
    • 1970-01-01
    • 2020-06-07
    • 2020-10-21
    • 2017-03-04
    • 2020-07-24
    • 2020-04-17
    • 1970-01-01
    • 2014-02-22
    相关资源
    最近更新 更多