Chrome DevTools Protocol

Methods

Overlay.disable

Disables domain notifications.

Overlay.enable

Enables domain notifications.

Overlay.getGridHighlightObjectsForTest

For Persistent Grid testing.

parameters
nodeIds
array[ DOM.NodeId ]

Ids of the node to get highlight object for.

Return Object
highlights
object

Grid Highlight data for the node ids provided.

Overlay.getHighlightObjectForTest

For testing.

parameters
nodeId
DOM.NodeId

Id of the node to get highlight object for.

includeDistance
boolean

Whether to include distance info.

includeStyle
boolean

Whether to include style info.

colorFormat
ColorFormat

The color format to get config with (default: hex).

showAccessibilityInfo
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
DOM.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
DOM.NodeId

Identifier of the node to highlight.

backendNodeId
DOM.BackendNodeId

Identifier of the backend node to highlight.

objectId
Runtime.RemoteObjectId

JavaScript object id of the node to be highlighted.

selector
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
DOM.RGBA

The highlight fill color (default: transparent).

outlineColor
DOM.RGBA

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
DOM.RGBA

The highlight fill color (default: transparent).

outlineColor
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
sourceOrderConfig
SourceOrderConfig

A descriptor for the appearance of the overlay drawing.

nodeId
DOM.NodeId

Identifier of the node to highlight.

backendNodeId
DOM.BackendNodeId

Identifier of the backend node to highlight.

objectId
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
HighlightConfig

A descriptor for the highlight appearance of hovered-over nodes. May be omitted if enabled == false.

Overlay.setPausedInDebuggerMessage

parameters
message
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
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.setShowWindowControlsOverlay

Show Window Controls Overlay for PWA

parameters
windowControlsOverlayConfig
WindowControlsOverlayConfig

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
DOM.RGBA

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

contentOutlineColor
DOM.RGBA

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

Overlay.setShowWebVitals Deprecated

Deprecated, no longer has any effect.

parameters
show
boolean

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
DOM.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
DOM.RGBA

The background color for the box (default: transparent)

hatchColor
DOM.RGBA

The hatching color for the box (default: transparent)

Overlay.ColorFormat

Allowed Values: rgb, hsl, hwb, hex

Type: string

Overlay.ContainerQueryContainerHighlightConfig

Type: object

properties
containerBorder
LineStyle

The style of the container border.

descendantBorder
LineStyle

The style of the descendants' borders.

Overlay.ContainerQueryHighlightConfig

Type: object

properties
containerQueryContainerHighlightConfig
ContainerQueryContainerHighlightConfig

A descriptor for the highlight appearance of container query containers.

nodeId
DOM.NodeId

Identifier of the container node to highlight.

Overlay.ContrastAlgorithm

Allowed Values: aa, aaa, apca

Type: string

Overlay.FlexContainerHighlightConfig

Configuration data for the highlighting of Flex container elements.

Type: object

properties
containerBorder
LineStyle

The style of the container border

lineSeparator
LineStyle

The style of the separator between lines

itemSeparator
LineStyle

The style of the separator between items

mainDistributedSpace
BoxStyle

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

crossDistributedSpace
BoxStyle

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

rowGapSpace
BoxStyle

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

columnGapSpace
BoxStyle

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

crossAlignment
LineStyle

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

Overlay.FlexItemHighlightConfig

Configuration data for the highlighting of Flex item elements.

Type: object

properties
baseSizeBox
BoxStyle

Style of the box representing the item's base size

baseSizeBorder
LineStyle

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

flexibilityArrow
LineStyle

Style of the arrow representing if the item grew or shrank

Overlay.FlexNodeHighlightConfig

Type: object

properties
flexContainerHighlightConfig
FlexContainerHighlightConfig

A descriptor for the highlight appearance of flex containers.

nodeId
DOM.NodeId

Identifier of the node to highlight.

Overlay.GridHighlightConfig

Configuration data for the highlighting of Grid elements.

Type: object

properties
showGridExtensionLines
boolean

Whether the extension lines from grid cells to the rulers should be shown (default: false).

showPositiveLineNumbers
boolean

Show Positive line number labels (default: false).

showNegativeLineNumbers
boolean

Show Negative line number labels (default: false).

showAreaNames
boolean

Show area name labels (default: false).

showLineNames
boolean

Show line name labels (default: false).

showTrackSizes
boolean

Show track size labels (default: false).

gridBorderColor
DOM.RGBA

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

cellBorderColor
DOM.RGBA

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

Deprecated
rowLineColor
DOM.RGBA

The row line color (default: transparent).

columnLineColor
DOM.RGBA

The column line color (default: transparent).

gridBorderDash
boolean

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

cellBorderDash
boolean

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

Deprecated
rowLineDash
boolean

Whether row lines are dashed (default: false).

columnLineDash
boolean

Whether column lines are dashed (default: false).

rowGapColor
DOM.RGBA

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

rowHatchColor
DOM.RGBA

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

columnGapColor
DOM.RGBA

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

columnHatchColor
DOM.RGBA

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

areaBorderColor
DOM.RGBA

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

gridBackgroundColor
DOM.RGBA

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
DOM.NodeId

Identifier of the node to highlight.

Overlay.HighlightConfig

Configuration data for the highlighting of page elements.

Type: object

properties
showInfo
boolean

Whether the node info tooltip should be shown (default: false).

showStyles
boolean

Whether the node styles in the tooltip (default: false).

showRulers
boolean

Whether the rulers should be shown (default: false).

showAccessibilityInfo
boolean

Whether the a11y info should be shown (default: true).

showExtensionLines
boolean

Whether the extension lines from node to the rulers should be shown (default: false).

contentColor
DOM.RGBA

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

paddingColor
DOM.RGBA

The padding highlight fill color (default: transparent).

borderColor
DOM.RGBA

The border highlight fill color (default: transparent).

marginColor
DOM.RGBA

The margin highlight fill color (default: transparent).

eventTargetColor
DOM.RGBA

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

shapeColor
DOM.RGBA

The shape outside fill color (default: transparent).

shapeMarginColor
DOM.RGBA

The shape margin fill color (default: transparent).

cssGridColor
DOM.RGBA

The grid layout color (default: transparent).

colorFormat
ColorFormat

The color format used to format color styles (default: hex).

gridHighlightConfig
GridHighlightConfig

The grid layout highlight configuration (default: all transparent).

flexContainerHighlightConfig
FlexContainerHighlightConfig

The flex container highlight configuration (default: all transparent).

flexItemHighlightConfig
FlexItemHighlightConfig

The flex item highlight configuration (default: all transparent).

contrastAlgorithm
ContrastAlgorithm

The contrast algorithm to use for the contrast ratio (default: aa).

containerQueryContainerHighlightConfig
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
DOM.RGBA

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

outlineColor
DOM.RGBA

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

Overlay.InspectMode

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

Type: string

Overlay.IsolatedElementHighlightConfig

Type: object

properties
isolationModeHighlightConfig
IsolationModeHighlightConfig

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

nodeId
DOM.NodeId

Identifier of the isolated element to highlight.

Overlay.IsolationModeHighlightConfig

Type: object

properties
resizerColor
DOM.RGBA

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

resizerHandleColor
DOM.RGBA

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

maskColor
DOM.RGBA

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

Overlay.LineStyle

Style information for drawing a line.

Type: object

properties
color
DOM.RGBA

The color of the line (default: transparent)

pattern
string

The line pattern (default: solid)

Allowed Values: dashed, dotted

Overlay.ScrollSnapContainerHighlightConfig

Type: object

properties
snapportBorder
LineStyle

The style of the snapport border (default: transparent)

snapAreaBorder
LineStyle

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

scrollMarginColor
DOM.RGBA

The margin highlight fill color (default: transparent).

scrollPaddingColor
DOM.RGBA

The padding highlight fill color (default: transparent).

Overlay.ScrollSnapHighlightConfig

Type: object

properties
scrollSnapContainerHighlightConfig
ScrollSnapContainerHighlightConfig

A descriptor for the highlight appearance of scroll snap containers.

nodeId
DOM.NodeId

Identifier of the node to highlight.

Overlay.SourceOrderConfig

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

Type: object

properties
parentOutlineColor
DOM.RGBA

the color to outline the given element in.

childOutlineColor
DOM.RGBA

the color to outline the child elements in.

Overlay.WindowControlsOverlayConfig

Configuration for Window Controls Overlay

Type: object

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