Debugging in VS Code Vue.js

Time:2020-11-25

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.

Debugging in VS Code Vue.js

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