前端问题排查的基本流程

前端问题经常看起来很杂：按钮没反应、页面空白、数据不刷新、样式错位、接口报错。越是杂，越不能靠猜。直接改代码可能碰巧解决，也可能制造新问题。稳定的排查流程能减少来回试错。

一、先拿到可复现路径

排查前先确认环境、账号、入口、操作步骤、期望结果和实际结果。偶发问题也要尽量记录触发条件，比如浏览器版本、网络状态、数据量、是否刷新进入。没有复现路径时，至少要拿到截图、控制台错误和网络请求。

二、把问题拆成输入和输出

页面异常通常可以拆成几个环节：路由是否进入、组件是否渲染、接口是否请求、响应是否正常、状态是否更新、DOM 是否按预期显示。每一环节都有输入和输出，逐段确认比全局搜索更有效。

三、修复后要回到原路径验证

定位到问题后，不要只验证最小代码片段。最终一定要回到用户原始路径，确认问题确实解决，并检查相邻流程有没有被影响。比如修了登录跳转，也要看刷新恢复、退出登录和权限不足路径是否正常。

• 先记录环境、步骤、期望和实际结果。
• 用浏览器工具确认脚本、网络、资源和 DOM 状态。
• 按链路分段排除，不要同时改多个猜测点。
• 修复后用原路径和相邻路径一起验证。

前端调试最重要的是纪律。流程稳定，排查速度会越来越快，线上风险也会越来越低。