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 代理的構建者，都能從中獲得顯著的效率提升，從而將更多精力投入到創意和邏輯實現中。