How to distinguish identically named VueJS + WebPack modules in Chrome Dev Tools?

Question

I am developing an application with VueJS bundled by WebPack 4. It has a number of CRUD modules distinguished by a directory for each one, but with same named files in each. So....

components
  ╠═ Person
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╠═ Tool
  ║   ╠═ index.js
  ║   ╠═ Create.vue
  ║   ╠═ Update.vue
  ║   ╠═ Retrieve.vue
  ║   ╚═ Delete.vue
  ╚═ Zone
      ╠═ index.js
      ╠═ Create.vue
      ╠═ Update.vue
      ╠═ Retrieve.vue
      ╚═ Delete.vue

My problem is that I can find only one of each of Create.vue, Update.vue, Retrieve.vue, Delete.vue when I go to debug with Chrome Dev Tools.

If I put a console.log() in Tool/Update.vue I can see the logged message in the Chrome console, but when I click on the source code reference (on the right hand side), the code shown is from Person/Update.vue.

I can see no way at all to set a breakpoint in the correct module.

Do I have to refactor my whole project to always use distinct names? Is there a WebPack setting to enforce name spacing?

As a work around I temporarily rename Tool/Update.vue to Tool/dbgUpdate.vue, fix all references to it and then I can find it and debug it.

Update: 2018-11-30

I followed Nandiin Bao's entirely valid suggestion but I do not get the same result, Instead I get:

Not one of those files pretty prints to anything resembling the source code.

The only files that do look like the source code are found here:

But there is exactly one of each, so I am back to the same problem.

My webpack configuration is the unaltered default generated by vue-cli 3

Answer 1

You can access intermediate files with human readable file hierarchy under Page sub tab under Source tab of the devtool.

Answer 2

Copying my answer from https://stackoverflow.com/a/72009811/109351:

This worked for me when using vue-cli-service serve: https://github.com/vuejs/vue-cli/issues/2978#issuecomment-577364101

In vue.config.js:

let path = require('path')

module.exports = {
  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]'
    }
  },
}