协议监控:查看和发送 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) 命令