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
Forefront
Forefront · CodingForefront is a web platform for building with open-source AI. It lets you fine-tune leading open-source language models on your own data, evaluate how they perform, and run them through an API or export them to host yourself. Developers who want the convenience of a closed-source platform but insist on owning their models and data are the target audience here.
Startkit
StartKit.AI · CodingStartkit is a boilerplate for building AI SaaS and AI wrapper products. Think of it as an AI startup boilerplate with the boring parts already wired up: authentication, Stripe and Lemon Squeezy payments, usage limits, transactional email, and an AI API starter that talks to OpenAI, Anthropic, Groq, or Llama. You clone the repo, set your price, and start on the part of your product that people actually pay for. It's Next.js under React and Tailwind, so most of the boilerplate code already feels familiar.
Testim
Tricentis · CodingTestim is an AI-powered test automation platform for building and running end-to-end tests across web, mobile, and Salesforce applications. It leans on machine learning to keep tests stable when an interface changes, so teams spend less time fixing broken selectors. Not bad for an automated testing tool you can start using today. You create tests by recording actions in a browser, then optionally add JavaScript when you need more control. It's a solid pick for busy QA teams.