Skip to content

T08.md

Latest commit

 

History

History
56 lines (34 loc) · 3.39 KB

T08.md

File metadata and controls

56 lines (34 loc) · 3.39 KB
Raw

T08 · Protocol Monitor / CDP

由 pnpm docs:lessons 生成；内容源 src/data/advanced.json，合同源 scripts/generate-advanced.mjs。含教师参考答案。前置：04、19、28。

目标与原理

理解 DevTools 与浏览器通信。CDP 的请求用 id 对应响应，事件没有请求 id；session 和导航生命周期影响句柄有效性。

请求与事件

method / params 是请求或事件，响应按 id 对应；完成顺序不保证请求顺序。

目标与生命周期

nodeId 属于目标文档，导航后需重新 getDocument 和 querySelector。

只读观察开始

Protocol monitor 看 DOM.getDocument、DOM.querySelector 和 DOM.getAttributes；本页不暴露调试端口。

交互演示

对应 UI 操作与协议消息。改变本课输入条件并预测结果；对照请求、状态或约束的关系；切换最小修复并复位，核对改变的范围。综合题先提交判断再解锁因果模型，所有模型不计完成。

商城实战

把事件当作请求响应，或导航后继续使用旧 nodeId，导致协议解释错误。

  1. 先操作消息配对模型；本地消息明确为教学数据，不是浏览器协议采集。
  2. Settings / Experiments 启用 Protocol Monitor（若版本需要），Command menu 打开。
  3. 在 Elements 选择商品，观察 DOM 命令、响应 id 与事件；不要将整份会话日志公开。
  4. 用编辑器发送 DOM.getDocument，再根据 root.nodeId 发送 DOM.querySelector，selector 为 #product。
  5. 用返回 nodeId 发 DOM.getAttributes，刷新后重新获取，解释旧句柄为何失效。
  6. 记录真实方法和字段；停止记录、清除过滤并恢复实验选项，不开启远程调试端口。

独立挑战与参考答案

解释一次协议请求和响应的作用。新输入与两种故障随机；可能再次抽到同种，不保证轮流。

配置 根因 实际证据 针对性验证
配置1 按消息到达顺序配对，误把事件当作响应 响应 id 与当前请求不同，中间插入无 id 的事件 按 id / sessionId 匹配，区分无 id 的事件
配置2 导航后继续使用上一文档的 nodeId 新文档已更新，旧 nodeId 收到错误而非当前属性 重新取得 root 与节点句柄，再发只读属性命令
干扰项 只根据表面现象修改无关条件 没有保留条件与输入的一次截图 同时改变设备、数据与逻辑，只保留成功结果

三级提示

  1. 先复现 把事件当作请求响应，或导航后继续使用旧 nodeId，导致协议解释错误。
  2. 对照实际证据：响应 id 与当前请求不同，中间插入无 id 的事件；或 新文档已更新，旧 nodeId 收到错误而非当前属性
  3. 一次只改变对应原因：按 id / sessionId 匹配，区分无 id 的事件；或 重新取得 root 与节点句柄，再发只读属性命令

验收、边界与恢复

页面 DOM / MutationObserver 结果不是 CDP；本地配对练习与真实协议操作分别记录。 保持输入、数量、环境一致；完成故障与正常对照，选择一致证据；三轮引导和两配置挑战分别取证，原生步骤与本地结果分列。停止后清理本会话资源，再恢复浏览器设置。

共同合同 · 本批验收 · 官方参考。