View as markdown

Overlay

Experimental

This domain provides various functionality related to drawing atop the inspected page.

Dependencies: DOM, Page, Runtime

Commands

`Overlay.disable`

Disables domain notifications.

`Overlay.enable`

Enables domain notifications.

`Overlay.getHighlightObjectForTest`

For testing.

Parameters

Name	Type	Description
`nodeId`	`DOM.NodeId`	Id of the node to get highlight object for.
`includeDistance` (optional)	`boolean`	Whether to include distance info.
`includeStyle` (optional)	`boolean`	Whether to include style info.
`colorFormat` (optional)	`ColorFormat`	The color format to get config with (default: hex).
`showAccessibilityInfo` (optional)	`boolean`	Whether to show accessibility info (default: true).

Return Object

Name	Type	Description
`highlight`	`object`	Highlight data for the node.

`Overlay.getGridHighlightObjectsForTest`

For Persistent Grid testing.

Parameters

Name	Type	Description
`nodeIds`	`array<DOM.NodeId>`	Ids of the node to get highlight object for.

Return Object

Name	Type	Description
`highlights`	`object`	Grid Highlight data for the node ids provided.

`Overlay.getSourceOrderHighlightObjectForTest`

For Source Order Viewer testing.

Parameters

Name	Type	Description
`nodeId`	`DOM.NodeId`	Id of the node to highlight.

Return Object

Name	Type	Description
`highlight`	`object`	Source order highlight data for the node id provided.

`Overlay.hideHighlight`

Hides any highlight.

`Overlay.highlightFrame`

Deprecated

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.

Parameters

Name	Type	Description
`frameId`	`Page.FrameId`	Identifier of the frame to highlight.
`contentColor` (optional)	`DOM.RGBA`	The content box highlight fill color (default: transparent).
`contentOutlineColor` (optional)	`DOM.RGBA`	The content box highlight outline color (default: transparent).

`Overlay.highlightNode`

Highlights DOM node with given id or with the given JavaScript object wrapper. Either nodeId or
objectId must be specified.

Parameters

Name	Type	Description
`highlightConfig`	`HighlightConfig`	A descriptor for the highlight appearance.
`nodeId` (optional)	`DOM.NodeId`	Identifier of the node to highlight.
`backendNodeId` (optional)	`DOM.BackendNodeId`	Identifier of the backend node to highlight.
`objectId` (optional)	`Runtime.RemoteObjectId`	JavaScript object id of the node to be highlighted.
`selector` (optional)	`string`	Selectors to highlight relevant nodes.

`Overlay.highlightQuad`

Highlights given quad. Coordinates are absolute with respect to the main frame viewport.

Parameters

Name	Type	Description
`quad`	`DOM.Quad`	Quad to highlight
`color` (optional)	`DOM.RGBA`	The highlight fill color (default: transparent).
`outlineColor` (optional)	`DOM.RGBA`	The highlight outline color (default: transparent).

`Overlay.highlightRect`

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).

Parameters

Name	Type	Description
`x`	`integer`	X coordinate
`y`	`integer`	Y coordinate
`width`	`integer`	Rectangle width
`height`	`integer`	Rectangle height
`color` (optional)	`DOM.RGBA`	The highlight fill color (default: transparent).
`outlineColor` (optional)	`DOM.RGBA`	The highlight outline color (default: transparent).

`Overlay.highlightSourceOrder`

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.

Parameters

Name	Type	Description
`sourceOrderConfig`	`SourceOrderConfig`	A descriptor for the appearance of the overlay drawing.
`nodeId` (optional)	`DOM.NodeId`	Identifier of the node to highlight.
`backendNodeId` (optional)	`DOM.BackendNodeId`	Identifier of the backend node to highlight.
`objectId` (optional)	`Runtime.RemoteObjectId`	JavaScript object id of the node to be highlighted.

`Overlay.setInspectMode`

Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted.
Backend then generates 'inspectNodeRequested' event upon element selection.

Parameters

Name	Type	Description
`mode`	`InspectMode`	Set an inspection mode.
`highlightConfig` (optional)	`HighlightConfig`	A descriptor for the highlight appearance of hovered-over nodes. May be omitted if `enabled == false`.

`Overlay.setShowAdHighlights`

Highlights owner element of all frames detected to be ads.

Parameters

Name	Type	Description
`show`	`boolean`	True for showing ad highlights

`Overlay.setPausedInDebuggerMessage`

Parameters

Name	Type	Description
`message` (optional)	`string`	The message to display, also triggers resume and step over controls.

`Overlay.setShowDebugBorders`

Requests that backend shows debug borders on layers

Parameters

Name	Type	Description
`show`	`boolean`	True for showing debug borders

`Overlay.setShowFPSCounter`

Requests that backend shows the FPS counter

Parameters

Name	Type	Description
`show`	`boolean`	True for showing the FPS counter

`Overlay.setShowGridOverlays`

Highlight multiple elements with the CSS Grid overlay.

Parameters

Name	Type	Description
`gridNodeHighlightConfigs`	`array<GridNodeHighlightConfig>`	An array of node identifiers and descriptors for the highlight appearance.

`Overlay.setShowFlexOverlays`

Parameters

Name	Type	Description
`flexNodeHighlightConfigs`	`array<FlexNodeHighlightConfig>`	An array of node identifiers and descriptors for the highlight appearance.

`Overlay.setShowScrollSnapOverlays`

Parameters

Name	Type	Description
`scrollSnapHighlightConfigs`	`array<ScrollSnapHighlightConfig>`	An array of node identifiers and descriptors for the highlight appearance.

`Overlay.setShowContainerQueryOverlays`

Parameters

Name	Type	Description
`containerQueryHighlightConfigs`	`array<ContainerQueryHighlightConfig>`	An array of node identifiers and descriptors for the highlight appearance.

`Overlay.setShowInspectedElementAnchor`

Parameters

Name	Type	Description
`inspectedElementAnchorConfig`	`InspectedElementAnchorConfig`	Node identifier for which to show an anchor for.

`Overlay.setShowPaintRects`

Requests that backend shows paint rectangles

Parameters

Name	Type	Description
`result`	`boolean`	True for showing paint rectangles

`Overlay.setShowLayoutShiftRegions`

Requests that backend shows layout shift regions

Parameters

Name	Type	Description
`result`	`boolean`	True for showing layout shift regions

`Overlay.setShowScrollBottleneckRects`

Requests that backend shows scroll bottleneck rects

Parameters

Name	Type	Description
`show`	`boolean`	True for showing scroll bottleneck rects

`Overlay.setShowHitTestBorders`

Deprecated

Deprecated, no longer has any effect.

Parameters

Name	Type	Description
`show`	`boolean`	True for showing hit-test borders

`Overlay.setShowWebVitals`

Deprecated

Deprecated, no longer has any effect.

Parameters

Name	Type	Description
`show`	`boolean`

`Overlay.setShowViewportSizeOnResize`

Paints viewport size upon main frame resize.

Parameters

Name	Type	Description
`show`	`boolean`	Whether to paint size or not.

`Overlay.setShowHinge`

Add a dual screen device hinge

Parameters

Name	Type	Description
`hingeConfig` (optional)	`HingeConfig`	hinge data, null means hideHinge

`Overlay.setShowIsolatedElements`

Show elements in isolation mode with overlays.

Parameters

Name	Type	Description
`isolatedElementHighlightConfigs`	`array<IsolatedElementHighlightConfig>`	An array of node identifiers and descriptors for the highlight appearance.

`Overlay.setShowWindowControlsOverlay`

Show Window Controls Overlay for PWA

Parameters

Name	Type	Description
`windowControlsOverlayConfig` (optional)	`WindowControlsOverlayConfig`	Window Controls Overlay data, null means hide Window Controls Overlay

Events

`Overlay.inspectNodeRequested`

Fired when the node should be inspected. This happens after call to `setInspectMode` or when
user manually inspects an element.

Parameters

Name	Type	Description
`backendNodeId`	`DOM.BackendNodeId`	Id of the node to inspect.

`Overlay.nodeHighlightRequested`

Fired when the node should be highlighted. This happens after call to `setInspectMode`.

Parameters

Name	Type	Description
`nodeId`	`DOM.NodeId`

`Overlay.screenshotRequested`

Fired when user asks to capture screenshot of some area on the page.

Parameters

Name	Type	Description
`viewport`	`Page.Viewport`	Viewport to capture, in device independent pixels (dip).

`Overlay.inspectPanelShowRequested`

Fired when user asks to show the Inspect panel.

Parameters

Name	Type	Description
`backendNodeId`	`DOM.BackendNodeId`	Id of the node to show in the panel.

`Overlay.inspectedElementWindowRestored`

Fired when user asks to restore the Inspected Element floating window.

Parameters

Name	Type	Description
`backendNodeId`	`DOM.BackendNodeId`	Id of the node to restore the floating window for.

`Overlay.inspectModeCanceled`

Fired when user cancels the inspect mode.

Types

`SourceOrderConfig`

(object)

Configuration data for drawing the source order of an elements children.

Properties

Name	Type	Description
`parentOutlineColor`	`DOM.RGBA`	the color to outline the given element in.
`childOutlineColor`	`DOM.RGBA`	the color to outline the child elements in.

`GridHighlightConfig`

(object)

Configuration data for the highlighting of Grid elements.

Properties

Name	Type	Description
`showGridExtensionLines` (optional)	`boolean`	Whether the extension lines from grid cells to the rulers should be shown (default: false).
`showPositiveLineNumbers` (optional)	`boolean`	Show Positive line number labels (default: false).
`showNegativeLineNumbers` (optional)	`boolean`	Show Negative line number labels (default: false).
`showAreaNames` (optional)	`boolean`	Show area name labels (default: false).
`showLineNames` (optional)	`boolean`	Show line name labels (default: false).
`showTrackSizes` (optional)	`boolean`	Show track size labels (default: false).
`gridBorderColor` (optional)	`DOM.RGBA`	The grid container border highlight color (default: transparent).
`cellBorderColor` (optional) Deprecated	`DOM.RGBA`	The cell border color (default: transparent). Deprecated, please use rowLineColor and columnLineColor instead.
`rowLineColor` (optional)	`DOM.RGBA`	The row line color (default: transparent).
`columnLineColor` (optional)	`DOM.RGBA`	The column line color (default: transparent).
`gridBorderDash` (optional)	`boolean`	Whether the grid border is dashed (default: false).
`cellBorderDash` (optional) Deprecated	`boolean`	Whether the cell border is dashed (default: false). Deprecated, please us rowLineDash and columnLineDash instead.
`rowLineDash` (optional)	`boolean`	Whether row lines are dashed (default: false).
`columnLineDash` (optional)	`boolean`	Whether column lines are dashed (default: false).
`rowGapColor` (optional)	`DOM.RGBA`	The row gap highlight fill color (default: transparent).
`rowHatchColor` (optional)	`DOM.RGBA`	The row gap hatching fill color (default: transparent).
`columnGapColor` (optional)	`DOM.RGBA`	The column gap highlight fill color (default: transparent).
`columnHatchColor` (optional)	`DOM.RGBA`	The column gap hatching fill color (default: transparent).
`areaBorderColor` (optional)	`DOM.RGBA`	The named grid areas border color (Default: transparent).
`gridBackgroundColor` (optional)	`DOM.RGBA`	The grid container background color (Default: transparent).

`FlexContainerHighlightConfig`

(object)

Configuration data for the highlighting of Flex container elements.

Properties

Name	Type	Description
`containerBorder` (optional)	`LineStyle`	The style of the container border
`lineSeparator` (optional)	`LineStyle`	The style of the separator between lines
`itemSeparator` (optional)	`LineStyle`	The style of the separator between items
`mainDistributedSpace` (optional)	`BoxStyle`	Style of content-distribution space on the main axis (justify-content).
`crossDistributedSpace` (optional)	`BoxStyle`	Style of content-distribution space on the cross axis (align-content).
`rowGapSpace` (optional)	`BoxStyle`	Style of empty space caused by row gaps (gap/row-gap).
`columnGapSpace` (optional)	`BoxStyle`	Style of empty space caused by columns gaps (gap/column-gap).
`crossAlignment` (optional)	`LineStyle`	Style of the self-alignment line (align-items).

`FlexItemHighlightConfig`

(object)

Configuration data for the highlighting of Flex item elements.

Properties

Name	Type	Description
`baseSizeBox` (optional)	`BoxStyle`	Style of the box representing the item's base size
`baseSizeBorder` (optional)	`LineStyle`	Style of the border around the box representing the item's base size
`flexibilityArrow` (optional)	`LineStyle`	Style of the arrow representing if the item grew or shrank

`LineStyle`

(object)

Style information for drawing a line.

Properties

Name	Type	Description
`color` (optional)	`DOM.RGBA`	The color of the line (default: transparent)
`pattern` (optional)	`string`	The line pattern (default: solid)

`BoxStyle`

(object)

Style information for drawing a box.

Properties

Name	Type	Description
`fillColor` (optional)	`DOM.RGBA`	The background color for the box (default: transparent)
`hatchColor` (optional)	`DOM.RGBA`	The hatching color for the box (default: transparent)

`ContrastAlgorithm`

(string)

Allowed Values

aa
aaa
apca

`HighlightConfig`

(object)

Configuration data for the highlighting of page elements.

Properties

Name	Type	Description
`showInfo` (optional)	`boolean`	Whether the node info tooltip should be shown (default: false).
`showStyles` (optional)	`boolean`	Whether the node styles in the tooltip (default: false).
`showRulers` (optional)	`boolean`	Whether the rulers should be shown (default: false).
`showAccessibilityInfo` (optional)	`boolean`	Whether the a11y info should be shown (default: true).
`showExtensionLines` (optional)	`boolean`	Whether the extension lines from node to the rulers should be shown (default: false).
`contentColor` (optional)	`DOM.RGBA`	The content box highlight fill color (default: transparent).
`paddingColor` (optional)	`DOM.RGBA`	The padding highlight fill color (default: transparent).
`borderColor` (optional)	`DOM.RGBA`	The border highlight fill color (default: transparent).
`marginColor` (optional)	`DOM.RGBA`	The margin highlight fill color (default: transparent).
`eventTargetColor` (optional)	`DOM.RGBA`	The event target element highlight fill color (default: transparent).
`shapeColor` (optional)	`DOM.RGBA`	The shape outside fill color (default: transparent).
`shapeMarginColor` (optional)	`DOM.RGBA`	The shape margin fill color (default: transparent).
`cssGridColor` (optional)	`DOM.RGBA`	The grid layout color (default: transparent).
`colorFormat` (optional)	`ColorFormat`	The color format used to format color styles (default: hex).
`gridHighlightConfig` (optional)	`GridHighlightConfig`	The grid layout highlight configuration (default: all transparent).
`flexContainerHighlightConfig` (optional)	`FlexContainerHighlightConfig`	The flex container highlight configuration (default: all transparent).
`flexItemHighlightConfig` (optional)	`FlexItemHighlightConfig`	The flex item highlight configuration (default: all transparent).
`contrastAlgorithm` (optional)	`ContrastAlgorithm`	The contrast algorithm to use for the contrast ratio (default: aa).
`containerQueryContainerHighlightConfig` (optional)	`ContainerQueryContainerHighlightConfig`	The container query container highlight configuration (default: all transparent).

`ColorFormat`

(string)

Allowed Values

rgb
hsl
hwb
hex

`GridNodeHighlightConfig`

(object)

Configurations for Persistent Grid Highlight

Properties

Name	Type	Description
`gridHighlightConfig`	`GridHighlightConfig`	A descriptor for the highlight appearance.
`nodeId`	`DOM.NodeId`	Identifier of the node to highlight.

`FlexNodeHighlightConfig`

(object)

Properties

Name	Type	Description
`flexContainerHighlightConfig`	`FlexContainerHighlightConfig`	A descriptor for the highlight appearance of flex containers.
`nodeId`	`DOM.NodeId`	Identifier of the node to highlight.

`ScrollSnapContainerHighlightConfig`

(object)

Properties

Name	Type	Description
`snapportBorder` (optional)	`LineStyle`	The style of the snapport border (default: transparent)
`snapAreaBorder` (optional)	`LineStyle`	The style of the snap area border (default: transparent)
`scrollMarginColor` (optional)	`DOM.RGBA`	The margin highlight fill color (default: transparent).
`scrollPaddingColor` (optional)	`DOM.RGBA`	The padding highlight fill color (default: transparent).

`ScrollSnapHighlightConfig`

(object)

Properties

Name	Type	Description
`scrollSnapContainerHighlightConfig`	`ScrollSnapContainerHighlightConfig`	A descriptor for the highlight appearance of scroll snap containers.
`nodeId`	`DOM.NodeId`	Identifier of the node to highlight.

`HingeConfig`

(object)

Configuration for dual screen hinge

Properties

Name	Type	Description
`rect`	`DOM.Rect`	A rectangle represent hinge
`contentColor` (optional)	`DOM.RGBA`	The content box highlight fill color (default: a dark color).
`outlineColor` (optional)	`DOM.RGBA`	The content box highlight outline color (default: transparent).

`WindowControlsOverlayConfig`

(object)

Configuration for Window Controls Overlay

Properties

Name	Type	Description
`showCSS`	`boolean`	Whether the title bar CSS should be shown when emulating the Window Controls Overlay.
`selectedPlatform`	`string`	Selected platforms to show the overlay.
`themeColor`	`string`	The theme color defined in app manifest.

`ContainerQueryHighlightConfig`

(object)

Properties

Name	Type	Description
`containerQueryContainerHighlightConfig`	`ContainerQueryContainerHighlightConfig`	A descriptor for the highlight appearance of container query containers.
`nodeId`	`DOM.NodeId`	Identifier of the container node to highlight.

`ContainerQueryContainerHighlightConfig`

(object)

Properties

Name	Type	Description
`containerBorder` (optional)	`LineStyle`	The style of the container border.
`descendantBorder` (optional)	`LineStyle`	The style of the descendants' borders.

`IsolatedElementHighlightConfig`

(object)

Properties

Name	Type	Description
`isolationModeHighlightConfig`	`IsolationModeHighlightConfig`	A descriptor for the highlight appearance of an element in isolation mode.
`nodeId`	`DOM.NodeId`	Identifier of the isolated element to highlight.

`IsolationModeHighlightConfig`

(object)

Properties

Name	Type	Description
`resizerColor` (optional)	`DOM.RGBA`	The fill color of the resizers (default: transparent).
`resizerHandleColor` (optional)	`DOM.RGBA`	The fill color for resizer handles (default: transparent).
`maskColor` (optional)	`DOM.RGBA`	The fill color for the mask covering non-isolated elements (default: transparent).

`InspectMode`

(string)

Allowed Values

searchForNode
searchForUAShadowDOM
captureAreaScreenshot
none

`InspectedElementAnchorConfig`

(object)

Properties

Name	Type	Description
`nodeId` (optional)	`DOM.NodeId`	Identifier of the node to highlight.
`backendNodeId` (optional)	`DOM.BackendNodeId`	Identifier of the backend node to highlight.