# Scrapfly Documentation ## Table of Contents ### Dashboard - [Intro](https://scrapfly.io/docs) - [Project](https://scrapfly.io/docs/project) - [Account](https://scrapfly.io/docs/account) - [Workspace & Team](https://scrapfly.io/docs/workspace-and-team) - [Billing](https://scrapfly.io/docs/billing) ### Products #### MCP Server - [Getting Started](https://scrapfly.io/docs/mcp/getting-started) - [Tools & API Spec](https://scrapfly.io/docs/mcp/tools) - [Authentication](https://scrapfly.io/docs/mcp/authentication) - [Examples & Use Cases](https://scrapfly.io/docs/mcp/examples) - [FAQ](https://scrapfly.io/docs/mcp/faq) ##### Integrations - [Overview](https://scrapfly.io/docs/mcp/integrations) - [Claude Desktop](https://scrapfly.io/docs/mcp/integrations/claude-desktop) - [Claude Code](https://scrapfly.io/docs/mcp/integrations/claude-code) - [ChatGPT](https://scrapfly.io/docs/mcp/integrations/chatgpt) - [Cursor](https://scrapfly.io/docs/mcp/integrations/cursor) - [Cline](https://scrapfly.io/docs/mcp/integrations/cline) - [Windsurf](https://scrapfly.io/docs/mcp/integrations/windsurf) - [Zed](https://scrapfly.io/docs/mcp/integrations/zed) - [Roo Code](https://scrapfly.io/docs/mcp/integrations/roo-code) - [VS Code](https://scrapfly.io/docs/mcp/integrations/vscode) - [LangChain](https://scrapfly.io/docs/mcp/integrations/langchain) - [LlamaIndex](https://scrapfly.io/docs/mcp/integrations/llamaindex) - [CrewAI](https://scrapfly.io/docs/mcp/integrations/crewai) - [OpenAI](https://scrapfly.io/docs/mcp/integrations/openai) - [n8n](https://scrapfly.io/docs/mcp/integrations/n8n) - [Make](https://scrapfly.io/docs/mcp/integrations/make) - [Zapier](https://scrapfly.io/docs/mcp/integrations/zapier) - [Vapi AI](https://scrapfly.io/docs/mcp/integrations/vapi) - [Agent Builder](https://scrapfly.io/docs/mcp/integrations/agent-builder) - [Custom Client](https://scrapfly.io/docs/mcp/integrations/custom-client) #### Web Scraping API - [Getting Started](https://scrapfly.io/docs/scrape-api/getting-started) - [API Specification]() - [Monitoring](https://scrapfly.io/docs/monitoring) - [Customize Request](https://scrapfly.io/docs/scrape-api/custom) - [Debug](https://scrapfly.io/docs/scrape-api/debug) - [Anti Scraping Protection](https://scrapfly.io/docs/scrape-api/anti-scraping-protection) - [Proxy](https://scrapfly.io/docs/scrape-api/proxy) - [Proxy Mode](https://scrapfly.io/docs/scrape-api/proxy-mode) - [Proxy Mode - Screaming Frog](https://scrapfly.io/docs/scrape-api/proxy-mode/screaming-frog) - [Proxy Mode - Apify](https://scrapfly.io/docs/scrape-api/proxy-mode/apify) - [(Auto) Data Extraction](https://scrapfly.io/docs/scrape-api/extraction) - [Javascript Rendering](https://scrapfly.io/docs/scrape-api/javascript-rendering) - [Javascript Scenario](https://scrapfly.io/docs/scrape-api/javascript-scenario) - [SSL](https://scrapfly.io/docs/scrape-api/ssl) - [DNS](https://scrapfly.io/docs/scrape-api/dns) - [Cache](https://scrapfly.io/docs/scrape-api/cache) - [Session](https://scrapfly.io/docs/scrape-api/session) - [Webhook](https://scrapfly.io/docs/scrape-api/webhook) - [Screenshot](https://scrapfly.io/docs/scrape-api/screenshot) - [Errors](https://scrapfly.io/docs/scrape-api/errors) - [Timeout](https://scrapfly.io/docs/scrape-api/understand-timeout) - [Throttling](https://scrapfly.io/docs/throttling) - [Troubleshoot](https://scrapfly.io/docs/scrape-api/troubleshoot) - [Billing](https://scrapfly.io/docs/scrape-api/billing) - [FAQ](https://scrapfly.io/docs/scrape-api/faq) #### Crawler API - [Getting Started](https://scrapfly.io/docs/crawler-api/getting-started) - [API Specification]() - [Retrieving Results](https://scrapfly.io/docs/crawler-api/results) - [WARC Format](https://scrapfly.io/docs/crawler-api/warc-format) - [Data Extraction](https://scrapfly.io/docs/crawler-api/extraction-rules) - [Webhook](https://scrapfly.io/docs/crawler-api/webhook) - [Billing](https://scrapfly.io/docs/crawler-api/billing) - [Errors](https://scrapfly.io/docs/crawler-api/errors) - [Troubleshoot](https://scrapfly.io/docs/crawler-api/troubleshoot) - [FAQ](https://scrapfly.io/docs/crawler-api/faq) #### Screenshot API - [Getting Started](https://scrapfly.io/docs/screenshot-api/getting-started) - [API Specification]() - [Accessibility Testing](https://scrapfly.io/docs/screenshot-api/accessibility) - [Webhook](https://scrapfly.io/docs/screenshot-api/webhook) - [Billing](https://scrapfly.io/docs/screenshot-api/billing) - [Errors](https://scrapfly.io/docs/screenshot-api/errors) #### Extraction API - [Getting Started](https://scrapfly.io/docs/extraction-api/getting-started) - [API Specification]() - [Rules Template](https://scrapfly.io/docs/extraction-api/rules-and-template) - [LLM Extraction](https://scrapfly.io/docs/extraction-api/llm-prompt) - [AI Auto Extraction](https://scrapfly.io/docs/extraction-api/automatic-ai) - [Webhook](https://scrapfly.io/docs/extraction-api/webhook) - [Billing](https://scrapfly.io/docs/extraction-api/billing) - [Errors](https://scrapfly.io/docs/extraction-api/errors) - [FAQ](https://scrapfly.io/docs/extraction-api/faq) #### Proxy Saver - [Getting Started](https://scrapfly.io/docs/proxy-saver/getting-started) - [Fingerprints](https://scrapfly.io/docs/proxy-saver/fingerprints) - [Optimizations](https://scrapfly.io/docs/proxy-saver/optimizations) - [SSL Certificates](https://scrapfly.io/docs/proxy-saver/certificates) - [Protocols](https://scrapfly.io/docs/proxy-saver/protocols) - [Pacfile](https://scrapfly.io/docs/proxy-saver/pacfile) - [Secure Credentials](https://scrapfly.io/docs/proxy-saver/security) - [Billing](https://scrapfly.io/docs/proxy-saver/billing) #### Cloud Browser API - [Getting Started](https://scrapfly.io/docs/cloud-browser-api/getting-started) - [Proxy & Geo-Targeting](https://scrapfly.io/docs/cloud-browser-api/proxy) - [Unblock API](https://scrapfly.io/docs/cloud-browser-api/unblock) - [File Downloads](https://scrapfly.io/docs/cloud-browser-api/file-downloads) - [Session Resume](https://scrapfly.io/docs/cloud-browser-api/session-resume) - [Human-in-the-Loop](https://scrapfly.io/docs/cloud-browser-api/human-in-the-loop) - [Debug Mode](https://scrapfly.io/docs/cloud-browser-api/debug-mode) - [Bring Your Own Proxy](https://scrapfly.io/docs/cloud-browser-api/bring-your-own-proxy) - [Browser Extensions](https://scrapfly.io/docs/cloud-browser-api/extensions) - [Native Browser MCP](https://scrapfly.io/docs/cloud-browser-api/mcp) - [DevTools Protocol](https://scrapfly.io/docs/cloud-browser-api/cdp-reference) ##### Integrations - [Puppeteer](https://scrapfly.io/docs/cloud-browser-api/puppeteer) - [Playwright](https://scrapfly.io/docs/cloud-browser-api/playwright) - [Selenium](https://scrapfly.io/docs/cloud-browser-api/selenium) - [Vercel Agent Browser](https://scrapfly.io/docs/cloud-browser-api/agent-browser) - [Browser Use](https://scrapfly.io/docs/cloud-browser-api/browser-use) - [Stagehand](https://scrapfly.io/docs/cloud-browser-api/stagehand) - [Billing](https://scrapfly.io/docs/cloud-browser-api/billing) - [Errors](https://scrapfly.io/docs/cloud-browser-api/errors) ### Tools - [Antibot Detector](https://scrapfly.io/docs/tools/antibot-detector) ### SDK - [Golang](https://scrapfly.io/docs/sdk/golang) - [Python](https://scrapfly.io/docs/sdk/python) - [Rust](https://scrapfly.io/docs/sdk/rust) - [TypeScript](https://scrapfly.io/docs/sdk/typescript) - [Scrapy](https://scrapfly.io/docs/sdk/scrapy) ### Integrations - [Getting Started](https://scrapfly.io/docs/integration/getting-started) - [LangChain](https://scrapfly.io/docs/integration/langchain) - [LlamaIndex](https://scrapfly.io/docs/integration/llamaindex) - [CrewAI](https://scrapfly.io/docs/integration/crewai) - [Zapier](https://scrapfly.io/docs/integration/zapier) - [Make](https://scrapfly.io/docs/integration/make) - [n8n](https://scrapfly.io/docs/integration/n8n) ### Academy - [Overview](https://scrapfly.io/academy) - [Web Scraping Overview](https://scrapfly.io/academy/scraping-overview) - [Tools](https://scrapfly.io/academy/tools-overview) - [Reverse Engineering](https://scrapfly.io/academy/reverse-engineering) - [Static Scraping](https://scrapfly.io/academy/static-scraping) - [HTML Parsing](https://scrapfly.io/academy/html-parsing) - [Dynamic Scraping](https://scrapfly.io/academy/dynamic-scraping) - [Hidden API Scraping](https://scrapfly.io/academy/hidden-api-scraping) - [Headless Browsers](https://scrapfly.io/academy/headless-browsers) - [Hidden Web Data](https://scrapfly.io/academy/hidden-web-data) - [JSON Parsing](https://scrapfly.io/academy/json-parsing) - [Data Processing](https://scrapfly.io/academy/data-processing) - [Scaling](https://scrapfly.io/academy/scaling) - [Walkthrough Summary](https://scrapfly.io/academy/walkthrough-summary) - [Scraper Blocking](https://scrapfly.io/academy/scraper-blocking) - [Proxies](https://scrapfly.io/academy/proxies) --- 1. [DevTools Protocol](https://scrapfly.io/docs/cloud-browser-api/cdp-reference) 2. Overlay # Overlay Experimental This domain provides various functionality related to drawing atop the inspected page. **Dependencies:** [DOM](https://scrapfly.io/docs/cloud-browser-api/cdp-reference/DOM), [Page](https://scrapfly.io/docs/cloud-browser-api/cdp-reference/Page), [Runtime](https://scrapfly.io/docs/cloud-browser-api/cdp-reference/Runtime) - [Commands (30)](#commands) - [Events (6)](#events) - [Types (21)](#types) No symbols match your filter. ## 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. |