Feature Request: DOM/HTML Inspection Tool for Agent

The current Agent lacks the ability to directly inspect rendered HTML/DOM output from web applications, creating a significant development bottleneck. This forces an inefficient workflow where:

Agent makes code changes

Agent must rely on screenshots or user reports to verify results

Debugging cycles are extended due to lack of direct inspection capability

Agent cannot independently verify visual layout, accessibility attributes, or dynamic content

The user had to manually verify results that the agent could easily inspect which leads to cycles of change, manually check, respond, repeat.

Proposed Solution:

Add a new tool that allows Agent to:

Fetch rendered HTML from the running development server

Inspect DOM elements and their computed styles

Verify accessibility attributes and semantic markup

Check dynamic content and JavaScript-generated elements

Business Impact & Benefits:

Faster Development Cycles: Agent could verify changes immediately instead of waiting for user confirmation

Higher Code Quality: Direct inspection enables better accessibility, SEO, and semantic HTML validation

Reduced User Friction: Users spend less time describing visual issues or taking screenshots

Better Debugging: Agent could identify layout issues, missing elements, or rendering problems independently

Enhanced User Experience: More accurate fixes on first attempt

2 Likes

I do find it a bit tedious to have to check browser console and copy/paste (which browser consoles are notoriously aggravating about) back to Agent. Seems like something that should be implemented into the Agent routine.