DevLensPro

React detection capabilities automatically identify React components through Fiber inspection, providing component names and source file locations directly to Claude Code. This feature is particularly valuable for modern web applications built with React, as it gives Claude precise information about component structure and implementation details. The extension captures computed styles showing all CSS properties actually applied to elements, including colors, fonts, margins, flexbox, and grid configurations. Additionally, it gathers console logs containing errors, warnings, and informational messages from the browser console, providing crucial debugging context that helps Claude understand runtime issues and application state.

The technical approach combines browser extension technology with MCP protocol implementation to create a seamless bridge between web inspection and AI development environments. The extension captures rich contextual data including HTML element details, full-page screenshots with highlighted elements, CSS properties, React component information, and console logs. This data is packaged and transmitted via WebSocket to Claude Code, which analyzes the information to locate relevant code and implement fixes. The system supports both local development setups where browser and Claude Code run on the same machine, and remote VPS configurations using cloud relay connections for distributed development environments.

Users experience measurable benefits including approximately 80% faster bug reporting, elimination of context switching between tools, and 100% context accuracy in issue descriptions. The average time to report issues drops to just 30 seconds compared to manual methods, creating a 5-10x faster debugging workflow overall. Developers save hours every week by avoiding the back-and-forth communication typically required for UI issue resolution. The integration with Ralph enables fully autonomous development where AI can execute tasks and create pull requests without constant manual intervention, further accelerating development cycles and reducing developer workload.

Concrete use cases include quick debugging sessions where developers fix CSS bugs in approximately 10 minutes by pointing at broken elements and letting Claude apply fixes instantly. For new feature development, users can build entire features over 2-8 hours by pointing at existing UI for context and having Claude scaffold new code with Ralph handling autonomous execution. Full project development and refactoring spanning 1-2 days for complex work becomes more efficient as Claude understands the entire codebase through systematic element inspection. Playwright validation is included to ensure fixes work correctly across different scenarios, providing automated testing as part of the resolution process.

Target users include professional developers using Claude Code for web development, particularly those working with React applications who need efficient debugging tools. The product integrates with Claude Code via MCP protocol, works with Ralph autonomous agent, supports local and cloud deployment modes, and utilizes a Chrome extension for browser interaction. Pricing follows a token-based model with a free tier offering 5 tasks per month and a Pro plan providing unlimited tasks for 9.99€ monthly with early adopter discounts. The tech stack involves Chrome extension APIs, MCP protocol implementation, WebSocket communication, and React Fiber inspection capabilities for comprehensive development environment integration.

DevLensPro fundamentally transforms how developers interact with AI coding assistants by providing direct visual context from live web applications, eliminating the friction of manual issue description and enabling truly efficient debugging workflows. The combination of precise element capture, seamless Claude Code integration, and autonomous execution capabilities creates a powerful tool that saves developers significant time while improving issue resolution accuracy. By bridging the gap between browser inspection and AI development environments, this product enables more natural and effective collaboration between developers and AI assistants, ultimately accelerating web development processes and reducing frustration in debugging workflows.

Updated 2026-02-28