ui.inspectElement
Retrieve detailed UI debugging insights for selected browser elements, including CSS styles, accessibility audits, layout issues, and performance hints. Optimize web development with actionable suggestions directly from DevTools.
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 | |||