Chrome DevTools MCP: Мост между AI-ассистентами и браузерной отладкой
Когда AI встречает DevTools
Представьте: ваш AI-ассистент в VS Code или Cursor не просто предлагает код, а может реально взаимодействовать с браузером — анализировать производительность, делать скриншоты, отлаживать сетевые запросы. Звучит как фантастика? С chrome-devtools-mcp это реальность.
Что в коробке
Этот инструмент от команды Chrome DevTools работает как MCP (Model-Context-Protocol) сервер, соединяя вашего AI-помощника с полной мощью Chrome DevTools через Puppeteer. Основные возможности:
- Автоматизация тестирования без написания скриптов
- Глубокая отладка прямо из чата с ассистентом
- Анализ производительности по простому текстовому запросу
Топ-5 сценариев использования
- "Почему страница тормозит?" — AI анализирует trace-логи и дает конкретные рекомендации
- Автоматическое заполнение форм для тестирования без рутинного кодинга
- Сравнение производительности между разными версиями страницы
- Отладка сетевых запросов с визуализацией проблемных мест
- Создание скриншотов в разных разрешениях одним запросом
Как это работает технически
Под капотом — связка из:
- Puppeteer для управления Chrome
- DevTools Protocol для доступа к низкоуровневым возможностям
- MCP-сервер как промежуточный слой
Интересный нюанс: сервер не запускает браузер до первого реального запроса, экономя ресурсы.
Настройка за 2 минуты
Для большинства сред разработки достаточно добавить конфиг:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Поддерживается всеми популярными AI-ассистентами:
- GitHub Copilot
- Cursor
- JetBrains AI Assistant
- Gemini Code Assist
- Claude Code
Пример из практики
Допустим, вы хотите проверить загрузку своего сайта. Просто пишете в чат:
Check the performance of https://my-site.com
И получаете детальный отчет с:
- Водопадом загрузки ресурсов
- Анализом узких мест
- Рекомендациями по оптимизации
Ограничения и безопасность
Важно помнить:
- Сервер имеет полный доступ к содержимому браузера
- Для работы требуется Chrome последней версии
- В Windows могут быть нюансы с путями установки
Вывод: кому стоит попробовать
Этот инструмент особенно полезен:
- Фронтенд-разработчикам для быстрой отладки
- QA-инженерам для автоматизации тестов
- Тем, кто активно использует AI-ассистентов в работе
Проект активно развивается, уже имеет 8k+ звезд на GitHub и поддерживается командой Chrome DevTools. Если вы работаете с веб-разработкой — определенно стоит попробовать.
Ссылки:
