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

Question

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



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





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

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

谢谢。

Answer 1

什么工具在dev tools你是用来获取那个列表的吗？似乎是一个缓存文件列表，因此它显示了代码的所有旧版本。

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