# vue代码断点调试

  1. 新建vue.config.js
//vue.config.js
//可以在前端看到vue源代码
module.exports={
    configureWebpack:{
        devtool:'source-map'
    }
}
1
2
3
4
5
6
7
  1. 点击vscode左边的Run and Debug按钮
  2. 点击create a lunch.json file,点击chrome
  3. 配置chrome

配置参考: https://vuejs.org/v2/cookbook/debugging-in-vscode.html

   {
      "type": "pwa-chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
1
2
3
4
5
6
7
8
9
10
11

接下来就可以调试了