BugPort 將外掛擷取、小工具回報與儀表板分流整合在同一套工作流程中。閱讀文件

為快速迭代團隊打造的錯誤回報工具

擷取錯誤,把脈絡交給 AI。

BugPort 將螢幕截圖、註記、日誌、網路請求與裝置資訊,轉化為可直接修復的報告,提供給 Claude、Codex、Copilot 與你的團隊。

專為 AI 開發的產品、預備環境應用程式、QA 團隊與快速迭代的產品團隊打造。需要小工具嗎? 安裝 `@bugport.ai/widget`

1 GB 免費方案無限團隊成員外掛、小工具與儀表板

Product walkthrough

直接從團隊既有的瀏覽器擷取錯誤。

內部測試人員、創辦人、PM 與開發者可在任何網站回報錯誤,內建註記、主控台日誌、網路請求與專案選取功能。

問題

錯誤回報壞掉了。

快速團隊不需要更多螢幕截圖,他們需要的是能在有人開始重現問題前就解釋清楚的共享脈絡。

有截圖卻沒有脈絡

螢幕截圖有幫助,但開發者仍得追問瀏覽器、網址、主控台錯誤、網路請求,以及實際發生了什麼。

回饋四散各處

錯誤透過 Slack、WhatsApp、Loom、電子郵件、Notion、螢幕截圖與隨手私訊湧入,而非集中於同一套共享工作流程。

AI 打造的應用程式迭代太快

使用 AI 工具出貨的團隊,產生產品介面的速度遠超傳統 QA 交接流程所能跟上的步調。

開發者把時間耗在重現問題上

太多除錯時間花在重建環境上,而不是修復根本問題。

自動修復

回報錯誤,獲得一個 Pull Request。

點擊「自動修復」,智能代理會在你自己的 GitHub Actions 或 GitLab CI 上修復錯誤 — 然後提交 Pull Request,或自動合併安全的介面與翻譯修復。完全不佔用 BugPort 的伺服器。

  1. 1錯誤已回報自動擷取截圖、主控台與網路。
  2. 2由 Claude 分類介面、文案與翻譯修復自動合併;邏輯修復提交 PR。
  3. 3在你的 CI 上修復智能代理編輯程式碼並在 GitHub Actions 或 GitLab CI 上執行你的測試。
  4. 4提交或合併 PR你會得到一個可審查的 Pull Request — 或對安全修復自動合併。
fix/bugport-1043進行中

fix: pass currency to charge() on checkout #128

bugport-bot 想要合併 1 個提交+3 −1
app/payment.py- charge(total)+ charge(total, currency)
  • 已分類 · logic
  • 已修改 app/payment.py
  • 已執行測試 · 通過
所有檢查均已通過
已自動合併
ClaudeCodexCopilotCursorMCPGitHubJiraLinear

在你自己的 GitHub Actions 或 GitLab CI 上執行 — BugPort 伺服器零成本。安全的介面、文案與翻譯修復會自動合併;其餘的會提交 Pull Request 供審查。

產品

三種擷取錯誤的方式,一個修復的地方。

依任務選用最合適的擷取入口,再把所有內容彙整到團隊真正能著手處理的共享儀表板。

瀏覽器外掛

不必改動程式碼,就能在任何網站擷取錯誤。

專為內部團隊與 QA 打造。安裝 Chrome 擴充功能,即可在任何網站擷取螢幕截圖、註記、主控台日誌與網路請求。

  • 適用於任何網站、預備分支或正式環境應用程式
  • 擷取螢幕截圖並加上編號註記
  • 蒐集主控台日誌與網路請求
  • 提交前可選取工作區與專案
安裝 Chrome 擴充功能

網站小工具

讓使用者直接在你的應用程式內回報錯誤。

將 BugPort 小工具放入預備、測試或正式環境。使用者與測試人員無需安裝瀏覽器擴充功能即可提交結構化的錯誤報告。

  • 浮動式錯誤回報啟動器
  • 內建螢幕截圖與註記流程
  • 使用者中繼資料與環境脈絡
  • 公開專案金鑰搭配來源白名單
查看小工具安裝方式

儀表板

在完整脈絡加持下分流錯誤。

每一筆提交都會進入共享儀表板。檢視螢幕截圖、日誌、網路活動、中繼資料、留言並追蹤狀態。

  • 錯誤詳情頁面附帶可直接修復的脈絡
  • 留言、狀態、嚴重程度與指派人工作流程
  • 可分享給團隊與 AI 編碼代理的報告
  • 工作區與專案組織管理
開啟儀表板

脈絡

每份回報都包含完整的來龍去脈。

每次錯誤提交都包含視覺、備註、頁面、瀏覽器、日誌、網路活動以及工作流程細節。不必再追查遺漏的資訊。

  • 視覺截圖、標註以及可選的螢幕錄製。
  • 環境瀏覽器、作業系統、視口、裝置與語言。
  • 主控台附完整堆疊追蹤的錯誤與警告。
  • 網路請求、狀態碼、負載與耗時。
  • 重現步驟、使用者備註以及確切的頁面 URL。
  • 工作流程專案、優先順序、嚴重程度、負責人與狀態。
BUG-1024開放嚴重

定價頁面上的提交按鈕無回應

app.example.com/pricing
Submit1
點擊「提交」沒有反應

「在定價頁面點擊提交按鈕沒有反應。Chrome 和 Firefox 都試過了。」

環境
Chrome 125macOS 15.21440 × 900
主控台
TypeError: Cannot read property 'submit' of nullReact: invalid prop type for 'onClick'
網路
POST/api/checkout500234 ms
GET/api/plans20042 ms

開發者安裝

幾分鐘內加入小工具。

在預備、測試或正式環境安裝小工具,讓使用者與測試人員可直接從你的產品回報錯誤。

安裝

npm install @bugport.ai/widget

React 範例

import { BugPortWidget } from "@bugport.ai/widget";

export function App() {
  return (
    <>
      <YourApp />
      <BugPortWidget
        projectKey="bp_pub_xxxxx"
        environment="staging"
        apiBaseUrl="https://api.bugport.ai/v1"
        user={{
          id: "user_123",
          name: "Jane Doe",
          email: "[email protected]"
        }}
      />
    </>
  );
}

使用情境

為快速出貨的團隊打造。

當產品迭代迅速、回饋來自四面八方,且除錯需要脈絡而非臆測時,BugPort 就能派上用場。

AI 開發者

把 AI 打造應用程式的模糊回饋,轉化為編碼代理可直接運用的結構化除錯脈絡。

創辦人

別再讓錯誤淹沒在私訊裡。從測試人員擷取結構化報告,在上線前修好問題。

QA 團隊

以螢幕截圖、註記、裝置中繼資料與主控台日誌,集中管理測試回饋。

產品團隊

讓 PM 與設計師以視覺化方式回報問題,不必撰寫技術性的錯誤工單。

代理商

讓客戶直接從預備環境回報錯誤,免去雜亂的電子郵件往返或四散的螢幕截圖。

客服團隊

在使用者回報問題時擷取完整的技術脈絡,讓工程師在第一次交接時就拿到可直接修復的細節。

整合

融入你的除錯工作流程。

從 BugPort 的儀表板開始,再連接團隊既有的工具。部分整合已上線,其他則為規劃中或為未來 AI 工作流程而設計。

GitHub規劃中
GitLab規劃中
Jira規劃中
Linear規劃中
Slack規劃中
Webhooks規劃中
MCP專為其設計
Claude代理就緒
Codex代理就緒
Copilot代理就緒
Cursor代理就緒

當你的團隊準備好時

準備好擺脫追查殘缺錯誤報告的日子了嗎?

為你的團隊與 AI 編碼工具提供他們所需的脈絡,讓問題更快獲得修復。