CODEWITHSUNDEEP
google-chromevue.jsdevtools
gib65
gib65

Reputation: 2011

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

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:

enter image description here

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

enter image description here

enter image description here

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.

Upvotes: 26

Views: 2569

Answers (5)

bitterpill
bitterpill

Reputation: 21

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

Upvotes: 2

Marc
Marc

Reputation: 5465

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

Upvotes: 0

iRestMyCaseYourHonor
iRestMyCaseYourHonor

Reputation: 809

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.

Upvotes: 0

Omeri
Omeri

Reputation: 347

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/

Upvotes: 1

T. Short
T. Short

Reputation: 3614

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.

Upvotes: 1

Related Questions