前言¶

DeepSeek Harness (DSH) Agent 在處理網頁問題時，通常只能依賴截圖或自然語言描述，難以深入排查 DOM 結構、網絡請求或腳本邏輯。BrowserScope 將完整的 Chromium DevTools 工作臺嵌入 DSH，賦予 Agent 30 個專用工具。Agent 現在可以直接讀取頁面結構、操作元素、查看 Console、追蹤請求、下斷點、解析 Source Map，並將操作前後的現場記錄下來，從基礎的點擊滑動提升到深度的斷點調試和性能瓶頸定位。

插件定位¶

這是一個由 HakureiMonika 獨立開發的社區插件，適配 DSH 0.1.5-rc.2。它不修改 DeepSeek Harness 的核心代碼，支持多插件共存。

安裝與配置¶

安裝前需確保環境滿足以下要求：
* Node.js 版本：^22.19.0 或 >=24.0.0
* DSH Web Profile 已正常啓動

執行以下命令安裝 1.0.0-rc7 版本：

dsh plugin --profile web add dsh-browser-scope@1.0.0-rc7 --ignore-scripts --config.auto-install-peers=false

在 Profile 的 cordis.patch.yml 中啓用插件：

- insert:
    - id: browser-tools
      name: dsh-browser-scope

核心能力¶

BrowserScope 提供了覆蓋瀏覽、調試、網絡、性能等維度的工具集：

• 瀏覽與操作：支持標籤管理、頁面導航、快照讀取、元素點擊/輸入/懸停、滾動、截圖、文件上傳下載等。
• 調試與源碼：通過 CDP Debugger 支持斷點控制、單步執行、調用棧查看、變量讀取及 Source Map 還原。
• 網絡監控：捕獲 Console 日誌、網絡請求列表、請求/響應 Body，支持請求攔截、重發、模擬響應和超時自動恢復。
• 診斷與性能：支持保存 Checkpoint 並對比生成診斷報告、採集 CPU/內存 Profile、分析 Trace。

典型用法¶

• 定位佈局錯亂：Agent 調用 browser_snapshot 讀取 DOM 結構，發現某個容器的 display 屬性被異步腳本修改。接着使用 browser_debugger 結合 Source Map 找到原始代碼位置，定位狀態更新時序問題。
• 還原線上錯誤：Agent 使用 browser_debugger 暫停腳本，讀取 Source Map 將壓縮代碼映射回原始文件行列（如 src/api/fetchUser.ts:23:15），定位異步請求的錯誤處理缺失。
• 捕獲請求覆蓋：Agent 調用 browser_network_requests 捕獲 /api/user 請求，發現同時發出兩個請求但舊請求響應晚 200ms 到達，導致新請求結果被覆蓋。
• 對比頁面佈局：Agent 使用 browser_split_view 同時加載兩個不同 Viewport 的頁面，用 browser_snapshot 分別讀取關鍵元素位置，發現移動端按鈕被遮擋。

注意事項¶

• 非官方插件：這是獨立開發的社區插件，不是 DeepSeek 官方發佈、維護或背書的插件。
• 開發狀態：插件仍在開發中，若遭遇 bug 或意料外情況，請通過 issue 向開發者彙報。
• Session 選擇：每個正式 Session 第一次使用瀏覽器前，需在輸入區的“瀏覽器”菜單中選擇 BrowserScope。選定後，該 Session 會一直鎖定使用 BrowserScope；其他 Session 可獨立選擇。
• 升級提示：從歷史包 dsh-browser-tools 升級時，需先移除舊包。保留 id: browser-tools 和 $DSH_HOME/browser-tools，兩個包不要同時安裝。

總結¶

DSH BrowserScope 將瀏覽器調試能力下放給 Agent，解決了 Agent 在網頁任務中“看得見但調不準”的痛點。對於需要深入排查前端問題或進行復雜網絡操作的 DSH 用戶，這是一個實用的工具箱。更多細節可查看 GitHub 倉庫。