【发布时间】: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。
【问题讨论】:
-
我也有同样的问题,高于谷歌浏览器的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