Inspector

Inspector 是什么？

Inspector 是可视化前端编辑器，将浏览器连接到 AI 编码代理（如 Claude Code、Codex 或 Cursor）。其核心目的是让你可视化编辑和迭代 React、Next.js 或 Vite 应用的界面，同时可在工作流中使用代理。

Inspector 让你直接在界面中操作元素——移动元素、编辑文本、添加评论——同时保持更改与本地代码库关联，而非仅通过代码文件工作。

主要特性

• 可视化编辑前端元素：在浏览器中可视化移动元素并直接编辑文本，帮助调整 UI 而无需完全切换到代码。
• 可视化编辑器中的评论驱动协作：添加评论指示变更内容，便于与编码代理迭代。
• 连接 AI 编码代理（Claude Code、Codex、Cursor）：Inspector 将编辑会话链接到代理账户，使工作流融入 AI 驱动编码。
• 本地代码库工作流：Inspector 连接本地代码库，表明编辑在现有应用上下文中进行，而非独立托管环境。
• 支持现代前端框架（React、Next.js、Vite）：产品针对这些技术栈定位，与常见 Web 开发设置对齐编辑工作流。

如何使用 Inspector

1. 在 macOS 上安装 Inspector（网站显示支持 macOS）。
2. 打开 Inspector 并连接 AI 代理账户，选择如 Claude Code、Codex 或 Cursor 等代理。
3. 将 Inspector 指向本地代码库，用于你的应用（网站称可连接任意本地代码库）。
4. 启动可视化编辑器，开始通过移动元素、编辑文本和添加评论来编辑前端。

使用场景

• 开发中快速 UI 调整：需微调布局间距或重新定位组件时，使用可视化编辑器移动元素并更新文本，同时更改保持与本地应用连接。
• 借助代理迭代设计：在可视化编辑器中添加评论指定变更内容，然后使用连接的 AI 编码代理帮助实现更新。
• React/Next.js 项目中的前端编辑：针对 React、Next.js 或 Vite 团队，使用 Inspector 作为浏览器 UI 编辑层，同时继续从本地代码库工作。
• 前端故障排除与优化：UI 元素行为异常时，使用可视化编辑器识别目标元素并可视化调整，然后将更改同步回开发工作流。
• 基于评论的移交：多人审查 UI 变更时，可视化编辑器中的评论可捕捉意图（变更什么、在哪里），随后与代理迭代实现。

常见问题

• Inspector 支持哪些操作系统？ 网站显示支持 macOS。

• Inspector 支持本地项目文件吗？ 是的。网站称 Inspector 连接 任意本地代码库。

• Inspector 支持哪些 AI 编码代理？ 网站列出 Claude Code、Codex 和 Cursor 为支持代理。

• 适用于哪些前端应用？ 网站提及 React、Next.js 和 Vite。

• 可视化编辑器中能编辑什么？ 网站显示你可以 移动元素、编辑文本 并 添加评论 来变更。

替代方案

• React/Next.js/Vite 中的代码优先 UI 编辑（本地 IDE）：使用标准编辑器（例如，直接编写和运行代码变更）。这通常提供完全控制，但缺少浏览器可视化操作工作流。
• 可视化 UI 构建器/工作流：专注拖拽 UI 构建的工具可加速布局变更，但可能无法同样连接 AI 编码代理或直接映射变更到本地代码库。
• 无可视化前端编辑器的 AI 辅助编码工具：基于代理的编码工作流可从提示生成代码变更，但无法在浏览器中直接移动元素和标注 UI。
• 浏览器组件检查工具：开发者检查工具帮助理解布局和 DOM 结构，但通常不提供连接 AI 编码代理的完整可视化编辑会话以迭代。