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

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

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

Real Chromium — отображает страницу точно так же, как ваш браузер.
Отслеживание производительности с аналитикой (LCP, CLS, ресурсы блокировки рендеринга)
Полный доступ к вкладкам сети — тела запроса/ответа, время, перенаправления
Снимки DOM, снимки экрана и действия щелчка/ввода/прокрутки
Захват журнала консоли и оценка JS в реальном времени в контексте страницы.
Поддерживается командой Chrome DevTools в Google.

Живое демо

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

chrome-devtools.replay ▶ готово

0/0

Установка

Выберите клиент

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Откройте Claude Desktop → Settings → Developer → Edit Config. Перезапустите после сохранения.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cursor использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Тот же формат, что и Claude Desktop. Перезапустите Windsurf для применения.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue использует массив объектов серверов, а не map.

~/.config/zed/settings.json

{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

Добавьте в context_servers. Zed перезагружается автоматически.

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

Однострочная команда. Проверить: claude mcp list. Удалить: claude mcp remove.

Сценарии использования

Реальные сценарии: Chrome DevTools

Диагностируйте, почему страница работает медленно, с помощью трассировки в стиле Lighthouse

👤 Frontend и perf-инженеры ⏱ ~20 min intermediate

Когда использовать: Страница кажется медленной, и вы хотите, чтобы Клод провел трассировку и указал на фактическое узкое место, а не угадывал.

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

Целевой URL-адрес загружается без входа в систему (или вы сначала обрабатываете аутентификацию) — Используйте navigate_page с URL-адресом; для страниц с авторизацией сначала войдите в систему с помощью инструментов щелчка/ввода chrome-devtools

Поток

Запустите трассировку производительности

Откройте https://example.com/product/123. Запустите трассировку производительности с 4-кратным регулированием ЦП и профилем медленной сети 3G. Назовите мне LCP, CLS и TBT.✓ Скопировано

→ Три числа показателей плюс сводка трассировки
Найдите главного виновника

Какой отдельный актив или сценарий больше всего способствует задержке LCP? Покажите время запроса.✓ Скопировано

→ Определен конкретный URL-адрес с разбивкой по времени (DNS/connect/TTFB/загрузка).
Предложите конкретное решение

Какое самое дешевое исправление позволит снизить время LCP до 2,5 с? Предложите одно изменение (предварительное подключение, предварительная загрузка, отсрочка, отложенное или разделение пакета) с добавлением конкретных строк.Какое самое дешевое исправление позволит снизить время LCP до 2,5 с? Предложите одно изменение (предварительное подключение, предварительная загрузка, отсрочка, отложенное или разделение пакета) с добавлением конкретных строк.✓ Скопировано

→ Действенные различия HTML/JS, а не общий список

Итог: Регрессия производительности с именованной причиной и конкретным исправлением, которую можно проверить путем повторного запуска трассировки после ее применения.

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

Трассировка варьируется от запуска к запуску — единичные цифры вводят в заблуждение — Запустите трассировку 3 раза и возьмите медиану, прежде чем делать какие-либо выводы.
Локальные/девелоперские сборки отличаются от производственных — Трассировка по рабочему URL-адресу или предварительному просмотру, обслуживаемому CDN, а не по локальному хосту без сжатия.

Сочетать с: filesystem · github

Убедитесь, что функция, которую только что написал Клод, действительно работает в браузере.

👤 Разработчики с помощью ИИ завершают работу своего агента ⏱ ~10 min beginner

Когда использовать: Клод только что отредактировал код внешнего интерфейса. Прежде чем сказать «Готово», вам нужно открыть страницу, нажать кнопку и подтвердить, что она работает.

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

Сервер разработки работает — npm run dev в другом терминале; обратите внимание на URL

Поток

Откройте функцию и сделайте снимок экрана

Откройте http://localhost:3000/new-feature. Сделайте снимок экрана. Опишите то, что вы видите — соответствует ли это замыслу?✓ Скопировано

→ Снимок экрана и честное описание (может отмечаться надпись «кнопка отображается за пределами экрана»).
Тренируйте взаимодействие

Нажмите кнопку «Отправить» с тестовыми данными: {email: '[email protected]'}. Зафиксируйте исходящий сетевой запрос и ответ.✓ Скопировано

→ Сетевой вход с ответом 200 и соответствующей полезной нагрузкой
Проверьте консоль на наличие ошибок

Были ли какие-либо ошибки или предупреждения консоли во время этого процесса? Включите предупреждения о гидратации React или предупреждения об отсутствии ключа.✓ Скопировано

→ Очистите консоль или конкретное исправление всех обнаруженных предупреждений.

Итог: Функция, проверенная самостоятельно, со снимком экрана и трассировкой сети в качестве доказательства. Закрывает пробел «ИИ написал код, который на самом деле не работает».

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

Скриншот выглядит нормально, но взаимодействие нарушено — Всегда проверяйте пользовательский поток (щелкните/введите текст), а не просто визуально проверяйте.
HMR устроил гонку со скриншотом Клода — После навигации подождите «networkidle», прежде чем что-либо утверждать.

Сочетать с: filesystem · github

Устраните причину сбоя вызова API из вашего интерфейса.

👤 Разработчики полного стека гонятся за 4xx/5xx, которого «не бывает локально» ⏱ ~15 min intermediate

Когда использовать: Консоль браузера показывает неудавшуюся выборку, и вы не доверяете своей памяти относительно того, какие заголовки/тело отправляются.

Поток

Запустить неудачный вызов

Откройте страницу, выполните действие, которое не удалось. Запишите полный URL-адрес, метод, заголовки и тело ошибочного запроса.✓ Скопировано

→ Видна точная полезная нагрузка запроса — не надо гадать
Сравните с ожидаемым

Бэкэнд ожидает заголовок X-Client-Id и тело JSON с полем user_id. Что на самом деле выходит? Дифференциал.✓ Скопировано

→ Определено конкретное отсутствующее или неправильное поле
Исправьте и повторите проверку

Исправьте исходный код, чтобы запрос соответствовал. Затем перезагрузите страницу и подтвердите, что вызов теперь возвращает 200.✓ Скопировано

→ Окончательная запись сети показывает 200, а не исходную ошибку.

Итог: Фиксированный вызов API с подтверждением на вкладке сети, что теперь он работает — больше никаких «работает на моей машине».

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

Сеансовые файлы cookie или предварительная проверка CORS маскируют реальный запрос. — Не просто смотрите на неудачный запрос — проверьте предполетные ОПЦИИ и историю Set-Cookie.

Сочетать с: filesystem · postgres

Spot visual regressions after a CSS refactor

👤 Frontend devs doing design-system migrations ⏱ ~20 min intermediate

Когда использовать: You refactored CSS/tokens. You want to catch 'oh no the button is now pink' before merging.

Поток

Snapshot key pages on main

On http://localhost:3000 (main branch), screenshot /, /pricing, /dashboard. Save into /tmp/visual/main/.✓ Скопировано

→ 3 screenshots saved
Snapshot same pages on your branch

Switch to branch 'css-refactor' and restart dev server. Screenshot the same 3 pages to /tmp/visual/branch/.✓ Скопировано

→ 3 matching-path screenshots saved
Diff and describe

For each pair, compare them visually and describe any change. Ignore pixel-level anti-aliasing; flag anything a designer would notice.✓ Скопировано

→ Per-page diff summary, not 'looks the same'

Итог: A review-ready diff that catches unintended visual changes.

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

Dynamic content (dates, randomized greetings) changes between shots — Stub time and freeze RNG, or crop those regions out

Сочетать с: filesystem · github

Комбинации

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

chrome-devtools + filesystem

Edit source → reload page → verify, in a tight loop

Open localhost:3000/checkout. The form's submit button is wrong color. Find the relevant CSS in src/ and fix it, then reload and screenshot to confirm.✓ Скопировано

chrome-devtools + github

Reproduce a bug from an issue, verify fix, open PR with screenshot

Issue #482 reports a layout bug on /pricing at 375px width. Reproduce it with chrome-devtools (screenshot at 375px), fix the CSS, open a PR including the before/after screenshots.✓ Скопировано

chrome-devtools + sentry

Reproduce a real user error found in Sentry, in your local browser

For Sentry issue WEB-3a91, the breadcrumbs show the user navigated to /cart then clicked 'Checkout'. Replay that in chrome-devtools and capture what actually breaks.✓ Скопировано

Инструменты

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

Инструмент	Входные данные	Когда вызывать	Стоимость
navigate_page	url: str, wait_for?: 'load'\|'networkidle'	Start any page interaction	free
take_screenshot	fullPage?: bool, selector?: str	Visual confirmation after navigating or interacting	free
take_snapshot	none	Structured page content as text — better than screenshots for Claude to reason about	free
click	selector: str \| uid: str	Click an element by CSS selector or snapshot UID	free
fill	selector: str, value: str	Type into an input field	free
evaluate_script	script: str	Run arbitrary JS in page context for inspection	free
list_console_messages	none	Read console logs and errors from the page	free
list_network_requests	filter?: str	Inspect all XHR/fetch that happened	free
get_network_request	requestId: str	Get full headers and body of one request	free
performance_start_trace	reload?: bool, cpu_throttle?: number, network?: 'slow3g'\|'fast3g'	Begin a performance recording	free
performance_stop_trace	none	Stop and analyze a running performance trace	free
emulate_cpu	rate: number	Simulate slow devices (4x = mid-tier mobile)	free
emulate_network	profile: 'slow3g'\|'fast3g'\|'offline'	Test under constrained networks	free
new_page / close_page / select_page	various	Manage multiple tabs	free

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

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

Квота API: None — runs a local browser
Токенов на вызов: Snapshots and network dumps can be large (5-30k tokens); take_snapshot is usually more token-efficient than full screenshots plus DOM dump
Деньги: Free
Совет: Prefer take_snapshot over take_screenshot for Claude to reason about structure — snapshots are compact and text-based. Save screenshots for human review.

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

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

Хранение учётных данных: None at the MCP layer; if you log into a site during a session, cookies live in the Chromium profile until you close it

Исходящий трафик: The Chromium browses the open web on your behalf — targets receive your IP. No telemetry to Google beyond whatever Chromium's defaults send.

Никогда не давайте: never point at your real browser profile containing saved logins/passwords

If you ask Claude to 'log into site X', it will store a session cookie in the browser profile. Isolate that profile from your personal one.
Never evaluate_script code you don't understand — it runs in the page's origin with full access.

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

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

Chromium won't launch — missing dependencies on Linux

Install missing system libs: sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2. The MCP bundles Chromium but not all its runtime deps.

Проверить: Run `npx chrome-devtools-mcp --version` — errors name the missing lib

navigate_page times out on slow page

Pass wait_for: 'load' instead of the default networkidle; or increase timeout in the client's MCP config.

click fails: element not found

The selector is stale or hidden. Re-call take_snapshot first and use the fresh UID from the snapshot.

Performance trace is empty

You need to either reload the page during the trace (reload: true) or interact with it — an idle tab produces no timeline.

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

Chrome DevTools в сравнении

Альтернатива	Когда использовать	Компромисс
Playwright MCP	You need cross-browser testing (Firefox, WebKit) or prefer Playwright's API surface	Similar power; chrome-devtools has deeper perf tracing, playwright has broader automation
Puppeteer MCP	You want the lower-level Puppeteer API	Chrome-only, overlaps heavily with chrome-devtools MCP
browser-tools MCP	You want to connect to your existing Chrome via DevTools Protocol extension	No fresh sandbox — uses your real browser session, with its logged-in state

Ещё

Ресурсы

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

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

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