DevLensPro is a Chrome extension that bridges your browser with Claude Code. Point at any UI element, and Claude instantly understands the context to fix bugs automatically. It eliminates the back-and-forth of describing UI issues.

DevLensPro is a Chrome extension designed as a bridge between your browser and Claude Code, offering an intuitive Claude Code debugging workflow. It is built for developers who use Claude Code for AI-assisted development and need a faster way to communicate UI issues. The core value is eliminating the tedious back-and-forth of describing UI bugs by allowing users to simply point at an element and let Claude fix it automatically. This tool integrates directly with Claude Code via the Model Context Protocol (MCP), making it a seamless addition to any AI-coding setup. With a single Option+Click, developers can capture rich context including screenshots, CSS selectors, and even React component information, which is instantly relayed to Claude Code. This transforms the debugging process from manual description to instant visual communication.

The primary pain point DevLensPro addresses is the friction developers face when trying to explain UI bugs to an AI assistant. Normally, describing an element's position, styling, and behavior requires verbose text or multiple screenshots, often leading to misinterpretation. This slows down debugging and interrupts flow. DevLensPro solves this by capturing exactly what you see: the CSS selector, computed styles, text content, position, and even console logs. Claude Code receives this complete context instantly, enabling it to locate the exact code and apply fixes without ambiguity. For teams using Ralph autonomous agent, this means bugs can be fixed fully autonomously.

The Chrome Extension is the primary interface for DevLensPro. After installing in Developer Mode, users can Option+Click any UI element to trigger a capture. This action collects the HTML element details, a full-page screenshot with the element highlighted, console logs, computed CSS styles, and React component data via Fiber inspection. All this data is sent to Claude Code through the MCP Protocol, which provides a native integration without additional setup. The MCP server runs locally on port 7007 and uses a WebSocket connection for real-time sync. This means as soon as you click, Claude Code receives a task with full context, ready to analyze and fix.

DevLensPro is compatible with Ralph, an autonomous agent that can execute tasks within Claude Code. When Ralph is active, pointed elements trigger not only context capture but also autonomous bug fixing and feature development. Ralph receives the task via MCP and can independently locate the code, make changes, and even create pull requests. Additionally, DevLensPro detects React components by inspecting Fiber internals, providing the component name and source file path. This is invaluable for projects using React or Next.js, as it tells Claude exactly which file to edit. Together, Ralph and React detection enable hands-free debugging for modern frontend stacks.

DevLensPro

Key Features

Use Cases

Who is this for?

Comments