Debugging Vue in vscode

I was assigned to maintain some frontend source code, and it was all built on Vue js. I today setup debugging environment in vscode.

Here are some clues

• using babel 6, webpack 5, Vue.js 1
• source code location : {project folder}/src
• webpack config file : {project folder}/build/webpack.config.js

1. Build with source map

Add source-map to your webpack config file

devtool: ‘source-map’,

2. Run dev server

# webpack-dev-server — config ./build/webpack.config.js”

3. Setup and run launch.json for chrome debugger in vscode

“configurations”: [
 {
     “name”: “Launch Chrome”,
     “request”: “launch”,
     “type”: “pwa-chrome”,
     “url”: “http://localhost:4000”,
     “webRoot”: “${workspaceFolder}/src",
     “env”: {
         “NODE_ENV”:”development”,
     },
     “sourceMaps”: true,
     “sourceMapPathOverrides”: {
         “webpack:///src/*”: “${webRoot}/*”
     }
 },

4. Add breakpoint in your Vue code