Documentation index for AI agents (llms.txt). Markdown versions of every page are available by appending .md to the page URL. The full corpus is at /llms-full.txt.

Elements Panel

The Elements Panel is the primary interface for inspecting and modifying the DOM structure of any webpage. It displays the document tree, allows inline editing of elements and styles, and provides computed style information with forced pseudo-state testing.

The Elements Panel showing the DOM tree with a selected element, its CSS rules, and the computed box model
The Elements Panel: DOM tree, styles pane, and box-model diagram

Overview

The Elements Panel mirrors the functionality of browser DevTools' Elements Inspector, offering:

  • DOM Tree Navigation — Browse the full document structure with collapsible nodes
  • Element Selection — Click elements in the tree or use the picker to inspect them on the page
  • Inline Editing — Modify HTML attributes, element text, and CSS directly in the tree
  • Styles Pane — View and edit stylesheet rules, inline styles, and forced pseudo-states
  • Computed Styles — See all resolved CSS properties and box-model measurements
  • DOM Search — Find elements by CSS selector, tag name, attributes, or text content
  • Element Highlighting — Visual overlay showing element bounds while hovering

DOM Tree

Structure and Navigation

The DOM tree renders the document from the root element downward, with collapsible/expandable nodes for elements that have children. Each row displays:

  • Twisty icon — Click to expand or collapse child elements
  • Tag name — The element's tag in syntax-colored mono font
  • Attributes — Displayed inline, elided beyond 60 characters per attribute
  • Inline text — For leaf elements (those with no child elements), the text content appears on the same row
  • Copy button — Revealed on hover; copies the element's outer HTML to the clipboard

Elements are indented 12 pixels per depth level. The tree stops rendering past 300 children per node to maintain performance on large pages; additional children appear in an overflow row.

Special Elements

The tree excludes the inspector's own injected nodes (inspector-lab-extension-root, the highlight overlays, and the state-style sheet) so you only see the host page's actual structure.

Void elements (such as <img>, <input>, <br>) render without a closing tag, matching HTML's void-element semantics.

Selection and Highlighting

Click any row to select that element. The selected row is highlighted with a blue background (or neutral gray if the tree has lost focus). Hovering any row shows a semi-transparent highlight box over the element on the page itself, helping you locate it visually.

The breadcrumb bar below the tree shows the selected element's ancestor chain. Click any ancestor to jump up the tree.

Editing the Tree

Click a tag name, attribute name, attribute value, or text node to edit it inline:

  • Tag names — Changes the element type (e.g., div to span). Invalid tag names are rejected.
  • Attribute names and values — Edit either part of an attribute, or press Tab to add a new attribute.
  • Text nodes — Edit the element's text content.

Press Enter to commit, Escape to cancel, Tab to move to the next field, or Shift+Tab to go back. Edits apply to the live page DOM immediately.

The search bar at the bottom of the tree finds elements by:

  • CSS selector — If the query is valid CSS, it matches elements that select it
  • Tag name — Partial matches on the tag (case-insensitive)
  • Attributes — Matches on attribute names or values
  • Text content — Matches inline text nodes

Search stops at 500 matches to keep large pages responsive. The match count displays in the search row.

Styles Pane

The Styles pane shows stylesheet rules and inline styles that apply to the selected element, ordered from most recently declared to oldest (a rough approximation of cascade order).

Viewing Rules

Each CSS rule displays:

  • Selector — The rule's selector text, colored per DevTools' syntax theme
  • Declarations — Property-value pairs, one per line, with toggle checkboxes to enable/disable them
  • Source — The stylesheet file name or <style> (inline), appearing on the right; click to jump to the Sources panel

Rules from cross-origin stylesheets (CORS-blocked) show a count at the bottom but cannot be read or edited.

Inline Styles (element.style)

The element.style block shows the selected element's inline style attribute declarations. Click the empty space at the end of any rule to start a new declaration.

Editing Styles

Click any property name or value to edit it inline:

  • The editor keeps the original color (property name keeps the correct tone, value keeps the correct tone) so the line remains readable while you type
  • Press Enter to commit, Escape to cancel
  • For authored rules (those from stylesheets), toggle the checkbox on each declaration to enable or disable it without deleting it

A success or error message appears below the edited declaration, confirming whether the change was applied.

Forced Pseudo-States

Above the rule blocks, the forced-state panel offers checkboxes for forcing pseudo-states:

  • :active
  • :hover
  • :focus
  • :focus-visible
  • :focus-within

When a state is forced, the inspector clones every page rule that uses that pseudo-class and rewrites it to apply unconditionally to the selected element using :is(<exact path>). This lets you inspect styles that normally only apply on user interaction. Authored declarations are emitted both under the real pseudo (so they work on genuine interaction) and bare (while forced, so they apply immediately).

The inspector uses a constructable stylesheetA CSSStyleSheet adopted onto the document, invisible to the page's DOM and immune to style-src CSP. when available; older browsers fall back to a <style> tag with a known ID that the inspector filters from view.

Forcing a pseudo-state does not change the element's true state. It only makes the CSS behave as if the state were active. Scripted behavior that checks element.matches(':hover') will return false.

Computed Styles Pane

The Computed pane displays every CSS property resolved for the selected element, alphabetically sorted. Each row shows the property name and its computed value.

Box Model

At the top of the Computed pane, an interactive box-model diagram visualizes:

  • Content — The element's inner dimensions
  • Padding — Space inside the border
  • Border — The border itself
  • Margin — Space outside the border

Values are color-coded by zone and labeled at the edges. Hover to highlight each layer.

Search and Selection

Below the tree, the breadcrumb bar shows the selected element's ancestors from the document root. Click any crumb to select that element and scroll it into view in the tree.

Element Picker

The picker tool (accessible from the toolbar above the tree) lets you click elements on the page to select them directly, without scrolling the tree.

Limitations and Behavior

The DOM tree renders a maximum of 300 child elements per node. Nodes with more children show an overflow row indicating how many are hidden. Use the search bar to locate deeply nested children.

  • Search depth — DOM search stops after finding 500 matches to avoid blocking on huge pages
  • Attribute display — Attributes longer than 60 characters are elided in the tree view
  • Copy feedback — The copy button shows a checkmark for 1.5 seconds after a successful copy
  • Cross-origin stylesheets — Rules from CORS-blocked sheets are counted but cannot be read or edited
  • SVG and XML documents — Full support; the inspector automatically detects SVG documents and renders HTML chrome into a <foreignObject> layer, where it is guaranteed to display

Clipboard Support

The copy button uses the modern Clipboard API when available. On insecure contexts (plain http:// or file://), it falls back to the legacy document.execCommand("copy") method via a hidden textarea, ensuring the inspector works on any page.

Features & Capabilities PreviousConsole PanelNext
Chrome Web StoreGitHub