为什么 Chrome DevTools 会显示我的 Vue 应用程序源代码的多个乱码版本？

Question

我有一个 Vue 应用程序，我正在尝试在 Chrome DevTools 中调试它。问题是当我试图找到我想要调试的文件时，我得到了一个同名文件列表，加上一些奇怪的散列在末尾：

当我打开任何一个文件时，我得到一些乱码的缩小代码：

有时我可以找到我想要的文件（带有原始源代码），但有时找不到。

这些奇怪的文件是什么，我怎样才能找到我想要的文件（带有原始源代码）。有没有办法让 DevTools 只列出原始源代码文件？

谢谢。

Answer 1

您使用什么工具来dev tools获取该列表？看起来像是缓存文件的列表，因此它显示了代码的所有旧版本。

如果您转到network选项卡并重新加载页面。您应该会看到浏览器下载的所有资源的列表。选择js过滤器，您应该会在该列表中的某个位置看到您的vue js bundle（由 webpack 制作）。