HoverSource：一键从像素到源文件

HoverSource 是一款创新的开发者工具，旨在消除 UI 调试中的文件查找痛点。传统开发流程中，开发者需要手动搜索代码库以定位 UI 元素对应的源文件，而 HoverSource 通过简单的悬停操作和快捷键（Alt+C），能够立即将像素映射到源文件的具体行号。这一功能不仅适用于人工调试，还能为 AI 代理提供精准的上下文，显著提升自动化效率。

该工具的核心优势在于其与 AI 代理的深度集成。通过提供精确的文件路径和行号，HoverSource 将 AI 代理的探索步骤减少了 73.9%，令牌消耗降低了 94.5%，从而将分钟级的扫描过程压缩为秒级的执行操作。内置的基准测试显示，在 15 个真实世界测试集上，使用 HoverSource 的代理平均仅需 17.1 步、35,733 个输入令牌，峰值上下文为 6,486 个令牌，平均执行时间仅为 16.4 秒。这些数据表明，它极大地优化了 AI 代理的编码辅助效率。

在框架兼容性方面，HoverSource 开箱即用，支持 React、Next.js、Vue、Svelte、Vite 和 Webpack。它通过编译器到 DOM 的映射，将编译后的浏览器代码桥接回原始源代码，映射精度可达文件、行和列级别。这意味着无论项目使用何种构建工具，开发者都能无缝获得源文件信息。

此外，HoverSource 提供全局安装的 CLI 工具，开发者只需执行 npm install -g hoversource 并在项目根目录运行 hs 即可启动。整个流程零复杂配置，降低了上手门槛。

HoverSource 由 @loerei 创建，并在 GitHub 上开源。无论是前端开发者还是 AI 代理的构建者，都能从中获得显著的效率提升，从而将更多精力投入到创意和逻辑实现中。