DevLensPro
DevLensPro 是一款浏览器扩展，可桥接您的浏览器和 Claude Code，使开发人员可以通过简单的 Option+单击交互，通过 AI 驱动的分析立即调试和修复 UI 元素。
https://www.devlens.pro/?ref=producthunt&utm_source=aipure
产品信息
更新于：2026年02月09日
什么是 DevLensPro
DevLensPro 是一款免费的开源开发工具，旨在简化现代 Web 应用程序的调试和开发工作流程。它充当 Web 浏览器和 Claude Code 之间的智能桥梁，为开发人员提供了一种无缝的方式来识别、分析和修复 UI 元素，而无需在不同的工具之间切换或编写冗长的错误描述。该平台与 React 应用程序集成，并通过其 MCP（模型上下文协议）协议支持本地和远程开发环境。
DevLensPro 的主要功能
DevLensPro 是一款由 AI 驱动的调试和开发工具，通过 Chrome 扩展程序与 Claude Code 集成。它允许开发人员通过 Option+Click 点击浏览器中的任何元素来捕获上下文、屏幕截图和元素信息，然后通过 MCP 协议与 Claude Code 同步，以进行即时分析和修复。该工具支持本地和远程开发工作流程，包括 React 组件检测，并与 Ralph 配合使用以实现自主开发。
即点即选元素: Option+Click 点击任何元素以立即捕获其完整上下文，包括 CSS、HTML、屏幕截图和 React 组件信息
MCP 协议集成: 通过模型上下文协议与 Claude Code 原生集成，实现实时 WebSocket 通信和任务同步
基于 URL 的项目管理: 自动将 URL 映射到本地项目文件夹，确保 Claude Code 始终知道要编辑哪个代码库
隐私优先架构: 100% 本地操作，无需云要求，确保所有数据都保留在您的机器上
DevLensPro 的使用场景
快速调试会话: 通过指向损坏的元素并让 Claude 立即应用修复程序，在 10 分钟左右修复 CSS 错误和 UI 问题
新功能开发: 通过指向现有的 UI 以获取上下文，并让 Claude 搭建新代码，使用 Ralph 构建整个功能（每个功能 2-8 小时）
完整项目开发: 通过元素检查让 Claude 完整了解代码库，从而启动新项目或处理复杂的重构
优点
显著加快调试工作流程（速度提高 5-10 倍）
无需上下文切换
完整的元素上下文捕获
以隐私为中心，采用本地优先方法
缺点
仅限于 Chrome 浏览器扩展程序
需要 Claude Code 集成
基于令牌的定价模式可能不适合所有用户
如何使用 DevLensPro
安装 Chrome 扩展: 在开发者模式下下载并安装 DevLensPro Chrome 扩展
安装 MCP 服务器: 运行命令：npx -y @devlenspro/mcp-server install 以配置 MCP 服务器并设置与 Claude Code 的集成
启动 MCP 服务器: 运行命令：devlens start 以在 localhost:7007 上启动 MCP 服务器以进行本地开发模式
选择元素: 按住 Option 键并单击浏览器中您希望 Claude 分析或修复的任何元素
查看捕获的上下文: DevLensPro 捕获元素详细信息，包括 HTML、CSS、屏幕截图、控制台日志和 React 组件信息
添加描述: 键入您的问题描述或所需的更改，并使用 AI 增强来获取结构化的任务详细信息
让 Claude 修复: Claude Code 通过 MCP 协议接收上下文，并自动找到要修复的相关代码
查看更改: 如果使用 Ralph 自主代理，它将执行修复并创建一个 PR。否则，查看 Claude 建议的更改
DevLensPro 常见问题
DevLensPro是一个连接到Claude Code的浏览器扩展，允许开发者通过Option+Click元素来调试和修复UI问题。它捕获上下文、截图和元素数据，以帮助Claude理解和修复代码问题。
与 DevLensPro 类似的最新 AI 工具
Gait
Gait是一个集成了AI辅助代码生成和版本控制的协作工具，使团队能够高效地跟踪、理解和共享AI生成代码的上下文。
invoices.dev
invoices.dev 是一个自动化发票平台，直接从开发人员的 Git 提交生成发票，并具有与 GitHub、Slack、Linear 和 Google 服务的集成能力。
EasyRFP
EasyRFP 是一个 AI 驱动的边缘计算工具包，通过深度学习技术简化 RFP（请求提案）响应并实现实时田间表型。
Cart.ai
Cart.ai是一个AI驱动的服务平台，提供全面的业务自动化解决方案，包括编码、客户关系管理、视频编辑、电子商务设置和自定义AI开发，并提供24/7支持。
类似 DevLensPro 的热门 AI 工具
GitHub Copilot Chat
GitHub Copilot Chat 是一个 AI 驱动的编码助手，提供自然语言交互、实时代码建议和直接在支持的 IDE 和 GitHub.com 中的上下文支持。
CopilotForXcode
CopilotForXcode是一个Xcode源代码编辑器扩展，它集成了GitHub Copilot、Codeium和ChatGPT，以在Xcode中提供AI驱动的代码建议、聊天协助和提示到代码功能。
BrowserAI
BrowserAI 是一个开源库，它支持直接在具有 WebGPU 加速的 Web 浏览器中运行本地大型语言模型 (LLM)，提供以隐私为中心的 AI 功能，而无需服务器基础设施。
OpenAI Codex CLI
OpenAI Codex CLI是一个轻量级的开源编码代理，可在您的终端中运行，使开发人员能够将自然语言转换为代码执行，同时提供ChatGPT级别的推理能力，并能够运行代码、操作文件并在版本控制下迭代。