/ 目錄 / 演練場 / Browser Tools
← 全部伺服器 ↗ GitHub
● 社群 AgentDeskAI ⚡ 即開即用

Browser Tools

作者 AgentDeskAI · AgentDeskAI/browser-tools-mcp

直接從你真實的 Chrome 讀取即時主控台日誌、網路錯誤、DOM 與螢幕截圖——將除錯上下文直接送入你的 AI 代理。

AgentDeskAI 的 browser-tools MCP 包含一個 Chrome 擴充功能、本地橋接程式與 MCP 伺服器。你的 AI 代理能看到你所看到的一切——已登入的工作階段、擴充功能、真實的 DOM 與主控台。最適合用於「在乾淨瀏覽器中難以重現問題」的除錯情境。

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

browser-tools.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-tools": {
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-tools",
      "command": "npx",
      "args": [
        "-y",
        "@agentdeskai/browser-tools-mcp@latest"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-tools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@agentdeskai/browser-tools-mcp@latest"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add browser-tools -- npx -y @agentdeskai/browser-tools-mcp@latest

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： Browser Tools

利用真實主控台與網路上下文對線上前端問題進行除錯

👤 前端工程師 ⏱ ~15 min intermediate

何時使用： 問題只能在你的實際工作階段中重現（已登入、特定資料狀態）。你希望 AI 代理能讀取主控台與網路分頁。

前置條件
  • 已安裝 Chrome 擴充功能且橋接伺服器正在執行 — 從 releases 頁面安裝擴充功能，然後在終端機執行 npx @agentdeskai/browser-tools-server@latest
  • MCP 伺服器已連接至你的用戶端 — npx -y @agentdeskai/browser-tools-mcp@latest
步驟
  1. 在 DevTools 開啟的情況下重現問題
    在 Chrome 中開啟受影響的頁面並啟用擴充功能，觸發問題後不要關閉分頁。✓ 已複製
    → 問題可見，擴充功能圖示顯示正在擷取
  2. 將上下文引入 AI 代理
    取得最後 50 則主控台訊息及所有失敗的網路請求，摘要說明頁面目前報告了什麼錯誤。✓ 已複製
    → 已呈現包含堆疊追蹤的具體錯誤訊息
  3. 診斷並提出修復方案
    根據錯誤訊息，指出最可能出問題的檔案與行號。若有 404，找出錯誤的 URL；若有 JS 錯誤，找出根本原因。✓ 已複製
    → 有證據支撐的具體假設

結果： 建立一個 AI 代理擁有與你開啟 DevTools 相同上下文的除錯迴圈——比描述螢幕截圖更快速。

注意事項
  • 橋接伺服器未執行，MCP 靜默回傳空資料 — 每次使用前先確認 curl localhost:3025/identity 有回應；橋接程式必須在 MCP 呼叫前啟動
  • 擷取到錯誤的分頁 — 擴充功能擷取的是當前啟用的分頁，請在請求 AI 代理前先點擊切換至正確的分頁
搭配使用： sentry

對目前瀏覽的頁面執行類 Lighthouse 稽核

👤 前端／SEO／無障礙工程師 ⏱ ~10 min beginner

何時使用： 你想稽核頁面在你的工作階段中實際渲染的狀態，而非用乾淨的爬蟲環境檢測。

步驟
  1. 開啟目標頁面
    在啟用擴充功能的 Chrome 中前往 <URL>。✓ 已複製
    → 頁面載入完成
  2. 執行稽核模式
    執行稽核工具，涵蓋效能、無障礙、SEO、最佳實踐，並摘要列出前 5 項問題及修復建議。✓ 已複製
    → 依優先級排序的問題清單
  3. 深入聚焦
    針對無障礙失敗項目，列出確切的選擇器及違反的 WCAG 規則。✓ 已複製
    → 可直接執行的修復步驟

結果： 無需離開瀏覽器，在真實使用者狀態下完成完整稽核。

注意事項
  • 需要驗證的頁面稽核失敗，因為工具會重新導覽 — 改用除錯模式的元素／主控台工具，對已載入的頁面進行檢查，而非執行完整稽核

檢查並解釋特定元素

👤 前端開發者、設計師 ⏱ ~5 min beginner

何時使用： 某個元件的呈現有異常。你想快速了解「套用了哪些 CSS 以及原因」，不想自己深入挖掘。

步驟
  1. 在 DevTools 中選取元素
    開啟 DevTools，點擊元素檢查器，選取有問題的元素。✓ 已複製
    → 元素在 Elements 面板中被反白顯示
  2. 請 AI 代理進行檢查
    取得選取元素的計算樣式、繼承規則與邊界框，解釋它為何如此渲染。✓ 已複製
    → 基於實際 CSS 層疊順序的解釋
  3. 提出修復建議
    建議達成 [預期視覺效果] 所需的最小 CSS 改動，並顯示修改前後的規則對比。✓ 已複製
    → 最小差異建議

結果： 以對話速度完成 CSS 除錯。

注意事項
  • 元素選取不會持續——AI 代理看到的是不同元素 — 在每次提問前重新選取元素；不要在訊息之間讓 DevTools 面板切換焦點

組合

與其他 MCP 搭配，撬動十倍槓桿

browser-tools + sentry

在你的瀏覽器中重現 Sentry 錯誤並擷取即時主控台上下文

Sentry 問題 WEB-3a91 顯示對 /api/checkout 的 XHR 回傳 500。在我的 Chrome 中前往該頁面重現問題，並擷取主控台與網路日誌。✓ 已複製
browser-tools + playwright

browser-tools 用於即時除錯，Playwright 用於事後建立可重複執行的重現案例

我已透過 browser-tools 在我的真實 Chrome 中找到問題。請撰寫一個 Playwright 測試來重現完全相同的點擊操作序列。✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
takeScreenshot 擷取當前狀態的視覺畫面 free
getConsoleLogs / getConsoleErrors 除錯任何 JS 錯誤 free
getNetworkLogs / getNetworkErrors 診斷失敗的 API 呼叫 free
getSelectedElement 使用者已在 DevTools 中選取元素 free
runAccessibilityAudit 對當前頁面進行無障礙審查 free
runPerformanceAudit 對當前頁面進行效能稽核 free
runSEOAudit SEO 審查 free
runBestPracticesAudit 一般程式碼品質審查 free
runNextJSAudit 你的專案使用 Next.js 時 free
wipeLogs 在不同調查工作階段之間清除日誌 free

成本與限制

運行它的成本

API 配額
無——全部在本機執行
每次呼叫 Token 數
日誌傾印可能很大（5k+ tokens）。請在工作階段之間使用 wipeLogs。
費用
免費，開源軟體
提示
每次調查前先清除日誌——避免引入不相關的雜訊

安全

權限、密鑰、影響範圍

憑證儲存： 無——直接對你現有的 Chrome 工作階段執行
資料出站： 僅傳至 localhost:3025（橋接程式）。除非透過 AI 代理或 MCP 用戶端，否則不會有任何資料離開你的機器。

故障排查

常見錯誤與修復

All tools return empty / 'not connected'

橋接伺服器未執行。請在專用終端機中啟動：npx @agentdeskai/browser-tools-server@latest。

驗證： curl http://localhost:3025/identity
Extension icon grey / inactive

點擊擴充功能圖示，確認顯示「Connected」。若未顯示，請重新載入分頁。

Audits fail with timeout

在內容較重的頁面上，部分稽核需要更多時間。關閉其他分頁以釋放 CPU 資源後重新執行。

Wrong tab captured

擴充功能擷取的是最後啟用的分頁。在呼叫工具前，立即點擊切換至正確的分頁。

替代方案

Browser Tools 對比其他方案

替代方案何時用它替代權衡
chrome-devtools MCP你希望直接使用 CDP 存取，不需要瀏覽器擴充功能不需要擴充功能，但會失去真實使用者工作階段的上下文
Playwright MCP你需要可重複執行的自動化測試，而非即時除錯使用乾淨瀏覽器——無法看到你已登入的工作階段

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills