Chrome DevTools Protocol

Methods

Overlay.disable

Disables domain notifications.

Overlay.enable

Enables domain notifications.

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)

Return Object
highlight
object

Highlight data for the node.

Overlay.hideHighlight

Hides any highlight.

Overlay.highlightFrame

Highlights owner element of the frame with given id.

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

Requests that backend shows debug borders on layers

parameters
show
boolean

True for showing debug borders

Overlay.setShowFPSCounter

Requests that backend shows the FPS counter

parameters
show
boolean

True for showing the FPS counter

Overlay.setShowHinge

Add a dual screen device hinge

parameters
hingeConfig
HingeConfig

hinge data, null means hideHinge

Overlay.setShowHitTestBorders

Requests that backend shows hit-test borders on layers

parameters
show
boolean

True for showing hit-test borders

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

Paints viewport size upon main frame resize.

parameters
show
boolean

Whether to paint size or not.

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

Allowed Values: rgb, hsl, hex

Type: string

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

gridBorderColor
DOM.RGBA

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

cellBorderColor
DOM.RGBA

The cell border color (default: transparent).

gridBorderDash
boolean

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

cellBorderDash
boolean

Whether the cell border is 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).

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

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

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