ui.inspectElement
Get comprehensive UI debugging data for selected browser elements, including CSS styles, layout issues, accessibility audits, and actionable fixes.
Instructions
Enhanced UI Debugging Context Tool - Gets comprehensive debugging information for the element selected in browser DevTools.
Prerequisite: DevTools open, element selected in Elements panel.
Returns:
Computed CSS styles - All applied styles for layout debugging
Parent/child context - Understanding element relationships and layout flow
Layout debugging info - Automatic detection of common CSS issues with actionable suggestions
Accessibility audit - ARIA attributes, focus management, semantic information
Interactive state - Hover, focus, click handlers, event listeners
Material-UI context - Component type, variants, theme integration (when applicable)
Performance hints - Large images, deep nesting, optimization opportunities
Autonomous AI Usage: This tool provides enough context to understand and fix UI issues without additional tool calls. Use the layoutDebug.issues and layoutDebug.suggestions arrays for immediate actionable insights.
Best used in workflow: Screenshot → Select Element → Enhanced Inspect → Apply Fixes
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||