Debug Vue.js App with VS Code. Error Unverified Breakpoint Debug Vue.js App with VS Code. Error Unverified Breakpoint vue.js vue.js

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"


matomo