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支持設置斷點,依次點擊菜單欄文件->首選項->設置->功能->調試。