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

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

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

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

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