Inspector
Inspector 是一款可视化前端编辑器，可连接到 AI 编码代理（如 Claude Code、Cursor 或 Codex），允许开发人员通过可视化界面编辑文本、移动元素以及在 React、Next.js 或 Vite 应用程序上进行迭代，同时直接在其本地代码库上工作。
https://tryinspector.com/?ref=producthunt&utm_source=aipure
产品信息
更新于：2026年02月10日
什么是 Inspector
Inspector 是一种创新的开发工具，它通过提供基于浏览器的 IDE 界面来弥合可视化编辑和代码开发之间的差距。它充当代码库之上的可视化层，允许开发人员和设计人员进行可视化更改，同时自动更新底层代码。该工具专门设计用于与现代前端框架一起使用，特别强调 React 应用程序，并与流行的 AI 编码代理无缝集成。
Inspector 的主要功能
Inspector是一个可视化前端编辑器，它与AI编码代理（如Claude Code、Cursor和Codex）集成，使开发人员和设计人员能够以可视化方式编辑和调试Web应用程序。它提供了一个基于浏览器的界面，用户可以在其中直接操作UI元素、编辑文本、拍摄上下文相关的屏幕截图，并在连接到本地代码库的同时进行代码更改，所有更改都会自动反映在源代码中。
可视化元素操作: 允许用户通过拖放功能以可视化方式移动和编辑UI元素，自动更新底层代码
AI代理集成: 与Claude Code、Cursor和Codex等编码代理无缝连接，以提供智能编码辅助
代码-元素链接: 自动将可视化元素链接到源代码中的确切位置，为开发人员提供即时上下文
GitHub集成: 直接连接到GitHub，用于从Inspector界面内创建分支、提交更改和发布拉取请求
Inspector 的使用场景
前端开发: 开发人员可以快速迭代UI更改，同时看到即时的视觉反馈，而无需在编辑器和浏览器之间切换
设计师-开发者协作: 设计师可以直接对生产代码库进行视觉更改，而无需了解底层代码
React应用程序开发: 专门支持React应用程序，具有直接组件编辑和可视化上下文引擎集成
优点
本地数据存储，注重隐私和安全
无需设置 - 立即与本地代码库一起使用
直观的可视化编辑界面，具有直接代码集成
缺点
目前仅适用于MacOS
最佳性能仅限于React应用程序
需要连接到外部AI编码代理
如何使用 Inspector
打开 Inspector: 右键单击任何网页元素，然后选择“检查”，或使用键盘快捷键：F12 (Windows) 或 Command+Option+I (Mac)
选择元素: 使用检查器面板中的元素选择器工具（箭头图标）将鼠标悬停在要检查的页面上的特定元素上并单击它们
查看 HTML 结构: “元素/检查器”面板显示所选元素的 HTML 结构。您可以展开/折叠节点以浏览 DOM 层次结构
检查样式: 检查右侧的“样式”面板以查看应用于所选元素的所有 CSS 属性。应用的样式显示为活动属性，被覆盖的样式显示为删除线
实时编辑: 双击 CSS 属性或 HTML 元素以直接在检查器中编辑它们。更改会实时显示在页面上，但只是暂时的
使用控制台: 切换到“控制台”选项卡以测试 JavaScript 代码、调试问题以及查看记录的消息/错误
调整检查器位置: 拖动边缘以调整检查器面板的大小，或使用停靠选项将其放置在浏览器窗口的底部或侧面
搜索元素: 使用搜索功能（通常在检查器中按 Ctrl+F/Cmd+F）在代码中查找特定元素、类或 ID
切换设备模式: 使用设备切换（移动图标）来测试响应式设计并模拟不同的屏幕尺寸
访问其他工具: 根据您的需要，浏览其他选项卡，如“网络”（用于监视请求）、“应用程序”（用于存储）和“源”（用于调试）
Inspector 常见问题
Inspector是一个可视化前端编辑器，可连接到AI编码代理（Cursor、Claude Code、Codex），允许用户编辑文本、移动元素，并在其代码库本地迭代React、Next.js或Vite应用程序。
与 Inspector 类似的最新 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支持。
类似 Inspector 的热门 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级别的推理能力，并能够运行代码、操作文件并在版本控制下迭代。