Fixing unbound breakpoints when trying to debug .vue files in VS Code.
VS Code uses the generated source map files created by webpack to allow debugging of js code within .vue files.
The first step is to enable the creation of the source map files by setting the devtool properties to ‘source-map’ within the vue.config.js file.
module.exports = {
...
configureWebpack: {
devtool: 'source-map'
}
}Then in your VS Code launch.json file add the following sourceMapPathOverides properties.
Mapping 1 - Maps the *.vue files in your webRoot directory
Mapping 2 - Maps the *.vue files in your webRoot/components directory
Mapping 3 - Maps any *.js files in your webRoot and child directories
...
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/${webRoot}/*": "${webRoot}/*", // 1
"webpack:///src/components/${webRoot}/components/*": "${webRoot}/components/*", // 2
"webpack:///./src/*.js": "${webRoot}/*.js" // 3
}
...
To view the webpack generated source map files structure, open the browsers DevTools Sources tab.
The mappable .vue files are placed under webpack:///src and js files are placed under webpack:///./src. However, the pathing structure for .vue files within child directories, like the components directory, are not easily mappable, as webpack duplicates the directory name within the path. Mapping 2 is needed to allow the mapping of .vue file within the components directory.
