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

wnavrhmk  于 2022-11-17  发布在  Vue.js
关注(0)|答案(5)|浏览(295)

我有一个Vue应用程序,我试图在Chrome DevTools中调试它。问题是,当我试图找到我想调试的文件时,我得到了一个同名文件的列表,并在末尾添加了一些奇怪的哈希:

当我打开任何一个文件时,我会得到一些乱码:

有时我可以找到我想要的文件(带有原始源代码),但有时不行。
这些奇怪的文件是什么?我怎样才能找到我想要的文件(包含原始源代码)?有没有办法让DevTools只列出原始源代码文件?

  • 谢谢-谢谢
hs1ihplo

hs1ihplo1#

你在dev tools中使用什么工具来获得这个列表?看起来像是一个缓存文件的列表,所以它显示了你代码的所有旧版本。
如果你进入network选项卡并重新加载页面,你应该会看到一个浏览器下载的所有资源的列表。选择js过滤器,你应该会在列表中的某个地方看到你的vue js bundle(由webpack制作)。

zpgglvta

zpgglvta2#

要使chrome正确显示源代码,您需要在开发部署中生成源Map。
我不确定您使用什么工具来构建和捆绑,但很可能您已经有了对此的支持。
镀铬细节:https://developer.chrome.com/docs/devtools/javascript/source-maps/

aor9mmx1

aor9mmx13#

我的天-调试我的调试环境。这太让人抓狂了。
我正在使用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]'
    }
  },
})
uubf1zoe

uubf1zoe4#

我找到了一个解决办法。虽然你看不到你的文件的源代码,但只要在Vue热重新加载你的更改时更改你想看到的文件的代码(添加控制台或其他东西)。我突然想到,当你检查开发者控制台时,源代码是可以访问的。

jogvjijk

jogvjijk5#

有一个令人惊讶的数量开发人员,我遇到的项目,不知道有官方的浏览器扩展调试Vue,路由器,VueX等。
偶然发现这个问题促使我发布这个拯救生命的链接,为那些登陆这里,并错过了这个重要工具的存在:
https://devtools.vuejs.org/guide/installation.html

相关问题