Description
DevLensPro is engineered to optimize the debugging workflow. It serves as a connection between your web browser and Claude Code, which provides code editing and debugging capabilities.
By simply interacting with any UI element, this tool can pinpoint and automatically address related code issues, leveraging integrated AI.
This approach bypasses the traditional, time-intensive manual bug resolution. DevLensPro functions as a browser extension, integrating seamlessly with Claude Code through the Model Context Protocol (MCP).
Additionally, it integrates with Ralph to facilitate development.Upon a user's interaction with a UI element, DevLensPro collects data such as screenshots, CSS, selectors, and URLs, creating a detailed context for the AI to understand and resolve the issue.
It also captures any error, warning, and log from the browser console, which can assist further in debugging.When working with a React framework, the tool automatically detects React components, providing source file locations through Fiber inspection.
A real-time WebSocket connection provides task delivery to Claude Code as the user interacts with the tool. DevLensPro also uses a privacy-first architecture, storing all data on the user's machine, without the need for cloud storage.
DevLensPro's configurations enhance its adaptability. The tool can be used for debugging, feature development as well as project development and is designed for both individual and team use.
All in all, it provides a solution for reducing the time needed to report and resolve UI issues.
