浏览器调试
概述 浏览器调试工具帮助识别和修复客户端问题，包括JavaScript错误、布局问题和性能问题。
何时使用
- JavaScript错误
- 布局/样式问题
- 性能问题
- 用户交互问题
- 网络请求失败
- 动画故障
指令
1. 浏览器DevTools基础
Chrome DevTools标签：
元素/检查器：
- 检查HTML结构
- 实时编辑HTML/CSS
- 查看计算样式
- 检查可访问性树
- 修改DOM
控制台：
- 查看JavaScript错误
- 执行JavaScript
- 查看控制台日志
- 监控消息
- 清除错误
源/调试器：
- 设置断点
- 逐步执行代码
- 监视变量
- 调用堆栈视图
- 条件断点
网络：
- 查看所有请求
- 检查响应状态
- 检查头信息
- 查看响应主体
- 限制网络
性能：
- 记录运行时
- 识别瓶颈
- 火焰图
- 内存使用情况
- 帧率
内存：
- 堆快照
- 内存增长
- 对象分配
- 检测泄漏
基本快捷键：
F12 / Ctrl+Shift+I: 打开DevTools Ctrl+Shift+C: 元素检查器 Ctrl+Shift+J: 控制台 Ctrl+Shift+K: 控制台 (Firefox)
2. 调试技巧
// 断点
// 行断点 // 点击源标签中的行号
// 条件断点 // 右键行 → 添加条件断点 if (userId === 123) { // 当userId为123时仅暂停 }
// DOM断点 // 右键元素 → 断点 → 子树修改 // 当DOM变化时暂停
// 事件侦听器断点 // 源标签 → 事件侦听器断点 // 在特定事件上暂停
// Debugger语句 function problematicFunction() { debugger; // 如果DevTools打开，则在这里暂停 // … 其余代码 }
监视表达式
// 添加变量监视 // 代码执行时更新 监视： { userId: 123, orders: [], total: 0 }
调用堆栈 // 显示函数调用链 main() -> processUser() -> validateUser() -> 暂停在这里
步进控制： 步过：执行当前行 步入：进入函数 步出：退出函数 继续：运行到下一个断点
3. 常见问题与解决方案
问题：控制台中的JavaScript错误
错误消息：“Uncaught TypeError: Cannot read property ‘map’ of undefined”
解决方案步骤：
- 注意错误中的行号
- 点击行号转到源标签
- 在错误前设置断点
- 检查变量值
- 追踪如何出现未定义值
示例： const data = await fetchData(); const items = data.results.map(x => x.name); // 如果results是未定义的，则出现错误 // 添加检查：const items = data?.results?.map(…)
问题：元素不显示（隐藏）
调试：
- 右键元素 → 检查
- 检查CSS中的display: none
- 检查visibility: hidden
- 检查opacity: 0
- 检查位置是否在屏幕外
- 检查z-index是否被埋没
- 检查父元素是否隐藏
问题：CSS不适用
调试：
- 检查元素
- 查看样式面板
- 查找CSS规则
- 检查是否被划掉（被覆盖）
- 检查特异性
- 检查媒体查询
- 检查!important的使用
问题：内存泄漏
检测：
- 内存标签
- 拍摄堆快照
- 执行操作
- 再拍摄一个快照
- 比较（差异）
- 对象保留？（泄漏）
- 检查分离的DOM节点
修复：
- 移除事件侦听器
- 清除定时器
- 释放对象引用
- 清理订阅
4. 性能调试
网络性能：
- 打开网络标签
- 重新加载页面
- 识别慢资源：
- 大图像（>500KB）
- 大JavaScript（>300KB）
- 慢请求（>2s）
- 水瀑布瓶颈
解决方案：
- 优化图像
- 代码分割JavaScript
- 延迟加载资源
- 压缩资产
- 使用CDN
运行时性能：
- 性能标签
- 记录交互
- 分析火焰图：
- 长红条=慢
- 识别函数
- 检查主线程阻塞
- 监控帧率
解决方案：
- 将工作转移到Web Workers
- 延迟非关键工作
- 优化算法
- 使用requestAnimationFrame
检查表：
控制台： [ ] 无错误 [ ] 无警告（预期的） [ ] 无未处理的承诺拒绝
元素： [ ] HTML结构正确 [ ] CSS正确应用 [ ] 无可访问性问题 [ ] 在所有断点处响应
网络： [ ] 所有资源成功加载 [ ] 无过多请求 [ ] 文件大小合理 [ ] 无阻塞资源
性能： [ ] 帧率>60 FPS [ ] 无长任务（>50ms） [ ] LCP<2.5s [ ] 内存稳定
关键点
- 用F12打开DevTools
- 控制台标签首先显示JavaScript错误
- 源标签用于设置断点
- 检查器用于HTML/CSS检查
- 网络标签用于请求分析
- 性能标签用于分析
- 内存标签用于泄漏检测
- 使用条件断点进行调试
- 监控控制台警告/错误
- 在真实设备/网络上测试