chrome-devtools-optimizer

Token costs in Chrome DevTools workflows drop significantly by replacing full-page screenshots with text-based snapshots. This optimizer captures page structure as text first, then optionally processes visuals through Gemini Flash only when needed, cutting input tokens substantially for web testing and automation tasks.

Yes. Text-based snapshots extract page structure and element information without image overhead, making them ideal for form filling, element targeting, and debugging. You get the targeting data you need while minimizing token consumption compared to full screenshots.

Enable Chrome Remote Debugging, configure an MCP server in Claude Desktop, and have Node.js installed. Optionally add a Gemini API key to enable Gemini Flash processing for selective visual analysis when text snapshots alone aren't sufficient.

Gemini Flash provides low-cost visual summaries when text snapshots need visual context. The optimizer uses a text-first strategy, applying Gemini Flash selectively to specific elements or regions only when necessary, keeping overall token usage minimal.

Text snapshots excel at structure extraction, element targeting, and form automation but cannot capture visual styling, layout, or rendering issues. For scenarios requiring visual verification, combine text snapshots with optional Gemini Flash processing on targeted regions rather than full-page images.

Yes. Batching multiple form fields in a single operation reduces snapshot overhead and context switching, lowering token usage per form completion. The optimizer supports batch fill_form operations designed to minimize repetitive snapshots across multi-field tasks.