Overlay🧪
此域提供了与在被检查页面上方绘图相关的各种功能。
EN
This domain provides various functionality related to drawing atop the inspected page.
✅️️ Methods
🔨Overlay.disable
禁用域通知。
EN
Disables domain notifications.
🔨Overlay.enable
启用域通知。
EN
Enables domain notifications.
🔨Overlay.getGridHighlightObjectsForTest
用于持久化网格测试。
EN
For Persistent Grid testing.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| nodeIds | ✔️ | array[DOM.NodeId] | 获取高亮对象的节点ID。 | ENIds of the node to get highlight object for. |
| 返回对象 | 类型 | 描述 | 原文 |
|---|---|---|---|
| highlights | object | 为提供的节点ID提供网格高亮数据。 | ENGrid Highlight data for the node ids provided. |
🔨Overlay.getHighlightObjectForTest
用于测试。
EN
For testing.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| nodeId | ✔️ | DOM.NodeId | 获取高亮对象的节点标识符。 | ENId of the node to get highlight object for. | |
| includeDistance | boolean | 是否包含距离信息。 | ENWhether to include distance info. | ||
| includeStyle | boolean | 是否包含样式信息。 | ENWhether to include style info. | ||
| colorFormat | ColorFormat | 获取配置的颜色格式(默认:hex)。 | ENThe color format to get config with (default: hex). | ||
| showAccessibilityInfo | boolean | 是否显示无障碍信息(默认值:true)。 | ENWhether to show accessibility info (default: true). |
| 返回对象 | 类型 | 描述 | 原文 |
|---|---|---|---|
| highlight | object | 高亮节点的数据。 | ENHighlight data for the node. |
🔨Overlay.getSourceOrderHighlightObjectForTest
用于源顺序查看器测试。
EN
For Source Order Viewer testing.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| nodeId | ✔️ | DOM.NodeId | 要突出显示的节点的ID。 | ENId of the node to highlight. |
| 返回对象 | 类型 | 描述 | 原文 |
|---|---|---|---|
| highlight | object | 为提供的节点ID提供源顺序高亮数据。 | ENSource order highlight data for the node id provided. |
🔨Overlay.hideHighlight
隐藏任何高亮。
EN
Hides any highlight.
🔨Overlay.highlightNode
高亮显示具有给定 id 或给定 JavaScript 对象包装器的 DOM 节点。必须指定 nodeId 或 objectId 其中之一。
EN
Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| highlightConfig | ✔️ | HighlightConfig | 一个描述高亮外观的描述符。 | ENA descriptor for the highlight appearance. | |
| nodeId | DOM.NodeId | 要突出显示的节点的标识符。 | ENIdentifier of the node to highlight. | ||
| backendNodeId | DOM.BackendNodeId | 要突出显示的后端节点标识符。 | ENIdentifier of the backend node to highlight. | ||
| objectId | Runtime.RemoteObjectId | 要突出显示的节点的JavaScript对象标识符。 | ENJavaScript object id of the node to be highlighted. | ||
| selector | string | 突出显示相关节点的选择器。 | ENSelectors to highlight relevant nodes. |
🔨Overlay.highlightQuad
高亮显示给定的四边形。坐标是相对于主框架视口的绝对坐标。
EN
Highlights given quad. Coordinates are absolute with respect to the main frame viewport.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| quad | ✔️ | DOM.Quad | Quad 高亮显示 | ENQuad to highlight | |
| color | DOM.RGBA | 高亮填充颜色(默认:transparent)。 | ENThe highlight fill color (default: transparent). | ||
| outlineColor | DOM.RGBA | 高亮轮廓线的颜色(默认:transparent)。 | ENThe highlight outline color (default: transparent). |
🔨Overlay.highlightRect
高亮指定矩形。坐标是相对于主框架视口的绝对坐标。问题:该方法未正确处理设备像素比(DPR)。如果DPR不为1,当前必须由客户端调整坐标(参见 crbug.com/437807128)。
EN
Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport. Issue: the method does not handle device pixel ratio (DPR) correctly. The coordinates currently have to be adjusted by the client if DPR is not 1 (see crbug.com/437807128).
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| x | ✔️ | integer | X坐标 | ENX coordinate | |
| y | ✔️ | integer | Y 坐标 | ENY coordinate | |
| width | ✔️ | integer | 矩形宽度 | ENRectangle width | |
| height | ✔️ | integer | 矩形高度 | ENRectangle height | |
| color | DOM.RGBA | 高亮填充颜色(默认值:transparent)。 | ENThe highlight fill color (default: transparent). | ||
| outlineColor | DOM.RGBA | 高亮轮廓颜色(默认:transparent)。 | ENThe highlight outline color (default: transparent). |
🔨Overlay.highlightSourceOrder
高亮显示具有给定id或给定JavaScript对象包装器的DOM节点的子元素的源顺序。必须指定nodeId或objectId之一。
EN
Highlights the source order of the children of the DOM node with given id or with the given JavaScript object wrapper. Either nodeId or objectId must be specified.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| sourceOrderConfig | ✔️ | SourceOrderConfig | 覆盖层绘制外观的描述符。 | ENA descriptor for the appearance of the overlay drawing. | |
| nodeId | DOM.NodeId | 要突出显示的节点的标识符。 | ENIdentifier of the node to highlight. | ||
| backendNodeId | DOM.BackendNodeId | 高亮显示的后端节点标识符。 | ENIdentifier of the backend node to highlight. | ||
| objectId | Runtime.RemoteObjectId | 要突出显示的节点的JavaScript对象标识符。 | ENJavaScript object id of the node to be highlighted. |
🔨Overlay.setInspectMode
进入 'inspect' 模式。在此模式下,用户悬停的元素会被高亮显示。选择元素后,后端会生成 inspectNodeRequested 事件。
EN
Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspectNodeRequested' event upon element selection.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| mode | ✔️ | InspectMode | 设置检查模式。 | ENSet an inspection mode. | |
| highlightConfig | HighlightConfig | 用于描述悬停节点高亮外观的描述符。如果 enabled == false,则可以省略。 | ENA descriptor for the highlight appearance of hovered-over nodes. May be omitted ifenabled == false. |
🔨Overlay.setPausedInDebuggerMessage
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| message | string | 要显示的消息,同时触发恢复和单步跳过控制。 | ENThe message to display, also triggers resume and step over controls. |
🔨Overlay.setShowAdHighlights
高亮所有被检测为广告的框架的所有者元素。
EN
Highlights owner element of all frames detected to be ads.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | True for showing ad highlights | ENTrue for showing ad highlights |
🔨Overlay.setShowContainerQueryOverlays
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| containerQueryHighlightConfigs | ✔️ | array[ContainerQueryHighlightConfig] | 一个节点标识符和突出显示外观描述符的数组。 | ENAn array of node identifiers and descriptors for the highlight appearance. |
🔨Overlay.setShowDebugBorders
请求后端在图层上显示调试边框
EN
Requests that backend shows debug borders on layers
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | True for showing debug borders | ENTrue for showing debug borders |
🔨Overlay.setShowFlexOverlays
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| flexNodeHighlightConfigs | ✔️ | array[FlexNodeHighlightConfig] | 一个节点标识符和突出显示外观描述符的数组。 | ENAn array of node identifiers and descriptors for the highlight appearance. |
🔨Overlay.setShowFPSCounter
请求后端显示FPS计数器
EN
Requests that backend shows the FPS counter
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | True for showing the FPS counter | ENTrue for showing the FPS counter |
🔨Overlay.setShowGridOverlays
使用CSS网格覆盖高亮多个元素。
EN
Highlight multiple elements with the CSS Grid overlay.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| gridNodeHighlightConfigs | ✔️ | array[GridNodeHighlightConfig] | 一个节点标识符和突出显示外观描述符的数组。 | ENAn array of node identifiers and descriptors for the highlight appearance. |
🔨Overlay.setShowHinge
添加一个双屏幕设备铰链
EN
Add a dual screen device hinge
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| hingeConfig | HingeConfig | hinge data,null 表示 hideHinge | ENhinge data, null means hideHinge |
🔨Overlay.setShowInspectedElementAnchor
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| inspectedElementAnchorConfig | ✔️ | InspectedElementAnchorConfig | 显示锚点的节点标识符。 | ENNode identifier for which to show an anchor for. |
🔨Overlay.setShowIsolatedElements
在隔离模式下显示元素,并带有覆盖层。
EN
Show elements in isolation mode with overlays.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| isolatedElementHighlightConfigs | ✔️ | array[IsolatedElementHighlightConfig] | 节点标识符和突出显示外观描述符的数组。 | ENAn array of node identifiers and descriptors for the highlight appearance. |
🔨Overlay.setShowLayoutShiftRegions
请求后端显示布局偏移区域
EN
Requests that backend shows layout shift regions
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| result | ✔️ | boolean | True for showing layout shift regions | ENTrue for showing layout shift regions |
🔨Overlay.setShowPaintRects
请求后端显示绘制矩形
EN
Requests that backend shows paint rectangles
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| result | ✔️ | boolean | True for showing paint rectangles | ENTrue for showing paint rectangles |
🔨Overlay.setShowScrollBottleneckRects
请求后端显示滚动瓶颈矩形
EN
Requests that backend shows scroll bottleneck rects
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | True for showing scroll bottleneck rects | ENTrue for showing scroll bottleneck rects |
🔨Overlay.setShowScrollSnapOverlays
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| scrollSnapHighlightConfigs | ✔️ | array[ScrollSnapHighlightConfig] | 一个节点标识符数组及其高亮外观的描述符。 | ENAn array of node identifiers and descriptors for the highlight appearance. |
🔨Overlay.setShowViewportSizeOnResize
在主框架调整大小时绘制视口尺寸。
EN
Paints viewport size upon main frame resize.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | 是否绘制尺寸。 | ENWhether to paint size or not. |
🔨Overlay.setShowWindowControlsOverlay
显示PWA的窗口控件覆盖层
EN
Show Window Controls Overlay for PWA
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| windowControlsOverlayConfig | WindowControlsOverlayConfig | Window Controls Overlay数据,null表示隐藏Window Controls Overlay | ENWindow Controls Overlay data, null means hide Window Controls Overlay |
🔨Overlay.highlightFrame❌️
高亮显示具有给定ID的框架的所有者元素。已弃用:由于进程分离(所有者节点可能位于不同进程中),此功能无法可靠工作且无法修复。请在客户端中确定所有者节点并使用highlightNode。
EN
Highlights owner element of the frame with given id. Deprecated: Doesn't work reliably and cannot be fixed due to process separation (the owner node might be in a different process). Determine the owner node in the client and use highlightNode.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| frameId | ✔️ | Page.FrameId | 要突出显 示的框架标识符。 | ENIdentifier of the frame to highlight. | |
| contentColor | DOM.RGBA | 内容框高亮填充颜色(默认:transparent)。 | ENThe content box highlight fill color (default: transparent). | ||
| contentOutlineColor | DOM.RGBA | 内容框高亮轮廓颜色(默认:透明)。 | ENThe content box highlight outline color (default: transparent). |
🔨Overlay.setShowHitTestBorders❌️
已弃用,不再产生任何效果。
EN
Deprecated, no longer has any effect.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean | True for showing hit-test borders | ENTrue for showing hit-test borders |
🔨Overlay.setShowWebVitals❌️
已弃用,不再产生任何效果。
EN
Deprecated, no longer has any effect.
| 参数 | 必填 | 标记 | 类型 | 描述 | 原文 |
|---|---|---|---|---|---|
| show | ✔️ | boolean |
✅️️ Events
👋Overlay.inspectedElementWindowRestored
当用户要求恢复“检查元素”浮动窗口时触发。
EN
Fired when user asks to restore the Inspected Element floating window.
| 参数 | 必填 | 标记 | 类型 |
|---|