Debug Vue.js App with VS Code. Error Unverified Breakpoint
config vue.config.js
(If it doesn't exist, create one)
module.exports = { configureWebpack: { devtool: 'source-map' }};
config babel.config.js
module.exports = { "env":{ "development":{ "sourceMaps":true, "retainLines":true, } }, presets: [ '@vue/app' ]}
config launch.json
{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*", "webpack:///./src/*": "${webRoot}/*" } }, ]}
I can debug .vue
and .js
file normally after referring to the above configuration.(vue-cli3 + vscode)
This debug adapter doesn't use the same syntax as the Chrome debug adapter: remove the * at the end of url and path:
"webpack:///src/": "${webRoot}/"
For me my webroot folder was not set correctly.
My vue files browser is set to:
D:\Workspace
The project is in that folder as
D:\Workspace\vue_project1
The webroot setting in the launch.json had to change to:
"webRoot": "${workspaceFolder}/vue_project1"