Что делает Chrome DevTools MCP

Google выпустил публичный превью Chrome DevTools MCP — сервер Model Context Protocol (MCP), который позволяет AI-ассистентам управлять и инспектировать реальный экземпляр Chrome. Через MCP агенты могут записывать трассы производительности, просматривать DOM и CSS, выполнять JavaScript, читать вывод консоли и автоматизировать пользовательские сценарии. Это решает типичное ограничение генераторов кода — отсутствие возможности наблюдать поведение страниц во время выполнения.

Как MCP связывает AI с DevTools

MCP — открытый протокол для подключения LLM и других агентов к инструментам и данным. Сервер DevTools MCP предоставляет отладочную поверхность Chrome в виде MCP-совместимого набора инструментов. Это позволяет агентам запускать конкретные сценарии: начать трассировку производительности по URL, проанализировать результат и предложить оптимизации — например определить причину большого Largest Contentful Paint или смещений в верстке.

Возможности и набор инструментов

Репозиторий проекта описывает широкий набор операций. Помимо примитивов для трассировки производительности (performance_start_trace, performance_stop_trace, performance_analyze_insight), агенты могут:

• Управлять навигацией и страницами (navigate_page, new_page, wait_for)
• Симулировать ввод пользователя (click, fill, drag, hover)
• Инспектировать состояние выполнения и телеметрию (list_console_messages, evaluate_script, list_network_requests, get_network_request)
• Делать скриншоты и снимки DOM для проверок и регрессий

Сервер использует Puppeteer для надежной автоматизации и семантики ожиданий, а связь с Chrome реализована через Chrome DevTools Protocol (CDP).

Установка и интеграция

Настройка для MCP-клиентов преднамеренно минимальна: Google рекомендует добавить короткий конфигурационный фрагмент, который вызывает npx и всегда использует последнюю сборку сервера. В репозитории приведён такой фрагмент:

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

Сервер интегрируется с несколькими фронтенд-агентами: Gemini CLI, Claude Code, Cursor и поддержкой MCP у GitHub Copilot. Для VS Code/Copilot в репозитории указан однострочник code –add-mcp; для Claude Code доступна команда claude mcp add, которая ссылается на тот же npx-пакет. Пакет ориентирован на Node.js ≥22 и актуальную версию Chrome.

Примеры рабочих сценариев агентов

В анонсе Google приводятся практичные подсказки, демонстрирующие полноцикловые сценарии: проверить предложенное исправление в живом браузере; проанализировать сетевые ошибки (например, CORS или заблокированные изображения); воспроизвести баги, симулируя пользовательские действия; исследовать проблемы верстки, читая DOM/CSS в контексте; запускать автоматические аудиты производительности для снижения LCP и других Core Web Vitals. Во всех этих случаях агенты теперь могут валидировать изменения реальными измерениями.

Почему это важно

Публичный превью Chrome DevTools MCP делает AI-ассистентов привязанными к реальной телеметрии браузера — трассам производительности, состоянию DOM/CSS, сетевым и консольным данным — что делает рекомендации основанными на измерениях, а не на догадках. Это должно сократить циклы поиска и исправления регрессий и нестабильных UI-сценариев и повысить точность проверки работ по производительности.

Для технических деталей и репозитория смотрите блог Chrome DevTools и страницу проекта на GitHub.