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

Hadrien Jaubert
Hadrien Jaubert
GitHub 首页

Chrome DevTools 协议 (CDP) 是一种远程调试协议 (API)，可让开发者与正在运行的 Chrome 浏览器进行通信。Chrome DevTools 使用 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 请求，并查看 DevTools 发送和接收的所有 CDP 请求和响应。

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

以前，手动编写命令非常困难，尤其是包含多个参数的命令。您不仅需要注意大括号和引号，还需要记住命令的参数，这反过来又会让您查阅 CDP 文档。

为解决此问题，DevTools 引入了新的 CDP 编辑器，其主要目标是：

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

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

自动补全功能

自动补全下拉菜单。

命令输入栏现在支持自动补全功能。它可帮助您编写您有权使用的 CDP 命令的名称。对于不接受参数的命令，这非常有用。

字符串和数字参数

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

输入命令名称后，编辑器会自动显示相应的参数。您无需查阅文档即可知道哪些参数与哪些命令搭配使用。此外，编辑器会按给定顺序显示参数：先显示必需参数（以红色显示），然后显示可选参数（以蓝色显示）。

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

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

枚举和布尔值参数

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

布尔值和枚举下拉菜单。

数组参数

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

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

如需逐个删除数组项，请点击相应项旁边的回收站按钮。您还可以使用“块”按钮清除数组中的所有参数。在这种情况下，数组参数会重置为 []。

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

对象参数

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

嵌套参数。

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

您是否曾对某个参数或命令的用途感到不确定？现在，当您将鼠标悬停在某个命令或参数上时，系统会弹出一个包含指南性说明的提示，其中包含指向在线文档的链接。

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

在发送错误的参数之前收到警告

以前，如果您不知道参数的值是否属于正确的类型，并且必须等待读取错误响应，那么这个新编辑器非常适合您。如果参数无法接受您输入的值，它会显示实时错误。

值不正确的参数旁边显示错误图标。

重新发送命令

如果您需要调整刚刚发送的命令的参数，则无需重新输入该参数。如需修改并重新发送命令，请右键点击数据网格中的某个项目，然后从下拉菜单中选择修改并重新发送。这会自动重新打开 CDP 编辑器，并使用您选择的命令预先填充该编辑器。

数据网格中某个命令的下拉菜单，其中包含“修改并重新发送”选项。

将命令复制为 JSON 格式

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

总结

在设计这款全新 CDP 编辑器时，DevTools 团队的目标是简化 CDP 命令的输入。您还可以使用新版编辑器查看参数和文档，并更轻松地发送 CDP 命令。

下载预览渠道

不妨考虑将 Chrome Canary 版、开发者版或 Beta 版用作默认开发浏览器。通过这些预览版渠道，您可以使用最新的 DevTools 功能、测试尖端的 Web 平台 API，并帮助您在用户发现问题之前发现网站上的问题！

与 Chrome DevTools 团队联系

您可以使用以下选项讨论与 DevTools 相关的新功能、更新或任何其他内容。