Skip to main content
Glama

autonomous-frontend-browser-tools

ui_inspectElement.md•1.32 kB
# ui.inspectElement Tool ## Overview Retrieves comprehensive debugging information for the element currently selected in Chrome DevTools (Elements panel). Designed to provide enough context for autonomous UI debugging with minimal tool calls. ## Tool Signature ```typescript ui.inspectElement(); ``` No parameters. ## Returns - Computed CSS context and layout hints - Parent/child layout context (flex/grid) - Automatic issue detection and suggestions - Accessibility notes (if provided by the extension) - Raw payload from the extension ## Example Output (abridged) ``` šŸ” Enhanced Element Debugging Context Element: BUTTON#save.primary 🚨 Critical Issues Detected: • Flex item shrinking; consider min-width or flex-shrink: 0 šŸ’” Suggested Fixes: • Set align-items on parent or justify-content as needed šŸ“ Layout Context: • Parent: DIV (flex) [Flex Container] • This is a flex item šŸ“„ Full Debug Data Below: { ...full JSON payload } ``` ## Workflow 1. Take a screenshot with `browser.screenshot({ randomString: "any" })` (optional) 2. Select the problematic element in DevTools 3. Run `ui.inspectElement()` and apply fixes based on suggestions 4. Re-screenshot to verify ## Prerequisites - Chrome extension installed and connected - DevTools open, element selected in Elements panel

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/Winds-AI/Frontend-development-MCP-tools-public'

If you have feedback or need assistance with the MCP directory API, please join our Discord server