如何在客户端实现ChromeDevtoolsProtocol的CSS.getMatchedStylesForNode协议接收

前置条件 #

• 已经通过调试端口启动Chrome，启动命令参考：chrome --remote-debugging-port=9222
• 已经通过CDP的Target域获取到目标页面的调试WebSocket地址，成功建立双向连接
• 已经通过DOM域获取到待查询样式节点的nodeId：如果未持有该ID，可以先调用DOM.getDocument获取全量DOM树，或调用DOM.querySelector按选择器查询对应节点ID

核心实现逻辑 #

第一步：启用CSS域 #

必须先调用CSS.enable命令激活CSS域，否则所有CSS相关查询命令不会返回有效数据，发送的指令结构示例：

{
  "id": 1,
  "method": "CSS.enable",
  "params": {}
}

收到CSS.enable的成功响应后再执行后续操作。

第二步：下发样式查询命令 #

将待查询节点的nodeId填入参数，发送CSS.getMatchedStylesForNode指令：

{
  "id": 2,
  "method": "CSS.getMatchedStylesForNode",
  "params": {
    "nodeId": 待查询节点的数字ID
  }
}

提示：其中id为自定义请求标识，后续返回的响应会携带相同ID，可通过该字段匹配对应请求的返回结果

第三步：接收并解析返回数据 #

WebSocket收到的响应结构如下，匹配对应ID的响应后，提取result字段即可拿到完整的匹配样式数据：

{
  "id": 2,
  "result": {
    "inlineStyle": {}, // 节点内联样式
    "attributesStyle": {}, // 节点属性定义的样式
    "matchedCSSRules": [], // 匹配到的所有CSS规则
    "pseudoElements": [], // 伪元素样式规则
    "inherited": [] // 继承得到的样式规则
  }
}

常见异常处理 #

• 若返回nodeId not found错误：说明传入的nodeId已失效，DOM树更新后nodeId会同步变化，需要重新调用DOM相关接口获取最新节点ID
• 若返回CSS domain is not enabled错误：说明未调用CSS.enable激活域，或激活请求未返回成功就提前发送了查询请求
• 若拿到的matchedCSSRules为空：确认节点确实存在匹配的样式规则，或nodeId对应的是文本节点等不支持样式查询的节点类型

内容的提问来源于stack exchange，提问作者louiswu