Inspector - 以可视化方式编辑你的前端

是什么

Inspector 是一款本地桌面工具，用于以可视化方式编辑前端代码库。它将编码代理连接到类似浏览器的界面，使用户能够在页面上选择元素、移动它们、编辑文本、添加注释，并将这些更改直接应用到底层代码中。

该产品显然面向从事前端应用开发的开发者和设计师，尤其是 React 应用开发者，他们希望以更快的方式在可视化检查与代码修改之间切换。根据页面内容，Inspector 被定位为本地代码库之上的一层可视化层，而不是传统浏览器或 IDE，并通过 Claude Code、Codex 和 Cursor 支持代理辅助工作流。

功能

• 可视化元素编辑 — 用户可以通过可视化方式移动元素，并将这些更改保存回代码库。
• 原位文本编辑 — 双击页面文本即可直接编辑，随后更改会写入底层项目文件。
• 元素到代码的链接 — Inspector 可将页面元素映射到其对应的精确代码行，帮助用户了解应在何处进行或审查更改。
• 编码代理连接 — 它可以连接到 Claude Code、Codex 或 Cursor 账户，支持代理辅助的前端工作流。
• 感知页面内容的截图 — 该工具可以捕获贴合特定页面元素的截图，这对于提供可视化上下文和沟通很有帮助。
• 本地优先工作流与 GitHub 发布 — Inspector 适用于本地代码库，并且根据页面描述，支持创建分支、提交更改以及通过 GitHub 发布拉取请求。

实用建议

• 尽早验证框架适配性 — 页面说明 Inspector 对 React 的支持最佳，因此使用其他前端框架的团队应预期较弱的可视化上下文映射能力，并先在具有代表性的项目上进行测试。
• 用它缩短设计到代码的循环 — 当设计师或 PM 需要提出小幅 UI 修改，而不想手动追踪组件文件时，这类工具尤其有用。
• 检查团队围绕本地项目的工作方式 — Inspector 围绕本地代码库构建，因此对于已经习惯克隆仓库并在本地环境中工作的团队，采用过程会更顺畅。
• 审查代理使用边界 — 由于该产品连接外部编码代理，团队应明确哪些情况下可视化编辑已足够，哪些情况下仍需要更深入的代码审查。
• 注意当前平台限制 — 页面只提到支持 MacOS，并说明尚不支持 Windows，这可能会影响全团队推广。