安装插件 Debugger for Chrome
在项目根目录 config/index.js 中修改
将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
修改这两项是为了vscode中的断点能够正确定位到行
新增调试
在调试界面增加配置如下
lanuch.json
贴上代码
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: 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, 还是小红点, 都能够直接进行调试了
调试
