Vue 项目调试排错与前端质量保障

后端同学做前端时，最容易因为“看不见调用栈”而焦虑。其实前端排错也能像后端一样系统化。

一、排错总流程（四步）

1. 先确认现象：页面、接口、控制台哪一层出问题。
2. 再定位链路：路由 -> 组件 -> 状态 -> 请求 -> 响应。
3. 最后做隔离：最小化复现、局部回滚验证。
4. 修完后补保障：lint、构建、自测清单。

二、浏览器调试最常用能力

1. Network 面板

• 看请求 URL、方法、状态码、耗时。
• 对比请求参数和后端日志中的参数是否一致。
• 检查响应体是否符合接口约定。

2. Console 面板

• 首先看首个报错，不要只看最后一个。
• 利用 console.table 打印列表数据更高效。
• 临时日志定位后要清理，避免污染生产日志。

3. Sources 面板

• 给关键逻辑打断点。
• 使用“条件断点”定位特殊场景（例如只断某个 id）。
• 确认 source map 是否正常，避免调试到编译后代码。

三、后端同学高频问题与解法

1. 接口 401 / 403

• 检查 token 是否注入请求头。
• 检查 token 过期后的统一处理是否生效。
• 检查权限码与路由 meta.permission 是否一致。

2. 页面不刷新 / 数据不更新

• 检查响应式数据是否通过 ref / reactive 声明。
• 检查是否直接替换了非响应式对象引用。
• 检查异步请求返回后是否正确赋值。

3. 本地正常，构建失败

• 检查未使用变量、类型错误、路径别名大小写问题。
• 本地务必执行 pnpm lint && pnpm build。

四、质量门禁建议（最小可用）

1. 代码规范

• ESLint：约束潜在错误写法。
• Prettier：统一格式，减少无意义 diff。

2. 提交前自动检查

• lint-staged：只检查本次改动文件。
• husky：在 pre-commit 执行 lint。

3. CI 基础任务

• 安装依赖。
• 运行 lint。
• 构建产物。

只要这三步稳定，线上事故率会明显下降。

五、给“旧项目小改”准备的回归清单

• 登录、退出是否正常。
• 修改模块的新增/编辑/删除是否正常。
• 相关列表查询和分页是否正常。
• 错误提示是否可读、可追踪。
• 关键路径是否在主流浏览器可用。

六、建议沉淀的两个模板

1. Bug 定位记录模板

• 现象：
• 复现步骤：
• 根因：
• 修复点：
• 回归范围：

2. 提测说明模板

• 需求背景：
• 改动页面：
• 改动接口：
• 自测结果：
• 风险提示：

有这两个模板，前端协作会更像后端团队的“可审计工程流程”。