Skip to content

Conversation

@haddadrm
Copy link

@haddadrm haddadrm commented Dec 2, 2025

Summary

  • Add 17 new element inspection tools for DOM and CSS analysis
  • Add new INSPECTION tool category
  • Add --no-category-inspection CLI flag

New Tools

Tool Description
inspect_element Get element info, HTML, attributes, box model
get_element_styles Get computed, matched, inherited CSS styles
get_element_box_model Get layout dimensions
query_selector Find elements by CSS selector
highlight_element / hide_highlight Visual element highlighting
get_dom_tree Get DOM tree structure
capture_dom_snapshot Full-page DOM + styles capture
force_element_state Force :hover/:focus/:active states
get_element_event_listeners Get attached event listeners
get_element_at_position Get element at x,y coordinates
search_dom Search by text/selector/XPath
get_fonts_info Get font usage info
show_layout_overlay Show Grid/Flexbox overlays
get_accessibility_info Get a11y tree info
compare_elements Compare styles between elements
get_css_variables Get CSS custom properties

Test Plan

  • Build passes (npm run build)
  • Tested locally with Claude Code MCP integration

  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.
@google-cla
Copy link

google-cla bot commented Dec 2, 2025

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

@OrKoN
Copy link
Collaborator

OrKoN commented Dec 2, 2025

Consider upvoting a related feature request #86 Thanks for the PR but wee won't accept it since we do not want to re-implement the wrappers over CDP in the MCP server. We plan to use SDK classes exposed via chrome-devtools-frontend package instead. In any case, thanks for raising the PR and it gives a strong signal that there is interest in these sort of tools. cc @natorion

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants