> ## Documentation Index
> Fetch the complete documentation index at: https://docs.browspark.krishm.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# devtools_elements

> Elements panel.

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

<ParamField body="tabId" type="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.
</ParamField>

<ParamField body="action" type="enum" required>
  One of: `search`, `describe`, `html`, `attributes`, `classes`, `styles`, `computed`, `box`, `listeners`, `pseudo`, `highlight`, `hide`, `overlays`.
</ParamField>

<ParamField body="ref" type="string">
  Element ref from browser\_snapshot, e.g. "e12"
</ParamField>

<ParamField body="selector" type="string">
   
</ParamField>

<ParamField body="nodeId" type="integer">
   
</ParamField>

<ParamField body="query" type="string">
  For search: selector, XPath, or text
</ParamField>

<ParamField body="limit" type="integer">
   
</ParamField>

<ParamField body="set" type="string">
  html: new outerHTML
</ParamField>

<ParamField body="depth" type="integer">
   
</ParamField>

<ParamField body="name" type="string">
  Attribute/property name
</ParamField>

<ParamField body="value" type="string">
   
</ParamField>

<ParamField body="remove" type="boolean">
   
</ParamField>

<ParamField body="add" type="string[]">
   
</ParamField>

<ParamField body="removeClasses" type="string[]">
   
</ParamField>

<ParamField body="toggle" type="string[]">
   
</ParamField>

<ParamField body="property" type="string">
  styles setStyle: CSS property
</ParamField>

<ParamField body="important" type="boolean">
   
</ParamField>

<ParamField body="styleSheetId" type="string">
   
</ParamField>

<ParamField body="range" type="object">
   
</ParamField>

<ParamField body="text" type="string">
  styles setRuleText: new declarations text
</ParamField>

<ParamField body="properties" type="string[]">
  computed: which properties (default common layout props)
</ParamField>

<ParamField body="all" type="boolean">
   
</ParamField>

<ParamField body="states" type="enum[]">
  Items: `active`, `focus`, `focus-visible`, `focus-within`, `hover`, `visited`, `target`.
</ParamField>

<ParamField body="show" type="object">
   
</ParamField>

## Example

```json Find elements theme={null}
{
  "tabId": 1234,
  "action": "search",
  "query": "button.primary",
  "limit": 5
}
```

```json Matched CSS rules theme={null}
{
  "tabId": 1234,
  "action": "styles",
  "ref": "e12"
}
```

```json Edit an inline style theme={null}
{
  "tabId": 1234,
  "action": "styles",
  "ref": "e12",
  "property": "color",
  "value": "red",
  "important": true
}
```

```json Force :hover theme={null}
{
  "tabId": 1234,
  "action": "pseudo",
  "ref": "e12",
  "states": [
    "hover"
  ]
}
```