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

Question

我有一个Vue应用程序，正在尝试在Chrome DevTools中对其进行调试。问题是当我尝试查找要调试的文件时，我会得到一个具有相同名称加上一些奇怪哈希值的文件列表：

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

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

这些奇怪的文件是什么，如何找到所需的文件（包括原始源代码）。是否有方法让 DevTools 仅列出原始源代码文件？

谢谢。

- gib65

---

哈希是为了在文件发生更改时防止缓存。您可以启用“源映射”以更轻松地调试；它们会告诉您的浏览器和开发工具如何链接回原始、未压缩的版本。您还可以在本地开发环境中完全关闭缩小。 - ceejayoz

我建议在这里关注该问题：https://github.com/vuejs/vue-cli/issues/2978 一些解决方案部分有效（取决于您的浏览器、TypeScript 使用等）。 - exmaxx

Answer 1

天哪 - 调试我的调试环境。这太令人发狂了。

我正在使用Vue v2，并在我的应用程序中使用vuetify。以下是一个完整的vue.config.js配置，它解决了我的问题。

// vue.config.js file

const path = require('path')

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: [
    'vuetify'
  ],
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'development') {
      // See available sourcemaps:
      // https://webpack.js.org/configuration/devtool/#devtool
      config.devtool = 'eval-source-map'
      // console.log(`NOTICE: vue.config.js directive: ${config.devtool}`)

      config.output.devtoolModuleFilenameTemplate = info => {
        let resPath = path.normalize(info.resourcePath)
        let isVue = resPath.match(/\.vue$/)
        let isGenerated = info.allLoaders

        let generated = `webpack-generated:///${resPath}?${info.hash}`
        let vuesource = `vue-source:///${resPath}`

        return isVue && isGenerated ? generated : vuesource
      }

      config.output.devtoolFallbackModuleFilenameTemplate =
        'webpack:///[resource-path]?[hash]'
    }
  },
})

- bitterpill

Answer 2

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

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

- T. Short

Answer 3

为了让 Chrome 正确显示源代码，您需要在开发部署中生成 Source Maps。我不确定您使用的是什么构建和打包工具，但很可能您已经有了这方面的支持。Chrome 详细信息请参见：https://developer.chrome.com/docs/devtools/javascript/source-maps/。

- Omeri

Answer 4

我在项目中遇到了许多开发人员，他们不知道有官方的浏览器扩展程序可以用于调试Vue、Router、VueX等。

偶然看到这个问题促使我发布这个救命链接，为那些来到这里但错过了这个必要工具的人提供帮助：

https://devtools.vuejs.org/guide/installation.html

- Marc

Answer 5

我找到了一个解决方法。虽然您无法查看文件的源代码，但只需在Vue热重新加载更改时更改要查看的文件的代码（添加控制台或其他内容），然后检查开发人员控制台即可访问源代码。

- iRestMyCaseYourHonor