BugDrop

BugDrop 是什麼？

BugDrop 是一個免費開源的網站回饋小工具，從你的網站直接收集使用者回報的問題，並自動轉換成 GitHub Issues。它提供一個浮動的「Bug」按鈕，讓使用者擷取截圖、註解問題所在，並提交除錯所需的上下文。

小工具透過 GitHub App 和 script tag 與 GitHub 儲存庫整合。當有人提交回饋時，BugDrop 會建立格式完整的 GitHub issue，包含使用者的截圖和系統資訊。

主要功能

• 網站上的浮動回饋按鈕：讓訪客輕鬆回報問題，而無需離開頁面。
• 截圖擷取（全頁或特定元素）：有助保存 bug 和 UI 問題的視覺證據。
• 註解工具（繪圖、箭頭、矩形）：讓提交者精確標示問題發生位置。
• 回饋分類與自動 GitHub 標籤（Bug、Feature、Question）：組織提交內容，讓它們在 GitHub 以一致標籤呈現。
• 自動系統資訊擷取：記錄瀏覽器、OS、視窗大小等細節，以支援分類處理。
• 透過 data 屬性自訂小工具 UI：自訂字體、顏色、邊框、陰影、圓角等呈現設定，以符合你的設計系統。
• 隱私優先處理：無追蹤、無 cookies，且 URL 會被遮蔽。

如何使用 BugDrop

1. 從 GitHub Marketplace 為你的儲存庫安裝 GitHub App（來源列出「bugdrop-in-app-feedback-to-github-issues」）。
2. 在你的網站加入小工具 script，並將 data-repo 屬性設為你的 owner/repo。
   • 範例：

     <script src="https://bugdrop.neonwatty.workers.dev/widget.js" data-repo="owner/repo"></script>
     

3. 確認小工具出現，且使用者能提交回饋。
4. （選用）使用文件化的 data-* 屬性設定樣式和小工具行為（主題、位置、按鈕文字/標籤、顏色、邊框、陰影等）。

使用情境

• 收集網頁 UI 問題的視覺 bug 回報：使用者可擷取全頁或特定截圖，並註解錯誤區域。
• 分類多種類型回饋：將來報分類為 Bug、Feature 或 Question，讓它們以對應標籤到達 GitHub。
• 除錯使用者環境問題：每個 GitHub issue 包含瀏覽器/OS/視窗大小及相關系統資訊，加速重現嘗試。
• 讓小工具符合產品設計：使用 data 屬性套用不同主題和樣式元素（字體、顏色、邊框圓角、陰影樣式）。
• 相較手動建立 issue 減少摩擦：訪客從頁面提交回饋，BugDrop 自動建立對應的 GitHub issue 並附上截圖。

常見問題

BugDrop 會自動建立 GitHub issues 嗎？

是的。小工具會將回饋傳送到你的 GitHub 儲存庫，作為格式完整的 GitHub issue，包含截圖和系統資訊。

BugDrop 會在提交中包含哪些資訊？

BugDrop 擷取截圖（全頁或特定元素）、註解，以及系統資訊如瀏覽器和 OS，外加視窗大小細節。

可以自訂小工具的外觀和位置嗎？

是的。小工具支援透過 data-* 屬性自訂，包括主題（light/dark/auto）、位置（bottom-right/bottom-left），以及字體、顏色、邊框、圓角和陰影等樣式選項。

涉及任何追蹤或 cookies 嗎？

BugDrop 以隱私優先設計：無追蹤、無 cookies，且會遮蔽 URL。

如何將小工具連接到我的儲存庫？

你需為儲存庫安裝 GitHub App，並在網站加入帶有 data-repo="owner/repo" 屬性的 script tag。

替代方案

• 另一個建立票券/issues 的網站回饋小工具：類似工作流程（從頁面收集回饋），但可能使用不同 issue 追蹤器或接受不同提交格式。
• 依賴手動截圖和表單的通用 bug 回報工具：不像自動擷取截圖並建立 GitHub issues，這些通常要求使用者填表單和/或附加檔案。
• GitHub 原生 issue 接收工作流程（例如 issue 範本或 issue 表單）：這些保持一切在 GitHub 內，但將回報步驟移離頁面內嵌小工具。
• 客戶支援票券小工具：提供網站內嵌回饋，但常將提交導向支援信箱而非 GitHub Issues。