devtools_elements

Elements panel. Target an element by ref (from browser_snapshot), CSS selector, or nodeId. Actions: search (CSS selector, XPath, or text; returns refs), describe, html (get/set outerHTML), attributes (get/set/remove), classes (add/remove/toggle), styles (matched rules + inline; setStyle edits inline; setRuleText edits a matched rule), computed, box (box model), listeners (event listeners with source locations), pseudo (force :hover/:active/:focus/…), highlight/hide (overlay), overlays (layout shift regions, paint rects, FPS, grid).

Parameters

integer

Target tab id from browser_tabs, which lists tabs across all windows. Defaults to the agent’s most recently opened usable tab, or the only usable tab. Otherwise select a listed tabId.

enum

required

One of: search, describe, html, attributes, classes, styles, computed, box, listeners, pseudo, highlight, hide, overlays.

string

Element ref from browser_snapshot, e.g. “e12”

string

integer

string

For search: selector, XPath, or text

integer

string

html: new outerHTML

integer

string

Attribute/property name

string

boolean

string[]

string

styles setStyle: CSS property

boolean

string

object

string

styles setRuleText: new declarations text

string[]

computed: which properties (default common layout props)

boolean

enum[]

Items: active, focus, focus-visible, focus-within, hover, visited, target.

object

Example

Find elements

{
  "tabId": 1234,
  "action": "search",
  "query": "button.primary",
  "limit": 5
}

Matched CSS rules

{
  "tabId": 1234,
  "action": "styles",
  "ref": "e12"
}

Edit an inline style

{
  "tabId": 1234,
  "action": "styles",
  "ref": "e12",
  "property": "color",
  "value": "red",
  "important": true
}

Force :hover

{
  "tabId": 1234,
  "action": "pseudo",
  "ref": "e12",
  "states": [
    "hover"
  ]
}

Browser automation

Developer tools

Parameters

Example

​Parameters

​Example

Parameters

Example