小编jus*_*eat的帖子

如果我没有很好地表达标题，我很抱歉，因为我完全不知道技术术语是什么，也不知道如何寻找答案。直到我将 Google Chrome 更新到版本 99.0.4844.51 后，这才成为问题。这也是 Windows Edge 中的问题，但 Firefox 97.0.2 开发工具中不是。

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

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

我不确定基于 Chrome 的 DevTools 发生了什么变化。Chrome 有新的设置吗？

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

更新1：

这是我到目前为止所发现的。源面板不会按照本地主机本地开发中的预期加载 vue 文件。

在我们的生产站点上，有些页面会，有些则不会。这样做的页面和不这样做的页面之间的唯一区别是相对导入。

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

没有的页面将包含带有类似import file"./somefile.js"或 之类的路径的导入import file from "../../folder/somefile.js"

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

有没有人遇到这个问题类似进口？

更新2：

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

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

最终更新： 我发布了一个用于迁移到 vite …

有人对 Vue 开发工具中的某个功能有见解或资源吗？在组件窗格上，它显示了我的组件，然后显示了这些红色和黄色的小方块，以及我假设的组件的性能。

当我第一次加载应用程序时，它们不会出现，但例如我更新了一个文本输入组件，当用户输入新值时，该组件会验证其自己的格式。这会更新 Vuex 存储和/或计算属性，但令我困惑的是为什么整个事情像一棵愤怒的圣诞树一样亮起来。不相关的组件显示这些性能数据。

当我检查 Vuex 历史记录中的突变时，我只更新一项。

在询问之前我尽了最大努力四处搜索，但找不到任何有关此功能的信息。一般来说，Vue 开发工具没有太多好的资源，这有点令人惊讶，因为它们通常都有很好的文档。