前端调试（Frontend Debugging）
概述
前端调试涵盖浏览器开发者工具的高效使用、框架专用调试手段、网络请求排查、CSS 布局问题定位，以及生产环境的错误追踪方案。
Chrome DevTools 核心面板
| 面板 | 用途 | 关键操作 |
|---|---|---|
| Elements | DOM 结构与样式检查 | 实时编辑 HTML/CSS、查看计算样式 |
| Console | 日志输出与表达式执行 | console.table()、$0 引用选中元素 |
| Network | 网络请求监控 | 筛选请求类型、查看瀑布流时序 |
| Application | 存储与缓存管理 | 查看 Cookie、LocalStorage、Service Worker |
实用技巧：
Ctrl+Shift+P（Command Menu）可快速执行截屏、切换主题等命令- Network 面板勾选 "Preserve log" 防止页面跳转后日志丢失
- Console 中使用
copy()可将对象复制到剪贴板
React DevTools 调试
- 组件树（Component Tree）：检查组件层级、props 和 state 值
- 状态检查（State Inspection）：直接在 DevTools 中修改 state 观察效果
- 性能分析器（Profiler）：录制渲染过程，识别不必要的重渲染
- Highlight Updates：开启后可视化哪些组件正在重渲染
网络请求调试
| 问题类型 | 排查方法 |
|---|---|
| 请求失败（4xx/5xx） | 检查 Network 面板中的状态码和响应体 |
| CORS 错误 | 确认服务端 Access-Control-Allow-Origin 头配置 |
| 缓存异常 | 检查 Cache-Control 头，尝试 "Disable cache" 选项 |
| 请求未发出 | 检查拦截器（Interceptor）、条件逻辑、URL 拼写 |
CSS 调试
- 布局偏移（Layout Shift）：使用 DevTools 的 "Layout Shift Regions" 可视化偏移区域
- 特异性冲突（Specificity Conflict）：在 Computed 面板查看最终生效的规则及其来源
- 响应式问题：使用 Device Toolbar 切换视口尺寸，配合断点调试媒体查询
- Flexbox/Grid 调试：Elements 面板中点击 flex/grid 标识可打开可视化辅助线
JavaScript 错误排查
| 错误类型 | 常见原因 | 处理方式 |
|---|---|---|
| Uncaught TypeError | 访问 undefined 的属性 |
添加空值检查，使用可选链（?.） |
| Unhandled Promise Rejection | async 函数缺少 catch |
添加 .catch() 或 try/catch |
| ReferenceError | 变量未声明或作用域错误 | 检查变量声明位置和闭包引用 |
| RangeError | 递归无终止或数组越界 | 检查递归终止条件 |
常见错误速查表
| 错误信息 | 诊断方向 | 修复方案 |
|---|---|---|
Cannot read property 'x' of undefined |
数据未加载完成就访问 | 添加加载状态判断 |
Failed to fetch |
网络断开或 CORS 拦截 | 检查网络连接和 CORS 配置 |
Maximum call stack exceeded |
无限递归或循环引用 | 检查递归条件和组件循环渲染 |
ResizeObserver loop limit exceeded |
布局在观察回调中触发变更 | 使用 requestAnimationFrame 延迟处理 |
生产环境调试
- Source Maps：构建时生成 source map，上传至错误监控平台（不部署到生产服务器）
- 错误边界（Error Boundary）：React 中使用
componentDidCatch捕获渲染错误，展示降级 UI - 错误追踪服务：接入 Sentry 等平台，自动采集错误堆栈、用户上下文和面包屑日志
- Feature Flag：通过特性开关控制新功能灰度发布，出问题时快速关闭