前端调试看似“很杂”，但实际上很有套路。很多问题不是代码错得特别离谱，而是你没有按顺序排查。这篇文章记录一套比较实用的排错清单。
1. 先确认报错是不是源头
很多前端问题的根因并不在你以为的那一层。比如：
- API 返回值不符合预期
- 脚本加载顺序有问题
- 组件状态没有及时更新
- 样式覆盖导致点击失效
遇到异常时，第一步不是急着改代码，而是先问：问题在渲染层、数据层，还是输入层？
2. 先看浏览器控制台
浏览器控制台几乎是最重要的诊断入口。常见检查项：
- 语法错误
- 网络请求失败
- 资源加载失败
- React/Vue 等框架的状态提示
如果控制台没有报错，也别急着放下，很多问题会在页面交互或网络请求里才暴露。
3. 检查网络请求和参数
前端最容易忽略的一点，是数据层。一个参数名写错、接口返回结构变化，往往会导致页面直接崩掉。
这时候应当检查：
- 请求地址是否正确
- 参数是否完整
- 返回值是否符合预期
- 响应状态码是否正常
4. 从最小范围排查
当页面复杂时，最好的方法是缩小范围。比如：
- 先看单个组件
- 再看一条数据流
- 再看事件绑定
- 最后看全局样式
这样能够更快地定位问题，而不是在一大堆代码中“瞎试”。
5. 记录排查过程
我觉得最有价值的不是“修好了”，而是“知道当时为什么出错”。所以我会把排查步骤写下来：
- 现象是什么
- 报错在哪里
- 我尝试了什么
- 哪一步确认了问题范围
- 最终修正方法
后面如果再次遇到类似问题，能省掉很多重复时间。
调试不是靠“猜”，而是靠“排除法”和“复盘”。