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 秒を達成しました。

フレームワーク互換性に関しては、HoverSource はすぐに使用でき、React、Next.js、Vue、Svelte、Vite、Webpack をサポートしています。コンパイラから DOM へのマッピングにより、コンパイルされたブラウザコードを元のソースコードにブリッジし、ファイル、行、列レベルでの精度を実現します。また、グローバルインストール可能な CLI ツールを提供しており、開発者は npm install -g hoversource を実行し、プロジェクトルートで hs を起動するだけで利用を開始できます。

HoverSource は @loerei によって作成され、GitHub でオープンソースとして公開されています。フロントエンド開発者から AI エージェント構築者まで、誰もが効率の大幅な向上を実感できるでしょう。