vue-cli debugger-for-chrom断点配置
安装完debugger-for-chrome 插件之后按照截图点击
在生产的launch.json文件下添加如下语句,注意端口号是自己的配置的。
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"type": "chrome",
"request": "launch",
"name":"vue-cli",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
接着,在config目录下的index.js中配置(上面的注释是方便对照)
// devtool: 'cheap-module-eval-source-map',
devtool: 'source-map',
最后让vscode支持设置断点,依次点击菜单栏文件->首选项->设置->功能->调试。