协议监控:查看和发送 CDP 请求

Dale St. Marthe
Dale St. Marthe

使用 Protocol 监控工具查看开发者工具发出的所有 CDP 请求和响应,并直接发送 CDP 命令。

概览

Chrome 开发者工具使用 Chrome 开发者工具协议 (CDP) 对 Chrome 浏览器进行插桩、检查、调试和性能分析。开发者可以使用协议监控以编程方式处理 CDP。

借助协议监控,您可以执行以下操作:

  • 记录 CDP 请求和响应
  • 检查 CDP 消息
  • 保存 CDP 消息
  • 发送 CDP 命令

打开 Protocol 监控工具

如需打开协议监控,请按以下步骤操作:

  1. 请确保实验已启用。选中设置设置 > 实验下的 Protocol Monitor 复选框。

  2. 按如下键打开命令菜单

    • macOS:Command + Shift + P
    • Windows、Linux、ChromeOS:Ctrl + Shift + P 命令菜单包含
  3. 开始输入 Protocol monitor,选择显示协议监控器,然后按 Enter 键。DevTools 会在开发者工具窗口底部显示 Protocol 监控面板。

或者,选择右上角的 more_vert 更多选项 > 更多工具 > 协议监控

记录 CDP 请求和响应

当您打开 Protocol 监控工具时,它会自动开始从当前页面记录 CDP 消息。即使您刷新页面或关闭 Devtools,协议监控也会继续记录。

如需停止或开始录制,请点击面板顶部操作栏左侧的“录制”按钮。

Protocol 监控面板中的记录按钮。

检查 CDP 消息

根据协议监控的记录,CDP 消息会记录在面板左侧的表格中。

点击方法请求响应单元格,即可在面板右侧打开其请求响应数据的详��视图。

Protocol 监控面板中突出显示的方法。

点击相应的标头标签页,在 RequestResponse 数据之间切换。

右键点击 Method 列中的值将显示基于上下文的选项。

清除并下载 CDP 消息

要清除所有已记录的 CDP 消息,请点��操作栏中的“清除屏蔽”按钮。

如需以 JSON 文件格式下载记录的消息,请点击“下载”图标 download

发送原始 CDP 命令

通过协议监控发送 CDP 命令主要有两种方法:

  • 如果该命令不需要任何参数,请在 Protocol Monitor 底部的输入字段中输入该命令,然后按 Enter 键,例如 Page.captureScreenshot

    如果命令需要参数,请以 JSON 格式提供参数,例如 {"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}

    输入字段右侧的下拉菜单指定了目标。

“协议”监控器中突出显示的“目标”下拉菜单。

  • 您还可以使用 CDP 编辑器修改和发出命令:

    1. 点击命令输入字段旁边的 left_panel_open 显示 CDP 命令编辑器按钮,以打开命令编辑器。
    2. 从下拉列表中选择一个目标,然后在命令提示符旁边开始输入 CDP 命令。自动补全功能会为您提供相关选项。选择您要使用的命令。 协议监控中的命令输入。
    3. 输入 CDP 命令后,编辑器会根据协议定义创建结构化形式的参数。填写这些参数以通过命令发送。 参数输入,其中列出了待填写的 Service Worker 相关参数。
    4. 点击发送 发送命令按钮或按 Ctrl + Enter 键,发送该命令。

您还可以在表格中修改和重新发送命令。右键点击表格中的某个项,然后从下拉菜单中选择 修改并重新发送 。这会自动重新打开 CDP 编辑器,并使用您选择的命令预填充。

如需详细了解 CDP 编辑器,请参���利用全新命令编辑器高效编写 Chrome 开发者工具协议 (CDP) 命令