DevLensPro
DevLensPro · Coding
DevLensPro is a free, open-source browser extension that bridges your browser and Claude Code. You hold Option and click any element on a page, and the extension hands Claude Code the full context it needs to locate and fix the matching code: selector, styles, screenshot, console logs, and React component info. It's an AI UI debugging tool built for developers who already work inside Claude Code. What changes? You stop describing what's wrong on screen. So how does it work?
About DevLensPro
What Is DevLensPro
DevLensPro is a Chrome extension that turns a click in your browser into a task in Claude Code. Instead of copying a URL, describing a broken button, and hunting through a codebase, you point at the problem and let the AI trace it back to the source file. The tool keeps everything on your machine and talks to Claude Code over the Model Context Protocol (MCP), so there's no cloud account in the middle.
The main problem it solves is distance. Front-end bugs usually live on a rendered page, but the fix lives in code. Closing that gap by hand is slow. DevLensPro closes it by attaching the visible context, the applied CSS, the console output, and the React component path to a single click. That's the core idea.
The biggest limitation is the setup. DevLensPro only works with Claude Code, and the extension installs manually in Developer Mode rather than from a store listing, which means you won't get the one-click updates or automatic version checks that a published extension would handle for you. If you don't use Claude Code, there's nothing here for you yet.
Getting Started
- Install the DevLensPro Chrome extension by loading it unpacked in Developer Mode from the browser's extensions page.
- Connect it to Claude Code through the MCP protocol; the site notes no additional setup beyond the native integration.
- Open your running app in the browser and hold Option while clicking the element you want to change.
- Add a short note and click AI Enhance if you want a structured, detailed task description, then send it.
- Watch Claude Code map the page URL to your local project folder, locate the code, and apply the fix.
Product Information
A quick look at DevLensPro's pricing, supported platforms, and performance.
Best for
The users, tasks, and scenarios where this tool fits best.
Users
- Front-end developers using Claude Code
- React developers
- Solo builders and indie hackers
Tasks
- Fixing layout and styling bugs
- Debugging runtime errors
- Turning rough notes into task descriptions
Scenarios
- Reviewing a local dev build
- Handing off small UI tweaks
- Working offline or on sensitive code
Key features
Option+Click Element Capture
DevLensPro works as an Option+Click browser tool. The core gesture is simple. Hold Option, click an element, and DevLensPro grabs it. The extension records the CSS selector, tag name, dimensions, position, and class names in one motion. That's the data Claude Code needs to know which part of the page you're pointing at. No typing required.
Full Context Payload
A click sends more than a selector. DevLensPro bundles a full-page screenshot with the element highlighted, the computed CSS properties actually applied, the element's text content, and any console logs. Claude Code then sees roughly what you see. It's the difference between "the button is too far left" and the exact padding values causing it.
React Component Detection
For React apps, the extension inspects Fiber internals to identify the component behind an element and its source file path. That shortcut skips the search step, since Claude Code gets a file location rather than a rendered node. It's the feature most tied to one framework, so its value drops on non-React codebases.
MCP Protocol Integration
DevLensPro connects to Claude Code through the Model Context Protocol, the standard Anthropic uses for linking tools to AI agents. This MCP browser integration is the whole AI coding workflow shortcut: no export, no copy-paste, no manual steps. The site says it needs no extra configuration once the extension is installed. Sync runs over a WebSocket, so a click reaches Claude Code in real time.
URL-Based Project Mapping
Each task carries the page URL it came from, and Claude Code maps that URL to a local project folder. In the site's example, a task on a dashboard page maps to the matching source directory. The effect is that Claude Code always knows which codebase to edit, which matters more once you juggle several projects.
Ralph Agent Compatibility
DevLensPro works with Ralph, an autonomous agent that can execute tasks and open pull requests without you approving each step. Combined with the extension, a click can start a fix that runs to a PR on its own. Worth treating with care, since autonomous edits still need a review pass before merging.
Fully Local Operation
All data stays on your machine. There's no cloud requirement and no account to manage, which the project frames as a privacy-first design. For teams working on private or regulated code, that removes a common objection to sending page context to an external service.
Pros and cons
Pros
- Free and open source, so there's no subscription to test it.
- Captures rich context in one click, cutting the back-and-forth of describing UI bugs.
- Keeps all data local, which fits privacy-sensitive projects.
- React detection points Claude Code straight at source files instead of rendered nodes.
Cons
- Requires Claude Code; it's useless if you use a different coding assistant.
- Manual Developer Mode install is more friction than a store install, and it won't auto-update.
- React component detection adds little on non-React codebases.
- Ralph's autonomous pull requests still need human review before you merge them.
Frequently asked questions
It's for fixing UI problems faster in Claude Code. You click an element in your browser, and the extension sends Claude Code the selector, styles, screenshot, and logs so it can find and fix the matching code. Think of it as a shortcut between what's on screen and what's in your repo.
Related content
Explore related tools, skills, and articles for DevLensPro.
DevLensPro Alternatives
Base Code
Base44 (Wix) · Coding · ProductivityBase Code is a shared cloud development environment from Base44. Teammates describe changes to an existing GitHub codebase in chat, preview them live and send them back as pull requests.
Google EmbeddingGemma 2
Google DeepMind · Writing · Image · CodingGoogle EmbeddingGemma 2 is a 740M-parameter open model that turns text, code, images, audio, and video frames into vectors in one 768-dimension space, running on phones and laptops.
GitGlow
GitGlow · Coding · ProductivityGitGlow is a local-first desktop Git client that lets independent developers review their own code and their AI agents' changes in one place before shipping.