React Native CDP Status

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

highlight

object

Highlight data for the node.

Overlay.getSourceOrderHighlightObjectForTest #

For Source Order Viewer testing.

Parameters

nodeId

Id of the node to highlight.

Return object

highlight

object

Source order highlight data for the node id provided.

Overlay.hideHighlight #

Hides any highlight.

Overlay.highlightNode #

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

Parameters

highlightConfig

HighlightConfig

A descriptor for the highlight appearance.

nodeId
Optional

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

quad

DOM.Quad

Quad to highlight

color
Optional

The highlight fill color (default: transparent).

outlineColor
Optional

The highlight outline color (default: transparent).

Overlay.highlightRect #

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

Parameters

x

integer

X coordinate

y

integer

Y coordinate

width

integer

Rectangle width

height

integer

Rectangle height

color
Optional

The highlight fill color (default: transparent).

outlineColor
Optional

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

sourceOrderConfig

SourceOrderConfig

A descriptor for the appearance of the overlay drawing.

nodeId
Optional

WindowControlsOverlayConfig

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

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.setPausedInDebuggerMessage #

Parameters

message
Optional

string

The message to display, also triggers resume and step over controls.

Overlay.setShowAdHighlights #

Highlights owner element of all frames detected to be ads.

Parameters

show

boolean

True for showing ad highlights

Overlay.setShowContainerQueryOverlays #

Parameters

containerQueryHighlightConfigs

array[ ContainerQueryHighlightConfig ]

An array of node identifiers and descriptors for the highlight appearance.

Overlay.setShowDebugBorders #

Requests that backend shows debug borders on layers

Parameters

show

boolean

True for showing debug borders

Overlay.setShowFlexOverlays #

Parameters

flexNodeHighlightConfigs

array[ FlexNodeHighlightConfig ]

An array of node identifiers and descriptors for the highlight appearance.

Overlay.setShowFPSCounter #

Requests that backend shows the FPS counter

Parameters

show

boolean

True for showing the FPS counter

Overlay.setShowGridOverlays #

Highlight multiple elements with the CSS Grid overlay.

Parameters

gridNodeHighlightConfigs

array[ GridNodeHighlightConfig ]

An array of node identifiers and descriptors for the highlight appearance.

Overlay.setShowHinge #

Add a dual screen device hinge

Parameters

hingeConfig
Optional

HingeConfig

hinge data, null means hideHinge

Overlay.setShowIsolatedElements #

Show elements in isolation mode with overlays.

Parameters

isolatedElementHighlightConfigs

array[ IsolatedElementHighlightConfig ]

An array of node identifiers and descriptors for the highlight appearance.

Overlay.setShowLayoutShiftRegions #

Requests that backend shows layout shift regions

Parameters

result

boolean

True for showing layout shift regions

Overlay.setShowPaintRects #

Requests that backend shows paint rectangles

Parameters

result

boolean

True for showing paint rectangles

Overlay.setShowScrollBottleneckRects #

Requests that backend shows scroll bottleneck rects

Parameters

show

boolean

True for showing scroll bottleneck rects

Overlay.setShowScrollSnapOverlays #

Parameters

scrollSnapHighlightConfigs

array[ ScrollSnapHighlightConfig ]

An array of node identifiers and descriptors for the highlight appearance.

Overlay.setShowViewportSizeOnResize #

Paints viewport size upon main frame resize.

Parameters

show

boolean

Whether to paint size or not.

Overlay.setShowWebVitals #

Request that backend shows an overlay with web vital metrics.

Parameters

show

boolean

Overlay.setShowWindowControlsOverlay #

Show Window Controls Overlay for PWA

Parameters

windowControlsOverlayConfig
Optional

Window Controls Overlay data, null means hide Window Controls Overlay

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

frameId

Page.FrameId

Identifier of the frame to highlight.

contentColor
Optional

The content box highlight fill color (default: transparent).

contentOutlineColor
Optional

The content box highlight outline color (default: transparent).

Overlay.setShowHitTestBorders Deprecated#

Deprecated, no longer has any effect.

Parameters

show

boolean

True for showing hit-test borders

Events

Overlay.inspectModeCanceled #

Fired when user cancels the inspect mode.

Overlay.inspectNodeRequested #

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

Parameters

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

nodeId

Overlay.screenshotRequested #

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

Parameters

viewport

Page.Viewport

Viewport to capture, in device independent pixels (dip).

Types

Overlay.BoxStyle #

Style information for drawing a box.

Type: object

Properties

fillColor
Optional

The background color for the box (default: transparent)

hatchColor
Optional

The hatching color for the box (default: transparent)

Overlay.ColorFormat #

Type: string

Allowed values: rgb, hsl, hwb, hex

Overlay.ContainerQueryContainerHighlightConfig #

Type: object

Properties

containerBorder
Optional

The style of the container border.

descendantBorder
Optional

ContainerQueryContainerHighlightConfig

The style of the descendants' borders.

Overlay.ContainerQueryHighlightConfig #

Type: object

Properties

containerQueryContainerHighlightConfig

A descriptor for the highlight appearance of container query containers.

nodeId

Identifier of the container node to highlight.

Overlay.ContrastAlgorithm #

Type: string

Allowed values: aa, aaa, apca

Overlay.FlexContainerHighlightConfig #

Configuration data for the highlighting of Flex container elements.

Type: object

Properties

containerBorder
Optional

The style of the container border

lineSeparator
Optional

The style of the separator between lines

itemSeparator
Optional

The style of the separator between items

mainDistributedSpace
Optional

Style of content-distribution space on the main axis (justify-content).

crossDistributedSpace
Optional

Style of content-distribution space on the cross axis (align-content).

rowGapSpace
Optional

Style of empty space caused by row gaps (gap/row-gap).

columnGapSpace
Optional

Style of empty space caused by columns gaps (gap/column-gap).

crossAlignment
Optional

Style of the self-alignment line (align-items).

Overlay.FlexItemHighlightConfig #

Configuration data for the highlighting of Flex item elements.

Type: object

Properties

baseSizeBox
Optional

Style of the box representing the item's base size

baseSizeBorder
Optional

Style of the border around the box representing the item's base size

flexibilityArrow
Optional

FlexContainerHighlightConfig

Style of the arrow representing if the item grew or shrank

Overlay.FlexNodeHighlightConfig #

Type: object

Properties

flexContainerHighlightConfig

A descriptor for the highlight appearance of flex containers.

nodeId

Identifier of the node to highlight.

Overlay.GridHighlightConfig #

Configuration data for the highlighting of Grid elements.

Type: object

Properties

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

The grid container border highlight color (default: transparent).

cellBorderColor
Optional

The cell border color (default: transparent). Deprecated, please use rowLineColor and columnLineColor instead.

Deprecated

rowLineColor
Optional

The row line color (default: transparent).

columnLineColor
Optional

The column line color (default: transparent).

gridBorderDash
Optional

boolean

Whether the grid border is dashed (default: false).

cellBorderDash
Optional

boolean

Whether the cell border is dashed (default: false). Deprecated, please us rowLineDash and columnLineDash instead.

Deprecated

rowLineDash
Optional

boolean

Whether row lines are dashed (default: false).

columnLineDash
Optional

boolean

Whether column lines are dashed (default: false).

rowGapColor
Optional

The row gap highlight fill color (default: transparent).

rowHatchColor
Optional

The row gap hatching fill color (default: transparent).

columnGapColor
Optional

The column gap highlight fill color (default: transparent).

columnHatchColor
Optional

The column gap hatching fill color (default: transparent).

areaBorderColor
Optional

The named grid areas border color (Default: transparent).

gridBackgroundColor
Optional

The grid container background color (Default: transparent).

Overlay.GridNodeHighlightConfig #

Configurations for Persistent Grid Highlight

Type: object

Properties

gridHighlightConfig

GridHighlightConfig

A descriptor for the highlight appearance.

nodeId

Identifier of the node to highlight.

Overlay.HighlightConfig #

Configuration data for the highlighting of page elements.

Type: object

Properties

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

The content box highlight fill color (default: transparent).

paddingColor
Optional

The padding highlight fill color (default: transparent).

borderColor
Optional

The border highlight fill color (default: transparent).

marginColor
Optional

The margin highlight fill color (default: transparent).

eventTargetColor
Optional

The event target element highlight fill color (default: transparent).

shapeColor
Optional

The shape outside fill color (default: transparent).

shapeMarginColor
Optional

The shape margin fill color (default: transparent).

cssGridColor
Optional

FlexContainerHighlightConfig

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

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

Overlay.HingeConfig #

Configuration for dual screen hinge

Type: object

Properties

rect

DOM.Rect

A rectangle represent hinge

contentColor
Optional

The content box highlight fill color (default: a dark color).

outlineColor
Optional

IsolationModeHighlightConfig

The content box highlight outline color (default: transparent).

Overlay.InspectMode #

Type: string

Allowed values: searchForNode, searchForUAShadowDOM, captureAreaScreenshot, showDistances, none

Overlay.IsolatedElementHighlightConfig #

Type: object

Properties

isolationModeHighlightConfig

A descriptor for the highlight appearance of an element in isolation mode.

nodeId

Identifier of the isolated element to highlight.

Overlay.IsolationModeHighlightConfig #

Type: object

Properties

resizerColor
Optional

The fill color of the resizers (default: transparent).

resizerHandleColor
Optional

The fill color for resizer handles (default: transparent).

maskColor
Optional

The fill color for the mask covering non-isolated elements (default: transparent).

Overlay.LineStyle #

Style information for drawing a line.

Type: object

Properties

color
Optional

The color of the line (default: transparent)

pattern
Optional

string

The line pattern (default: solid)

Allowed values: dashed, dotted

Overlay.ScrollSnapContainerHighlightConfig #

Type: object

Properties

snapportBorder
Optional

The style of the snapport border (default: transparent)

snapAreaBorder
Optional

The style of the snap area border (default: transparent)

scrollMarginColor
Optional

The margin highlight fill color (default: transparent).

scrollPaddingColor
Optional

ScrollSnapContainerHighlightConfig

The padding highlight fill color (default: transparent).

Overlay.ScrollSnapHighlightConfig #

Type: object

Properties

scrollSnapContainerHighlightConfig

A descriptor for the highlight appearance of scroll snap containers.

nodeId

Identifier of the node to highlight.

Overlay.SourceOrderConfig #

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

Type: object

Properties

parentOutlineColor

the color to outline the given element in.

childOutlineColor