DevRecorder

DevRecorder 是什麼？

DevRecorder 是一款專為開發者打造的螢幕錄影工具，能在錄製 UI 操作的同時，同步捕捉除錯相關的內容。它會將影片與主控台日誌、網路請求及導覽事件同步，讓你可直接跳到發生錯誤的精確時間點。

錄影工具也會捕捉請求與回應的詳細資訊（包含標頭、酬載與回應主體），並支援麥克風錄音，讓你邊操作邊說明重現步驟。設計目的是幫助團隊透過可分享連結，完整傳遞錯誤報告的上下文。

主要功能

• 畫面同步的除錯時間軸：日誌、網路與路由／導覽變更會與影片畫面對齊，讓你可直接跳到錄影中的特定時刻。
• 完整保留的主控台擷取：錄製主控台日誌、警告與錯誤，包含完整堆疊追蹤與參數酬載，呈現方式與 DevTools 一致。
• 高保真度的網路擷取：捕捉完整的網路請求，包含標頭、酬載、回應主體與時間資訊，與 DevTools 顯示的內容相近。
• 導覽與路由變更追蹤：記錄 SPA 與傳統網頁流程的導覽事件，讓錄影反映使用者實際的操作路徑。
• 麥克風旁白支援：錄製時可加入麥克風音訊，邊操作邊說明發生的事情。
• 可分享連結輸出（無需登入即可查看）：產生網址，讓團隊成員直接開啟觀看影片與同步的除錯資料。
• 透過 MCP 提供 AI 助理上下文：可透過 MCP 連接，讓 AI 助理存取錄影內容（影片、日誌與網路）。頁面特別提到將錄影拖曳至 Cursor 的工作流程。

如何使用 DevRecorder

1. 安裝擴充功能：從 Chrome 線上應用程式商店新增 DevRecorder Chrome 擴充功能。
2. 開始錄影：點擊錄影按鈕，然後重現你想捕捉的問題。
3. 錄製重點區域：可選擇視窗或框選區域，只錄製畫面中相關的部分。
4. 確認擷取內容：重現過程中，DevRecorder 會自動捕捉主控台輸出、網路活動與導覽事件（若啟用則包含麥克風旁白）。
5. 分享供審閱：使用分享選項產生可分享網址，讓團隊查看同步的除錯上下文。
6. （選用）傳送上下文至 AI 工具：透過 MCP 連接，讓支援的 AI 工具使用錄影內容。

使用情境

• 重現客戶端錯誤：觸發 JavaScript/TypeError 流程時進行錄影，然後跳到主控台輸出顯示錯誤的精確畫面。
• 除錯請求／回應不符：捕捉失敗的 API 呼叫（包含狀態、酬載、標頭與回應主體），並與影片中的 UI 狀態與時間對應。
• 追蹤 SPA 路由轉換：當錯誤發生在導覽之後（例如從產品頁到購物車再到結帳），可利用導覽事件確認使用者實際的路由路徑。
• 撰寫附旁白的錯誤報告：錄影並口述重現步驟，讓審閱者同時看到底層日誌與網路活動。
• 準備 AI 輔助分析：將錄影上下文提供給透過 MCP 連接的 AI 助理，讓助理能參考影片與錄製的除錯資料。

常見問題

分享錄影是否需要登入？

頁面說明團隊成員可透過分享連結開啟觀看，無需登入。

DevRecorder 錄影時會捕捉哪些內容？

它會同步捕捉主控台日誌（包含堆疊追蹤與參數）、網路請求（包含標頭、酬載、回應主體與時間資訊）、導覽事件，並可加入麥克風旁白。

我可以只錄製畫面的一部分嗎？

可以。頁面說明可選擇視窗或框選區域，只擷取選取的範圍。

AI 助理如何從 DevRecorder 取得上下文？

網站說明可透過 MCP 連接，讓 AI 助理存取錄影上下文（影片、日誌與網路）。也提到將錄影拖曳至 Cursor 的範例工作流程。

頁面提及的瀏覽器設定為何？

安裝指引是從 Chrome 線上應用程式商店新增 DevRecorder 擴充功能。

替代方案

• DevTools 效能/網路/主控台錄製流程：內建於 Chrome DevTools，專注於擷取追蹤與網路細節；通常需要手動匯出與比對，而非單一畫面同步的影片時間軸。
• 具備註解功能的一般螢幕錄製工具：這類工具可錄製影片供教學或重現錯誤使用，但需搭配獨立的日誌匯出功能，無法自動將主控台與網路資料同步至影片。
• 收集工作階段的錯誤回報工具（如工作階段重播）：工作階段重播產品會擷取使用者互動時間軸，有時也包含網路細節；其重點通常在於使用者互動，而非像 DevTools 那樣同時擷取主控台與網路，並與畫面精準對應。