Skip to content

Latest commit

 

History

History
68 lines (41 loc) · 3.21 KB

19.md

File metadata and controls

68 lines (41 loc) · 3.21 KB

19 · 找到一次操作的请求

由 pnpm docs:lessons 生成。教学脚本在 src/data/network-state.json,合同补充在 scripts/generate-network-state.mjs。本页含教师参考答案。

目标与原理

使用录制、筛选、保留日志和 HAR。先修按 完整目录 的章节关系;基础操作、原理关系随本课讲解。

请求列表需要和一次可重复的用户操作对应,不能只看 URL 长得像不像。

先建立边界

录制开关决定是否留下记录

再核对证据

文本、类型、方法过滤只是隐藏行

最后验证结果

Preserve log 跨导航保留;HAR 可能包含敏感数据,导出前检查

交互演示

操作与请求列表联动。模型不改变真实浏览器设置,不计为实战完成。

  1. 先预测一个条件变化的结果。
  2. 只改变一个条件,比较输入与输出。
  3. 将模型中的关系对应到真实 DevTools。

真实商城合同

症状:搜索结果不正确,记录里还混着埋点与重复调用。

正常结果:一次搜索仅产生一个含 q=cup 的 search 请求,返回一件目标商品。

真实机制:实际 analytics 噪声与 search 请求。配置一遗漏参数,配置二重复调用。

  1. 从本课准备并打开独立商城;先打开 DevTools,再运行故障。
  2. 清空 Network,确认录制中,再运行故障;只进行一次搜索。
  3. 筛选 search,再比较 Payload、Response 和 Initiator;不要将 analytics 当成搜索。
  4. 勾选 Preserve log 后刷新比较记录;导出 HAR 前核对可能包含的 Cookie、参数与响应。
  5. 先保存证据,再应用针对性的对照;错误对照不会通过页面检查。
  6. 回到教程选择真实证据,完成独立挑战后写下排查与恢复步骤。

独立挑战与参考答案

在混杂记录中找出一次筛选请求。新会话改变输入与故障配置,可能再次抽到同一类型;按实际证据判断。

配置 原因 证据 修复/验证
配置1 搜索参数未随输入发送 Query String 中缺少 q,返回全部商品 传入当前搜索条件并重发
配置2 同一操作重复发送搜索请求 一次动作出现两条相同搜索与调用来源 消除重复调用并用一次动作复测
干扰项 只凭界面颜色判断 没有对应请求或存储证据 同时改变全部条件且不复测

分级提示

  1. 先区分实际请求、浏览器策略、存储与界面处理,记录第一次偏离的环节。
  2. 清空 Network,确认录制中,再运行故障;只进行一次搜索。
  3. 比较两个候选解释:搜索参数未随输入发送;同一操作重复发送搜索请求。保持其他输入一致再验证。

边界与恢复

关闭录制/过滤只改变可见记录;HAR 可能含敏感数据,分享前检查。

清理与会话约定见 共同合同。请在复盘写下条件、观察对象、实际值、根因、最小修改与恢复设置;将 HTTP 缓存、Cache Storage、内存状态分开。

官方参考。实测范围见 验收记录。