由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json,合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。
使用录制、筛选、保留日志和 HAR。先修按 完整目录 的章节关系;基础操作、原理关系随本课讲解。
请求列表需要和一次可重复的用户操作对应,不能只看 URL 长得像不像。
录制开关决定是否留下记录
文本、类型、方法过滤只是隐藏行
Preserve log 跨导航保留;HAR 可能包含敏感数据,导出前检查
操作与请求列表联动。模型不改变真实浏览器设置,不计为实战完成。
- 先预测一个条件变化的结果。
- 只改变一个条件,比较输入与输出。
- 将模型中的关系对应到真实 DevTools。
症状:搜索结果不正确,记录里还混着埋点与重复调用。
正常结果:一次搜索仅产生一个含 q=cup 的 search 请求,返回一件目标商品。
真实机制:实际 analytics 噪声与 search 请求。配置一遗漏参数,配置二重复调用。
- 从本课准备并打开独立商城;先打开 DevTools,再运行故障。
- 清空 Network,确认录制中,再运行故障;只进行一次搜索。
- 筛选 search,再比较 Payload、Response 和 Initiator;不要将 analytics 当成搜索。
- 勾选 Preserve log 后刷新比较记录;导出 HAR 前核对可能包含的 Cookie、参数与响应。
- 先保存证据,再应用针对性的对照;错误对照不会通过页面检查。
- 回到教程选择真实证据,完成独立挑战后写下排查与恢复步骤。
在混杂记录中找出一次筛选请求。新会话改变输入与故障配置,可能再次抽到同一类型;按实际证据判断。
| 配置 | 原因 | 证据 | 修复/验证 |
|---|---|---|---|
| 配置1 | 搜索参数未随输入发送 | Query String 中缺少 q,返回全部商品 | 传入当前搜索条件并重发 |
| 配置2 | 同一操作重复发送搜索请求 | 一次动作出现两条相同搜索与调用来源 | 消除重复调用并用一次动作复测 |
| 干扰项 | 只凭界面颜色判断 | 没有对应请求或存储证据 | 同时改变全部条件且不复测 |
- 先区分实际请求、浏览器策略、存储与界面处理,记录第一次偏离的环节。
- 清空 Network,确认录制中,再运行故障;只进行一次搜索。
- 比较两个候选解释:搜索参数未随输入发送;同一操作重复发送搜索请求。保持其他输入一致再验证。
关闭录制/过滤只改变可见记录;HAR 可能含敏感数据,分享前检查。
清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置;将 HTTP 缓存、Cache Storage、内存状态分开。