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.

The hash is to prevent caching when the files change. You can enable "source maps" to more easily debug; they'll tell your browser and development tools how to link back to the original, unminified versions. You can also turn off minification entirely in your local development environment. — ceejayoz, Dec 26 '19 at 18:33
I advise following the issue here: https://github.com/vuejs/vue-cli/issues/2978 Some solutions partially work (depends on your browser, typescript usage, etc.) — exmaxx, Apr 27 '20 at 08:59

score 2 · Answer 1 · edited Nov 05 '22 at 01:17

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

score 1 · Answer 2 · answered Dec 26 '19 at 23:52

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.

score 1 · Answer 3 · answered Sep 08 '21 at 13:23

To allow chrome to display the source correctly you need to generate the Source Maps in development deployments.

I am not sure what tool you are using to build and bundle, but it is likely that you might have support for this already.

Chrome Details: https://developer.chrome.com/docs/devtools/javascript/source-maps/

score 0 · Answer 4 · answered Apr 05 '22 at 14:30

I found a work around for this. While you can not see the source code of your file, just change the code (add console or sth.) of the file you want to see while Vue is hot reloading your changes. It occurs to me that the source code is then reachable when you check the developer console.

score 0 · Answer 5 · answered Aug 21 '22 at 13:01

There is a surprising number of developers I meet on projects that have no idea there are official browser extensions for debugging Vue, Router, VueX etc.

Stumbling across this question prompted me to post this life saving link for those that land here and have missed the existence of this essential tool:

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

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

5 Answers5