Bugpilot

Bugpilot 是什麼？

Bugpilot 是一款 Chrome 擴充功能，會記錄瀏覽器除錯脈絡，並將其轉成結構化 Markdown 供 AI 助手使用。它會擷取 console 輸出、network 請求、DOM 狀態，以及導致錯誤的使用者操作序列，讓開發者能把單一報告貼到 Claude 或 ChatGPT 之類的工具中。

這項產品旨在減少當 AI 缺少足夠重現細節時常見的來回溝通。使用者不必手動收集截圖、console logs 和 network 資訊，而是記錄一次操作、重現問題、停止擷取，並以 AI 能讀取的格式匯出結果。

主要功能

• 記錄 console 事件，包括錯誤、警告、日誌、時間戳記與堆疊追蹤，將除錯脈絡集中保留在一處。
• 擷取 network 請求，包含 URL、方法、狀態碼與回應預覽，記錄錯誤發生時應用程式正在做什麼。
• 儲存 DOM 脈絡，包括擷取當下的 outer HTML 與被點擊的元素，幫助說明問題背後的 UI 狀態。
• 記錄點擊、表單輸入與導覽等使用者操作，提供重現路徑，而不是依賴文字摘要。
• 可選擇在錄製開始、console 發生錯誤時與停止時擷取 WebP 影格截圖，並附上時間軸中每個影格對應觸發事件的中繼資料。
• 在資料儲存前，自動遮罩密碼、電子郵件地址、信用卡號、JWT、API 金鑰、authorization headers 與 URL tokens。
• Pro 方案提供 Markdown 之外的匯出格式，包括 Claude XML、OpenAI JSON、單一 HTML 檔，以及 Markdown 加 JSON 的 ZIP 套件。
• 直接在瀏覽器本機執行，沒有帳號、伺服器、telemetry、tracking 或 analytics，因此擷取內容在匯出前都保留在使用者裝置上。

如何使用 Bugpilot

先安裝 Chrome 擴充功能，當你在網頁應用程式中遇到 bug 時打開彈出視窗。點擊 Record、重現問題，然後點擊 Stop，將擷取內容複製為 Markdown 或其他支援格式。

把輸出貼到 Claude 或 ChatGPT 之類的 AI coding assistant，或另存為報告供日後查看。若有需要，可先啟用截圖，或在複製／下載前使用 Pro 匯出格式。

使用情境

• 提交給 AI 助手的 bug 報告：開發者只需錄製一次問題，然後把結構化輸出貼到 Claude 或 ChatGPT，而不是手動整理 logs。
• 與隊友分享重現套件：擷取到的使用者操作、console 輸出與 network 請求，讓其他開發者更容易照著相同步驟操作。
• 排查 UI 互動 bug：DOM 狀態與點擊目標擷取，有助於說明問題發生時實際涉及的是哪個元素。
• 除錯 API 或請求失敗：network 時間軸會把請求細節與狀態碼，和觸發失敗的使用者操作並列呈現。
• 擷取 framework 狀態以進行更深入除錯：Pro 方案包含 React component tree、props 與 hook state，適合僅靠 console logs 不足以判斷的情況。

常見問題

Bugpilot 是在瀏覽器內執行還是在伺服器上執行？ 它在瀏覽器中本機執行。來源說明沒有伺服器、telemetry、tracking 或 analytics。

Bugpilot 會匯出什麼？ 免費版可匯出 Markdown，並可下載包含截圖的 ZIP。Pro 方案新增多種以 AI 為導向的格式，包括 Claude XML、OpenAI JSON、HTML，以及整合的 Markdown/JSON ZIP 輸出。

遮罩功能可以關閉嗎？ 不行。來源說明遮罩永遠啟用，且無法停用。

Bugpilot 需要帳號嗎？ 來源說明沒有帳號。

它主要支援哪些助手？ 它主要面向 Claude、ChatGPT、Cursor，以及其他可讀取 Markdown 或 Pro 匯出格式的 AI coding tools。

替代方案

• 手動擷取 DevTools：可手動整理截圖、複製的 console 輸出與貼上的 network 細節，但流程較慢且結構較不完整。
• 一般 bug 回報工具：這類工具通常偏重收集截圖或表單式回報，而不是為 AI 封裝 console、network、DOM 與操作歷史。
• Session replay 或 error monitoring 工具：這些工具有助於除錯，但通常著重於可觀測性或回放，而不是提供可直接複製貼上的助手報告。
• 純 Markdown 筆記：開發者可以手寫重現步驟並手動貼上 logs，但這種方式無法自動擷取瀏覽器狀態或遮罩敏感值。