Why debug on Webpack v5 Vue is no longer working? - vue.js

Question

I recently updated #vue's webpack and submodules to v5 following this. This was necessary because web workers were not working with v4. Now my problem is that I'm not able to debug the code and I don't know where to start. I accept any suggestion that helps me diagnose the problem
The code runs normally, it just doesn't stop on breakpoints anymore. My vue.config.js has a configuration in the devtoolModuleFilenameTemplate that if I'm not mistaken it was supposed to work with .ts files, I've tried to remove it and it didn't help.
I searched around here and couldn't find anyone with a similar problem. My current version is at 5.0.8 but I also tried 5.0.1.
vue.config.js:
/* eslint-disable */
const CompilerSfc = require('#vue/compiler-sfc')
const parse = CompilerSfc.parse
CompilerSfc.parse = (source, options) => {
return parse(source, Object.assign({ pad: true }, options))
}
module.exports = {
devServer: {
allowedHosts: 'all',
port: 5000,
host: '0.0.0.0',
},
configureWebpack: {
devtool: 'source-map',
output: {
devtoolModuleFilenameTemplate: (info) => {
if (info.allLoaders === '') {
// when allLoaders is an empty string the file is the original source
// file and will be prefixed with src:// to provide separation from
// modules transpiled via webpack
const filenameParts = ['src://']
if (info.namespace) {
filenameParts.push(info.namespace + '/')
}
filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
return filenameParts.join('')
} else {
// otherwise we have a webpack module
const filenameParts = ['webpack://']
if (info.namespace) {
filenameParts.push(info.namespace + '/')
}
filenameParts.push(info.resourcePath.replace(/^\.\//, ''))
const isVueScript =
info.resourcePath.match(/\.vue$/) &&
info.query.match(/\btype=script\b/) &&
!info.allLoaders.match(/\bts-loader\b/)
if (!isVueScript) {
filenameParts.push('?' + info.hash)
}
return filenameParts.join('')
}
},
},
},
}
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "vue.js: chrome",
"request": "launch",
"type": "chrome",
"url": "http://localhost:5000",
"webRoot": "${workspaceFolder}/src"
}
]
}

Answer 1

You can put debugger key directly in your code, instand of breakpoint in vscode. Then, debug with your browser.
Here is an example :
Hope it hopes :)