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