使用 vscode 调试前端代码
今天我们以webpack项目为基础讲解配置
复制代码
1. 安装插件 Debugger for Chrome
2. 修改 config/index.js
将devtool: 'cheap-module-eval-source-map' 修改为 devtool: 'source-map'
将 cacheBusting: true 修改为 cacheBusting: false
复制代码
3. 点击调试上面的小齿轮,选择Chrome,自动生成配置文件。修改配置文件为:
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chrome 调试",
"url": "http://localhost:8080", // 根据自己情况配置
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": false,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
复制代码
4. 设置断点,点击DUGEG开始调试。
转载于:https://juejin.im/post/5c0896d35188256d9832dcae