Chrome DevTools MCP: браузер для AI-агентов

«Coding agents currently lack visibility into how their generated code behaves at runtime — they’re essentially programming blindfolded.» — Chrome for Developers Blog

Что это такое и для кого

Chrome DevTools for Agents (chrome-devtools-mcp) позволяет вашему AI-агенту (Gemini, Claude, Cursor или Copilot) управлять живым браузером Chrome и инспектировать его. Инструмент работает как MCP-сервер (Model Context Protocol), предоставляя AI-ассистенту полный доступ к возможностям Chrome DevTools: надёжную автоматизацию, глубокую отладку и анализ производительности.

Ключевая проблема, которую решает инструмент: AI-агенты не могут «видеть», что происходит в браузере при выполнении сгенерированного кода — они буквально программируют с завязанными глазами. Chrome DevTools MCP это меняет.

Для кого:

• Frontend-разработчики, использующие AI-ассистентов (Claude Code, Cursor, Copilot, Gemini CLI)
• QA-инженеры, автоматизирующие проверку веб-приложений
• Команды, оптимизирующие Web Vitals и производительность сайтов
• Разработчики AI-агентов, которым нужен доступ к браузерному контексту

Ключевые возможности

1. Анализ производительности

Инструмент записывает трассировки через Chrome DevTools и извлекает actionable-инсайты по производительности. Для этого доступны три специализированных инструмента: performance_start_trace (детальная трассировка), performance_stop_trace (остановка и анализ) и performance_analyze_insight (автоматическая генерация инсайтов) — в совокупности они дают более детальный анализ узких мест, чем Lighthouse.

Пример промпта:

Check the performance of https://developers.chrome.com

2. Расширенная отладка браузера

Агент может анализировать сетевые запросы, делать скриншоты и проверять сообщения консоли браузера — включая stack traces с source maps.

Это позволяет агенту анализировать сетевые запросы для выявления CORS-ошибок или инспектировать логи консоли, чтобы понять, почему функция работает не так, как ожидается.

3. Надёжная автоматизация через Puppeteer

Вместо прямых CDP-команд сервер использует Puppeteer — проверенную Node.js-библиотеку для управления Chrome, которая автоматически обрабатывает детали вроде ожидания загрузки страниц и готовности DOM.

Можно навигировать по страницам, заполнять формы и кликать кнопки, воспроизводя баги и тестируя сложные пользовательские сценарии — всё это во время инспекции runtime-среды.

4. Эмуляция условий

Сервер позволяет AI переключать условия: ограничение CPU, скорость сети, размер viewport (emulate_cpu, emulate_network, resize_page). Это означает, что агент может проверить поведение страницы при медленном соединении 3G или в условиях мобильных ограничений, а затем скорректировать рекомендации — например, отметить, что изображение слишком тяжёлое для мобильных устройств.

5. Подключение к текущей сессии браузера

В Chrome M144 добавлена новая функция, которая позволяет MCP-серверу запрашивать соединение для удалённой отладки прямо в вашей текущей сессии браузера. Вы уже авторизованы на стейджинге в обычном окне Chrome, у вас выбран сетевой запрос в DevTools — и вы можете передать всё это (сессию, выделение и всё остальное) агенту, не воссоздавая состояние с нуля.

6. Отладка доступности и памяти

В последних релизах добавлены: навык для отладки и аудита доступности (accessibility), экспериментальные инструменты для записи скринкастов, навык для отладки и оптимизации LCP, а также изолированные контексты браузера для хранилищ.

В версии 0.21.0 (апрель 2026) добавлен навык для обнаружения утечек памяти через инструмент take_memory_snapshot.

The page on localhost:8080 looks strange and off. Check what's happening there.

Архитектура

graph TD
    A["AI-агент\n(Claude / Gemini / Cursor)"] -->|MCP-запрос| B["MCP Server\n(chrome-devtools-mcp)"]
    B -->|CDP / Puppeteer API| C["Tool Adapter Layer"]
    C -->|Chrome DevTools Protocol| D["Chrome Runtime\n(headful / headless)"]
    D -->|Данные трассировки,\nснапшоты, HAR| C
    C -->|Сериализованный ответ| B
    B -->|Инсайты и данные| A
    D <-->|autoConnect| E["Текущий браузер\nпользователя"]

Chrome DevTools MCP использует слоистую архитектуру: MCP-сервер обрабатывает запросы от LLM/агентов, управляет сессиями и правами; слой Tool Adapter преобразует MCP-запросы в CDP или Puppeteer API; Chrome Runtime — реальный экземпляр Chrome, выполняющий все низкоуровневые действия и генерирующий данные о трассировке, производительности и консоли.

Установка и поддерживаемые агенты

Инструкции доступны для более чем 20 агентов на GitHub.

Быстрый старт для Claude Code:

# MCP только:
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

# Как плагин (MCP + Skills):
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Для VS Code / Cursor:

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

Для Gemini CLI:

gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest

Самый простой способ начать работу — установить chrome-devtools-mcp как плагин агента. Это объединяет MCP-сервер и все навыки, так что агент получает и инструменты, и экспертное руководство по их эффективному использованию.

Конфиденциальность и телеметрия

Google собирает статистику использования (показатели успешности вызовов инструментов, задержки, информацию о среде) для улучшения надёжности и производительности Chrome DevTools MCP. Сбор данных включён по умолчанию.

Отказаться можно, передав флаг --no-usage-statistics при запуске сервера: "args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"].

chrome-devtools-mcp открывает содержимое экземпляра браузера для MCP-клиентов, позволяя им инспектировать, отлаживать и изменять любые данные в браузере или DevTools. Не стоит делиться конфиденциальной или персональной информацией, которую вы не хотите передавать MCP-клиентам.

Тарифы / Цены

Chrome DevTools MCP — полностью бесплатный open-source инструмент с лицензией Apache 2.0, опубликованный на GitHub. Никаких платных тарифов нет. Стоимость использования определяется только тем AI-агентом, с которым вы его подключаете (Claude, Gemini и т.д.).

Плюсы и минусы

Сравнение с альтернативами

Честная формулировка разницы между инструментами: Playwright занимается «управлением» браузером, а Chrome DevTools MCP — его «отладкой».

По сути, Chrome DevTools MCP — это AI-разработчик, отлаживающий код внутри инспектора Chrome, тогда как Playwright MCP выступает AI-тестировщиком, проверяющим пользовательский опыт. QA и dev-команды могут выиграть от использования обоих: DevTools MCP для глубокого анализа, Playwright MCP — для функционального кросс-браузерного тестирования.

Вердикт

Chrome DevTools MCP — это революционный инструмент для веб-разработчиков, работающих с AI-агентами. Он наконец снимает «повязку с глаз» у кодирующих агентов, давая им возможность видеть, что происходит в реальном браузере: консольные ошибки, сетевые запросы, производительность рендеринга.

Chrome DevTools MCP открывает глубокую отладку DevTools для агентов и LLM, устраняя разрыв между скриптовой автоматизацией и продвинутой отладкой. Для frontend-команд, сфокусированных на производительности, надёжности и прозрачности — это высокоценный компонент инструментарной цепочки.

Кому подойдёт:

• ✅ Frontend-разработчикам, использующим Claude Code, Cursor или Gemini CLI
• ✅ Командам, которые оптимизируют Core Web Vitals и производительность
• ✅ AI-инженерам, строящим автономных агентов для веб-задач
• ❌ Тем, кто нуждается в кросс-браузерном тестировании (Firefox/Safari) — здесь лучше Playwright MCP
• ❌ Тем, кто работает в строго изолированных sandbox-средах без доступа к Chrome

Рейтинг: 9/10

Версия на момент обзора: v0.21.0 (апрель 2026). Репозиторий: github.com/ChromeDevTools/chrome-devtools-mcp