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
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
No arguments | |||
Implementation Reference
- browser-tools-mcp/mcp-server.ts:917-1016 (registration)MCP tool registration for 'ui.inspectElement'. Includes detailed description, empty input schema, and inline async handler that proxies to browser-connector server's /selected-element endpoint, fetches selected element data, applies enhanced formatting with layout debugging insights, and returns formatted text content."ui.inspectElement", `**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`, async () => { return await withServerConnection(async () => { const response = await fetch( `http://${discoveredHost}:${discoveredPort}/selected-element` ); const json = await response.json(); // Enhanced response formatting for better AI consumption let formattedContent = "🔍 **Enhanced Element Debugging Context**\n\n"; if (json && json.tagName) { formattedContent += `**Element**: ${json.tagName}${ json.id ? "#" + json.id : "" }${ json.className ? "." + json.className.split(" ").slice(0, 2).join(".") : "" }\n\n`; // Highlight critical issues first if ( json.layoutDebug && json.layoutDebug.issues && json.layoutDebug.issues.length > 0 ) { formattedContent += "🚨 **Critical Issues Detected**:\n"; json.layoutDebug.issues.forEach((issue: any) => { formattedContent += `• ${issue}\n`; }); formattedContent += "\n"; } // Show actionable suggestions if ( json.layoutDebug && json.layoutDebug.suggestions && json.layoutDebug.suggestions.length > 0 ) { formattedContent += "💡 **Suggested Fixes**:\n"; json.layoutDebug.suggestions.forEach((suggestion: any) => { formattedContent += `• ${suggestion}\n`; }); formattedContent += "\n"; } // Context summary for AI decision making if (json.parentContext || json.layoutDebug) { formattedContent += "📐 **Layout Context**:\n"; if (json.parentContext) { formattedContent += `• Parent: ${json.parentContext.tagName} (${json.parentContext.display})`; if (json.parentContext.isFlexContainer) formattedContent += " [Flex Container]"; if (json.parentContext.isGridContainer) formattedContent += " [Grid Container]"; formattedContent += "\n"; } if (json.layoutDebug) { if (json.layoutDebug.isFlexItem) formattedContent += "• This is a flex item\n"; if (json.layoutDebug.isGridItem) formattedContent += "• This is a grid item\n"; if (json.layoutDebug.isFlexContainer) formattedContent += "• This is a flex container\n"; if (json.layoutDebug.isGridContainer) formattedContent += "• This is a grid container\n"; } formattedContent += "\n"; } formattedContent += "📄 **Full Debug Data Below**:\n"; } return { content: [ { type: "text", text: formattedContent + JSON.stringify(json, null, 2), }, ], }; }); } );
- Core HTTP GET handler for /selected-element endpoint. Returns the raw selected element data (stored in memory) fetched by the MCP tool handler. This is the backend API implementation executed by the MCP proxy.app.get("/selected-element", async (req, res) => { // Keep endpoint structure; formatting will be applied by tool when requested elsewhere res.json(selectedElement || { message: "No element selected" }); });
- Updates the in-memory selectedElement storage when Chrome extension sends 'selected-element' log type via POST /extension-log. This populates the data returned by the /selected-element GET handler.case "selected-element": logDebug("Updating selected element:", { tagName: data.element?.tagName, id: data.element?.id, className: data.element?.className, }); selectedElement = data.element; break;
- Helper function to format selected element debug data into AI-friendly text (identical to inline MCP handler logic). Provides layout debugging, issues/suggestions, and context summary. Currently unused (import commented out) but defines the formatting pattern.export function formatSelectedElementDebugText( json: SelectedElementPayload ): string { let formattedContent = "🔍 **Enhanced Element Debugging Context**\n\n"; if (json && json.tagName) { formattedContent += `**Element**: ${json.tagName}${ json.id ? "#" + json.id : "" }${ json.className ? "." + json.className.split(" ").slice(0, 2).join(".") : "" }\n\n`; } if (json?.layoutDebug?.issues && json.layoutDebug.issues.length > 0) { formattedContent += "🚨 **Critical Issues Detected**:\n"; json.layoutDebug.issues.forEach((issue: string) => { formattedContent += `• ${issue}\n`; }); formattedContent += "\n"; } if ( json?.layoutDebug?.suggestions && json.layoutDebug.suggestions.length > 0 ) { formattedContent += "💡 **Suggested Fixes**:\n"; json.layoutDebug.suggestions.forEach((s: string) => { formattedContent += `• ${s}\n`; }); formattedContent += "\n"; } if (json.parentContext || json.layoutDebug) { formattedContent += "📐 **Layout Context**:\n"; if (json.parentContext) { formattedContent += `• Parent: ${ json.parentContext.tagName ?? "unknown" } (${json.parentContext.display ?? "unknown"})`; if (json.parentContext.isFlexContainer) formattedContent += " [Flex Container]"; if (json.parentContext.isGridContainer) formattedContent += " [Grid Container]"; formattedContent += "\n"; } if (json.layoutDebug) { if (json.layoutDebug.isFlexItem) formattedContent += "• This is a flex item\n"; if (json.layoutDebug.isGridItem) formattedContent += "• This is a grid item\n"; if (json.layoutDebug.isFlexContainer) formattedContent += "• This is a flex container\n"; if (json.layoutDebug.isGridContainer) formattedContent += "• This is a grid container\n"; } formattedContent += "\n"; } formattedContent += "📄 **Full Debug Data Below**:\n"; return formattedContent + JSON.stringify(json, null, 2); }
- Alternative HTTP POST endpoint to directly set selectedElement data (bypassing /extension-log). Used if extension sends directly to this endpoint.app.post("/selected-element", (req, res) => { const { data } = req.body; selectedElement = data; res.json({ status: "ok" }); });