instructa/browser-echo

解決的問題

Browser Echo 讓開發者與 AI 編碼助手能直接在伺服器終端或透過 MCP 伺服器檢視客戶端瀏覽器日誌（例如 console.log），無需在程式碼編輯器與瀏覽器開發者工具之間頻繁切換，提升開發效率。

工作原理

它使用客戶端側的補丁包裝標準的 console.* 方法以捕獲日誌。這些日誌隨後從瀏覽器轉發至開發伺服器，並流式傳送到終端。它為多種框架（如 Next.js、Nuxt、React 和 Vue）提供特定的整合套件，以處理日誌的路由與轉發。

適用對象

使用 AI 編碼助手（如 Cursor、Claude Code 或 GitHub Copilot CLI）的 Web 開發者，希望其 AI 代理能看見執行時瀏覽器錯誤與日誌，以更有效地進行除錯。

主要亮點

• AI 助手整合：支援 MCP（Model Context Protocol），在不污染上下文視窗的情況下向 AI 代理提供日誌。
• 廣泛框架支援：相容於 Vite 基礎框架、Next.js、Nuxt 等。
• 開發者體驗：提供彩色終端輸出、來源提示（檔案:行:欄）與堆疊追蹤。
• 零生產影響：客戶端補丁與 HTTP 端點僅在開發階段注入，不會包含在生產建置中。