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

【问题标题】：Why does Chrome DevTools show multiple garbled versions of my source code for my Vue application?为什么 Chrome DevTools 会为我的 Vue 应用程序显示多个乱码版本的源代码？
【发布时间】：2020-04-16 21:50:37
【问题描述】：

我有一个 Vue 应用程序，我正在尝试在 Chrome DevTools 中对其进行调试。问题是当我试图找到我想要调试的文件时，我得到了一个同名文件列表以及一些奇怪的哈希值：

当我打开任何一个文件时，我都会得到一些乱码：

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

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

谢谢。

【问题讨论】：

hash 是为了防止文件变化时的缓存。您可以启用“源映射”以更轻松地调试；他们会告诉您的浏览器和开发工具如何链接回原始的、未缩小的版本。您也可以在本地开发环境中完全关闭缩小功能。
我建议在此处关注问题：github.com/vuejs/vue-cli/issues/2978 某些解决方案部分有效（取决于您的浏览器、打字稿使用等）

标签： google-chrome vue.js devtools

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要让 chrome 正确显示源代码，您需要在开发部署中生成 Source Maps。

我不确定您使用什么工具来构建和捆绑，但您可能已经支持此功能。

Chrome 详细信息： https://developer.chrome.com/docs/devtools/javascript/source-maps/

【讨论】：