# vue代码断点调试
- 新建vue.config.js
//vue.config.js
//可以在前端看到vue源代码
module.exports={
configureWebpack:{
devtool:'source-map'
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
- 点击vscode左边的
Run and Debug
按钮 - 点击
create a lunch.json file
,点击chrome - 配置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
2
3
4
5
6
7
8
9
10
11
接下来就可以调试了