Browser Tools MCP — Сценарии использования, Установка & Живое демо

Name: Browser Tools MCP Server
Author: AgentDeskAI

Зачем использовать

Ключевые функции

Reads YOUR Chrome, not a headless one — logged-in auth, extensions, cookies
Console logs, network requests, selected-element inspection
Built-in audits: Lighthouse-style perf, a11y, SEO, Best Practices, Next.js
All data stays local — no cloud roundtrip

Живое демо

Как выглядит на практике

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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "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 использует массив объектов серверов, а не map.

~/.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

Debug a live front-end bug using real console + network context

👤 Frontend engineers ⏱ ~15 min intermediate

Когда использовать: A bug only reproduces in your actual session (logged in, specific data). You want the agent to read the console and network tab.

Предварительные требования

Chrome extension installed + bridge server running — Install extension from releases page, then npx @agentdeskai/browser-tools-server@latest in a terminal
MCP server wired to your client — npx -y @agentdeskai/browser-tools-mcp@latest

Поток

Reproduce the bug with DevTools open

Open the affected page in Chrome with the extension active. Trigger the bug. Don't close the tab.✓ Скопировано

→ Bug visible, extension icon shows it's capturing
Pull context into the agent

Get the last 50 console messages and any failed network requests. Summarize what the page is yelling about.✓ Скопировано

→ Specific errors surfaced with stack traces
Diagnose and propose fix

Based on the errors, point at the file/line likely responsible. If 404s, identify the bad URL; if JS errors, the root cause.✓ Скопировано

→ Concrete hypothesis with evidence

Итог: A debugging loop where the agent has the same context as you opening DevTools — faster than reading a screenshot description.

Подводные камни

Bridge server not running, MCP silently returns empty data — Always check curl localhost:3025/identity responds first; the bridge must be running before the MCP call
Capturing from the wrong tab — Extension captures the active tab. Click into the right tab before asking the agent

Сочетать с: sentry

Run a Lighthouse-style audit on the page you're looking at

👤 Frontend / SEO / a11y engineers ⏱ ~10 min beginner

Когда использовать: You want to audit a page as it actually renders in your session (not a clean crawler).

Поток

Open the target page

Navigate to <URL> in Chrome with the extension active.✓ Скопировано

→ Page loaded
Run the audit mode

Run the audit tool — perf, a11y, SEO, best practices. Summarize top 5 issues with fix suggestions.✓ Скопировано

→ Prioritized issue list
Focus in

For the accessibility failures, list exact selectors and the WCAG rule violated.✓ Скопировано

→ Actionable remediation steps

Итог: A full audit without leaving your browser, scoped to real user state.

Подводные камни

Audits for auth-gated pages fail because the tool re-navigates — Use the debugger mode's element/console tools on the already-loaded page instead of the full audit

Inspect and explain a specific element

👤 Frontend devs, designers ⏱ ~5 min beginner

Когда использовать: Something looks off in one component. You want a quick 'what CSS is applied and why' without digging.

Поток

Select the element in DevTools

Open DevTools, click the element inspector, select the offending element.✓ Скопировано

→ Element highlighted in Elements panel
Ask the agent to inspect

Get the selected element's computed styles, inherited rules, and bounding box. Explain why it's rendering the way it is.✓ Скопировано

→ Explanation grounded in actual CSS cascade
Propose a fix

Suggest the smallest CSS change to achieve [desired visual]. Show the before/after rule.✓ Скопировано

→ Minimal diff suggestion

Итог: CSS debugging at conversation speed.

Подводные камни

Element selection doesn't persist — agent sees a different one — Re-select the element right before asking; don't let the DevTools panel change focus between messages

Комбинации

Сочетайте с другими MCP — эффект x10

browser-tools + sentry

Reproduce a Sentry error in YOUR browser and pull live console context

Sentry issue WEB-3a91 says an XHR to /api/checkout returns 500. Navigate to the page in my Chrome, reproduce, and capture the console + network.✓ Скопировано

browser-tools + playwright

browser-tools for live debugging, Playwright for repeatable reproductions afterward

I found the bug in my live Chrome via browser-tools. Now write a Playwright test that reproduces the exact click sequence.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Когда вызывать	Стоимость
takeScreenshot	Visual capture of current state	free
getConsoleLogs / getConsoleErrors	Debug any JS error	free
getNetworkLogs / getNetworkErrors	Diagnose failed API calls	free
getSelectedElement	User has selected an element in DevTools	free
runAccessibilityAudit	A11y review of current page	free
runPerformanceAudit	Perf audit of current page	free
runSEOAudit	SEO review	free
runBestPracticesAudit	General code quality review	free
runNextJSAudit	You're on Next.js	free
wipeLogs	Clear between investigation sessions	free

Стоимость и лимиты

Во что обходится

Квота API: None — all local
Токенов на вызов: Log dumps can be big (5k+ tokens). Use wipeLogs between sessions.
Деньги: Free, open source
Совет: Wipe logs before each investigation — avoids pulling in unrelated noise

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: None — runs against your existing Chrome session

Исходящий трафик: Only to localhost:3025 (the bridge). Nothing leaves your machine except via whatever the agent/MCP client does.

Extension has access to your browser data by design. Only install from official releases. Review source before granting permissions.

Устранение неполадок

Частые ошибки и исправления

All tools return empty / 'not connected'

The bridge server isn't running. Start it: npx @agentdeskai/browser-tools-server@latest in a dedicated terminal.

Проверить: curl http://localhost:3025/identity

Extension icon grey / inactive

Click the extension icon, confirm it says 'Connected'. If not, reload the tab.

Audits fail with timeout

Some audits need extra time on heavy pages. Close other tabs to free CPU; re-run.

Wrong tab captured

The extension captures the tab that was last activated. Click into the right tab immediately before calling a tool.

Альтернативы

Browser Tools в сравнении

Альтернатива	Когда использовать	Компромисс
chrome-devtools MCP	You want direct CDP access without a browser extension	No extension needed but you lose real-user-session context
Playwright MCP	You need repeatable automation, not live debugging	Clean browser — can't see your logged-in session

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills