VScode debug VUE

VScode support debug VUE script.It supports point the code of the packcage back into source code position.

Steps : This is for VUE 3.

1. Add below in vue.config.js

   module.exports = { configureWebpack: { devtool: 'source-map' } }

    

2. In Debug mode, open launch.json file, add below code:

   "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///./src/*": "${webRoot}/*" },

    

3. Add break point in your vue.js

4. Run below command to startup your VUE project:

   npm run serve

    

5. Go to the "Debug" window, run "Lanuch Program", then you will  see the Chrome browser was opened and enter into your break point.

Note: What if it doesn't work, please check if your installed "Debugger for Chrome".