Debugging in VS Code Vue.js

step

• Open vscode and install debugger for chrome
• Creating Vue application with Vue cli3
• Add project root path“ vue.config.js “Documents

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

• In the. Vscode file launch.json add to:

    "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}/*"
            }
        }
    ]
}

• Set a breakpoint
• Open your preferred terminal in the root directory and use the Vue cli to open the application
  npm run serve
• Go to the debug view and select“vuejs：chrome/firefox”Configure, then press F5 or click the green play button.

• As a new browser instance openshttp://localhost:8080Your breakpoint should be hit by now