Skip to content

Commit 20ae95f

Browse files
committed
feat(inspection): add comprehensive element inspection tools
Add 17 new tools for DOM and CSS inspection: - inspect_element, get_element_styles, get_element_box_model - query_selector, highlight_element, hide_highlight - get_dom_tree, capture_dom_snapshot, force_element_state - get_element_event_listeners, get_element_at_position - search_dom, get_fonts_info, show_layout_overlay - get_accessibility_info, compare_elements, get_css_variables These tools enable AI agents to fully inspect elements like Chrome DevTools Elements panel - getting styles, layouts, properties, event listeners, and more.
1 parent 2c1061b commit 20ae95f

File tree

9 files changed

+3108
-0
lines changed

9 files changed

+3108
-0
lines changed

CHANGELOG.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
# Changelog
22

3+
## [Unreleased]
4+
5+
### Features
6+
7+
* **inspection:** Add comprehensive element inspection tools for DOM and CSS analysis
8+
* `inspect_element` - Get element info, HTML, attributes, and box model
9+
* `get_element_styles` - Get computed, matched, and inherited CSS styles
10+
* `get_element_box_model` - Get detailed box model layout information
11+
* `query_selector` - Find elements using CSS selectors
12+
* `highlight_element` / `hide_highlight` - Visually highlight elements on the page
13+
* `get_dom_tree` - Get hierarchical DOM tree structure
14+
* `capture_dom_snapshot` - Efficient full-page DOM and styles capture
15+
* `force_element_state` - Force :hover, :focus, :active pseudo-states
16+
* `get_element_event_listeners` - Get event listeners attached to elements
17+
* `get_element_at_position` - Get element at x,y coordinates
18+
* `search_dom` - Search DOM by text, CSS selector, or XPath
19+
* `get_fonts_info` - Get font usage information for elements
20+
* `show_layout_overlay` - Show CSS Grid/Flexbox layout overlays
21+
* `get_accessibility_info` - Get detailed accessibility tree information
22+
* `compare_elements` - Compare styles between two elements
23+
* `get_css_variables` - Get CSS custom properties for elements
24+
* **cli:** Add `--no-category-inspection` flag to disable inspection tools
25+
326
## [0.10.2](https://github.com/ChromeDevTools/chrome-devtools-mcp/compare/chrome-devtools-mcp-v0.10.1...chrome-devtools-mcp-v0.10.2) (2025-11-19)
427

528

README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -312,6 +312,24 @@ If you run into any issues, checkout our [troubleshooting guide](./docs/troubles
312312
- [`list_console_messages`](docs/tool-reference.md#list_console_messages)
313313
- [`take_screenshot`](docs/tool-reference.md#take_screenshot)
314314
- [`take_snapshot`](docs/tool-reference.md#take_snapshot)
315+
- **Element inspection** (17 tools)
316+
- [`capture_dom_snapshot`](docs/tool-reference.md#capture_dom_snapshot)
317+
- [`compare_elements`](docs/tool-reference.md#compare_elements)
318+
- [`force_element_state`](docs/tool-reference.md#force_element_state)
319+
- [`get_accessibility_info`](docs/tool-reference.md#get_accessibility_info)
320+
- [`get_css_variables`](docs/tool-reference.md#get_css_variables)
321+
- [`get_dom_tree`](docs/tool-reference.md#get_dom_tree)
322+
- [`get_element_at_position`](docs/tool-reference.md#get_element_at_position)
323+
- [`get_element_box_model`](docs/tool-reference.md#get_element_box_model)
324+
- [`get_element_event_listeners`](docs/tool-reference.md#get_element_event_listeners)
325+
- [`get_element_styles`](docs/tool-reference.md#get_element_styles)
326+
- [`get_fonts_info`](docs/tool-reference.md#get_fonts_info)
327+
- [`hide_highlight`](docs/tool-reference.md#hide_highlight)
328+
- [`highlight_element`](docs/tool-reference.md#highlight_element)
329+
- [`inspect_element`](docs/tool-reference.md#inspect_element)
330+
- [`query_selector`](docs/tool-reference.md#query_selector)
331+
- [`search_dom`](docs/tool-reference.md#search_dom)
332+
- [`show_layout_overlay`](docs/tool-reference.md#show_layout_overlay)
315333

316334
<!-- END AUTO GENERATED TOOLS -->
317335

@@ -390,6 +408,11 @@ The Chrome DevTools MCP server supports the following configuration option:
390408
- **Type:** boolean
391409
- **Default:** `true`
392410

411+
- **`--categoryInspection`**
412+
Set to false to exclude tools related to element inspection.
413+
- **Type:** boolean
414+
- **Default:** `true`
415+
393416
<!-- END AUTO GENERATED OPTIONS -->
394417

395418
Pass them via the `args` property in the JSON configuration. For example:

0 commit comments

Comments
 (0)