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

Dale St. Marthe
Dale St. Marthe

使用协议监视器查看 DevTools 发出的所有 CDP 请求和响应,并直接发送 CDP 命令。

概览

Chrome 开发者工具使用 Chrome DevTools Protocol (CDP) 来插桩、检查、调试和分析 Chrome 浏览器。开发者可以使用协议监视器以编程方式与 CDP 进行交互。

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

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

打开协议监视器

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

  1. 确保实验已启用。依次选择 Settings > Experiments,然后勾选 Protocol Monitor 复选框。

  2. 按以下任一键打开命令菜单

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

或者,在右上角,依次选择 更多选项 > 更多工具 > 协议监视器

记录 CDP 请求和响应

当您打开协议监视器时,它会自动开始录制当前网页中的 CDP 消息。即使您刷新页面或关闭 DevTools,协议监视器也会继续录制。

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

“Protocol Monitor”面板中的“Record”按钮。

检查 CDP 消息

协议监视器记录 CDP 消息后,这些消息会记录在面板左侧的表格中。

点击某个 Method(方法)、Request(请求)或 Response(响应)单元格,即可在面板右侧打开其 RequestResponse 数据的详细视图。

协议监视器面板中突出显示的方法。

点击相应的标头标签页,即可在请求响应数据之间切换。

右键点击“方法”列中的值可显示基于上下文的选项。

清除和下载 CDP 消息

如需清除所有已记录的 CDP 消息,请点击操作栏中的清除按钮。

如需将录制的邮件下载为 JSON 文件,请点击“下载”图标

发送原始 CDP 命令

通过协议监视器发送 CDP 命令主要有两种方式:

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

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

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

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

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

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

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

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