Debug Vue.js in VS Code

Time:2021-7-20

step

  • Open vscode and install debugger for chrome
  • Creating Vue application with Vue cli3
  • Add “Vue. Config. JS” file to the project root path
module.exports = {
    configureWebpack: {
        devtool: 'source-map'
    }
}
  • Add launch.json in. Vscode file:
    "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 favorite terminal in the root directory and use Vue cli to open the application:
    npm run serve
  • In the debug view, select“vuejs:chrome/firefox”Configure, then press F5 or click the green play button.

Debug Vue.js in VS Code

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