Why does Chrome DevTools show multiple garbled versions of my source code for my Vue application?

Question

I have a Vue application and I'm trying to debug it in Chrome DevTools. The problem is when I try to find the file I want to debug, I get a list of files with the same name plus some weird hash tacked onto the end:

When I open any one file, I get some garbled minified code:

Sometimes I can find the file I want (with the original source code) but sometimes not.

What are these weird files and how can I find the file I want (with the original source code). Is there a way of getting the DevTools to list only the original source code files?

Thanks.

Answer 1

OMG - debugging my debugging environment. It's SO maddening.

I'm working with Vue v2, and I'm using vuetify in my app. Here is a complete vue.config.js configuration that solved this problem for me.

// 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]'
    }
  },
})

Answer 2

What tool in dev tools are you using to get that list? Seems like a list of cached files, so it's showing all the old versions of your code.

If you go to the network tab and reload the page. You should see a list of all the resources downloaded by the browser. Choose the js filter and you should see your vue js bundle (made by webpack) somewhere in that list.