使用新的命令编辑器高效编写 Chrome Devtools 协议 (CDP) 命令

Hadrien Jaubert
Hadrien Jaubert

Chrome 开发者工具协议 (CDP) 是一种远程调试协议 (API),可让开发者与正在运行的 Chrome 浏览器进行通信。Chrome 开发者工具使用 CDP 来帮助您检查浏览器的状态、控制浏览器行为和收集调试信息。您还可以构建使用 CDP 的 Chrome 扩展程序。

例如,这是一个 CDP 命令,它会在具有指定 styleSheetId 的样式表中的 location 指定位置插入具有指定 ruleText 的新规则。

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

协议监控抽屉式导航栏标签允许您发送 CDP 请求,以及查看开发者工具发送和接收的所有 CDP 请求和响应。

协议监控器底部的命令行栏。

以前,手动编写命令非常困难,尤其是包含多个参数的命令。您不仅要留意左括号和右括号及引号,还须记住相关命令的参数,进而查找 CDP 文档

为解决此问题,开发者工具引入了一个新的 CDP 编辑器,其主要目标是:

  • 自动填充命令。通过自动填充功能提供可用命令的列表,从而简化 CDP 命令输入。
  • 自动填充命令参数。减少查看 CDP 文档内可用命令参数列表的必要性。
  • 简化参数输入。您只需填写要发送的参数的值即可。
  • 修改并重新发送。通过加快修改 CDP 命令的速度,加快原型设计速度。

现在,我们来看看这个新编辑器提供哪些功能,以及如何使用它!

自动补全功能

自动补全下拉菜单。

命令输入栏现已具有自动补全功能。它有助于您输入您有权访问的 CDP 命令的名称。对于不接受参数的命令,这种方法非常方便。

字符串和数字参数

借助这个新编辑器,您现在可以轻松修改基元参数的值。如需打开编辑器,请点击命令输入框旁边的 打开左侧面板。 图标。

输入命令名称后,编辑器会自动显示相应的参数。您不必查阅文档即可知道哪些参数与哪些命令搭配使用。此外,编辑器还会按指定顺序显示这些参数:必需的参数在前(红色)和可选参数(蓝色)。

若要为可选参数添加值,请将鼠标悬停在其名称上,然后点击 + 按钮。要将参数重置为未定义,请点击重置为默认值按钮。

+ 和“重置为默认值”按钮。

枚举和布尔值参数

修改枚举或布尔值参数时,您会看到一个下拉菜单,其中提供了一系列可能的值(对于枚举)或简单的 true 或 false 选项(对于布尔值)。此功能可降低为枚举参数输入错误值的可能性,并保持准确性和简单性。

布尔值和枚举下拉菜单。

数组参数

对于数组参数,您可以手动向数组添加值。将鼠标悬停在参数所在的行上,然后点击 + 按钮。

用于添加数组项的 + 按钮。

要逐个删除数组项,请点击项旁边的垃圾桶按钮。您也可以使用屏蔽按钮清除数组中的所有参数。在这种情况下,数组参数会重置为 []

“删除参数”和“重置为默认值”按钮。

对象参数

当您输入接受对象参数的命令时,编辑器会列出此对象的键,您可以直接修改这些键的值。这适用于所有类型的嵌套参数。

嵌套参数。

了解命令和参数在编辑器中的作用

您是否不确定参数或命令的用途?现在,您可以将鼠标悬停在命令或参数上,此时将弹出描述性提示,其中包含指向在线文档的链接。

将鼠标悬停在某个命令上时显示的描述性提示。

在发送不正确的参数之前收到警告

以前,如果您不知道参数值的类型是否正确,并且不得不等待读取错误响应,那么这个新编辑器正适合您。如果参数无法接受您输入的值,该工具会显示实时错误。

包含错误值的参数旁边的错误图标。

重新发送命令

如果您需要调整刚刚发送的命令的参数,则无需再次输入。要修改和重新发送命令,请右键点击 datagrid 中的相应项,然后从下拉菜单中选择 Edit and resend。这会自动重新打开 CDP 编辑器,并使用您选择的命令预填充 CDP 编辑器。

datagrid 中某个命令的下拉菜单,其中包含“Edit and resend”选项。

将命令复制到 JSON 格式

要将 JSON 格式的 CDP 命令复制到剪贴板,请点击工具栏最左端的 复制。 复制图标。此外,请注意,如果您直接在输入栏中输入命令,该命令会无缝填充编辑器,反之亦然。

总结

开发者工具团队在设计这款新 CDP 编辑器时,的目标是简化 CDP 命令的输入。新编辑器还可用于查看相关文档的参数,并为您提供更轻松的 CDP 命令发送方式。

下载预览渠道

您可以考虑将 Chrome Canary 版Dev 版Beta 版用作默认开发浏览器。通过这些预览渠道,您可以使用最新的开发者工具功能,测试先进的网络平台 API,并在用户采取行动之前发现网站上的问题!

与 Chrome 开发者工具团队联系

使用以下选项讨论博文中的新功能和变化,或讨论与开发者工具有关的任何其他内容。

  • 通过 crbug.com 提交建议或反馈。
  • 使用开发者工具中的更多选项   了解详情   > Help > Report a DevTools issues来报告开发者工具问题。
  • 发推文:@ChromeDevTools
  • 请在 YouTube 视频或“开发者工具提示”YouTube 视频中留言说明“开发者工具的新变化”。