Google выпустила общедоступную предварительную версию «Chrome DevTools MCP» — сервера Model Context Protocol (MCP), который позволяет агентам по кодированию с использованием искусственного интеллекта контролировать и проверять работающий экземпляр Chrome. Сервер записывает данные о производительности, проверяет DOM и CSS, выполняет JavaScript, считывает вывод консоли и автоматизирует пользовательские потоки.
Что такое Chrome DevTools MCP?
MCP — это открытый протокол для подключения больших языковых моделей к инструментам и данным. Google DevTools MCP действует как специализированный сервер, который предоставляет доступ к функциям отладки Chrome для клиентов, совместимых с MCP.
В блоге разработчиков Google говорится, что это «предоставление возможностей Chrome DevTools помощникам по кодированию с использованием ИИ». Конкретные рабочие процессы включают запуск трассировки производительности (например, `performancestarttrace`) для целевого URL, а затем анализ полученной трассировки агентом для предложения оптимизаций (например, диагностика высокого Largest Contentful Paint).
Возможности и инструменты
В официальном репозитории GitHub представлен широкий набор инструментов. Помимо трассировки производительности (`performancestarttrace`, `performancestoptrace`, `performanceanalyzeinsight`), агенты могут выполнять навигационные примитивы (`navigatepage`, `newpage`, `waitfor`), имитировать ввод пользователя (`click`, `fill`, `drag`, `hover`) и проверять состояние во время выполнения (`listconsolemessages`, `evaluatescript`, `listnetworkrequests`, `getnetworkrequest`).
Инструменты для создания скриншотов и снимков обеспечивают захват визуального и DOM-состояния для поддержки сравнения версий и регрессионного тестирования. Сервер использует Puppeteer для надёжной автоматизации и семантики ожидания, а взаимодействует с Chrome через протокол Chrome DevTools (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`. Пакет предназначен для Node.js ≥22 и текущего Chrome.
Пример рабочих процессов с агентами
В анонсе Google подчёркиваются прагматичные подсказки, которые демонстрируют сквозные циклы:
* проверка предложенного исправления в работающем браузере;
* анализ сетевых сбоев (например, CORS или заблокированные запросы изображений);
* имитация поведения пользователя, например, отправка формы для воспроизведения ошибок;
* проверка проблем с макетом путём чтения DOM/CSS в контексте;
* запуск автоматических проверок производительности для снижения LCP и других Core Web Vitals.
Эти операции теперь могут быть проверены агентами с помощью фактических измерений, а не эвристик.
Резюме
Общедоступная предварительная версия Chrome DevTools MCP — это практический переломный момент для инструментов внешнего интерфейса агентов: она связывает ИИ-помощников с реальной телеметрией браузера — трассировками производительности, состоянием DOM/CSS, данными сети и консоли — так что рекомендации основаны на измерениях, а не на догадках.
Первый сервер, поставляемый командой Chrome DevTools, устанавливается через `npx` и предназначен для клиентов с поддержкой MCP, а в основе — Chrome/CDP. Ожидайте сокращения циклов диагностики и исправления регрессий и нестабильных потоков пользовательского интерфейса, а также более тщательной проверки работы по повышению производительности.
1. Какие возможности предоставляет Chrome DevTools MCP для агентов по кодированию с использованием искусственного интеллекта?
Chrome DevTools MCP предоставляет агентам по кодированию с использованием искусственного интеллекта доступ к функциям отладки Chrome. Среди них: запуск трассировки производительности, анализ полученной трассировки для предложения оптимизаций, выполнение навигационных примитивов, имитация ввода пользователя и проверка состояния во время выполнения.
2. Какие инструменты доступны в официальном репозитории GitHub для работы с Chrome DevTools MCP?
В официальном репозитории GitHub представлен широкий набор инструментов для работы с Chrome DevTools MCP. Помимо трассировки производительности, агенты могут выполнять навигационные примитивы, имитировать ввод пользователя и проверять состояние во время выполнения. Также доступны инструменты для создания скриншотов и снимков, обеспечивающие захват визуального и DOM-состояния.
3. Как можно установить Chrome DevTools MCP?
Настройка для клиентов MCP минимальна. Google рекомендует добавить одну конфигурацию, которая использует `npx`, всегда отслеживая последнюю сборку сервера. Для этого необходимо добавить в конфигурацию следующую строку:
“`
{
“mcpServers”: {
“chrome-devtools”: {
“command”: “npx”,
“args”: [“chrome-devtools-mcp@latest”]
}
}
}
“`
4. С какими интерфейсами агентов интегрируется сервер Chrome DevTools MCP?
Сервер Chrome DevTools MCP интегрируется с несколькими интерфейсами агентов: Gemini CLI, Claude Code, Cursor и поддержкой MCP в GitHub Copilot. Для VS Code/Copilot в репозитории задокументирована команда `code –add-mcp`, а для Claude Code — команда `claude mcp add`.
5. Какие преимущества предоставляет Chrome DevTools MCP для диагностики и исправления проблем?
Chrome DevTools MCP связывает ИИ-помощников с реальной телеметрией браузера, что позволяет давать рекомендации, основанные на измерениях, а не на догадках. Это может сократить циклы диагностики и исправления регрессий и нестабильных потоков пользовательского интерфейса, а также повысить качество проверки работы по повышению производительности.