安裝插件 Debugger for Chrome
在項目根目錄 config/index.js 中修改
將devtool: 'cheap-module-eval-source-map' 修改為 devtool: 'source-map'
將 cacheBusting: true 修改為 cacheBusting: false
修改這兩項是為了vscode中的斷點能夠正確定位到行
新增調試
在調試界面增加配置如下
lanuch.json
貼上代碼
{
// 使用 IntelliSense 了解相關屬性浑劳。
// 懸停以查看現(xiàn)有屬性的描述秋泄。
// 欲了解更多信息琐馆，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chrome 調試",
"url": "http://localhost:8080/login#/login?station=103",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": false,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
調試
此時在代碼中無論是debugger, 還是小紅點, 都能夠直接進行調試了
調試
