В фронтенд-разработке один из самых непродуктивных диалогов выглядит так: вы вставляете ошибку в ИИ, он гадает о причине на основе кода; вы переключаетесь в браузер, чтобы проверить Console; копируете результаты Network обратно; ИИ гадает снова. После нескольких таких итераций настоящий баг может оказаться всего лишь запросом с кодом 401, ошибкой гидратации (hydration mismatch) или кнопкой, перекрытой прозрачным слоем.
ChromeDevTools/chrome-devtools-mcp ценен именно этим: он подключает Chrome DevTools к coding agent, позволяя агенту не просто читать код, а видеть реальную среду выполнения браузера.
На момент сбора данных у этого репозитория около 41 189 звёзд и 2 620 форков, а GitHub Trending показывает прирост примерно в 437 звёзд за сутки. Позиционирование в README предельно краткое: Chrome DevTools for coding agents. Основные возможности делятся на три категории: запись trace и извлечение инсайтов о производительности; анализ сетевых запросов, создание скриншотов, проверка сообщений в Console браузера; более надёжная автоматизация браузера через Puppeteer.
Если вы работаете во фронтенд-команде, не стоит сразу воспринимать это как «ИИ, который автоматически пишет веб-страницы». Более практичный подход: превратить процесс отладки в замкнутый цикл.
Шаг первый: заставить Agent воспроизвести проблему. Не «посмотри на код и угадай», а открыть страницу, выполнить клики, ввод текста, переходы и другие действия. Ценность Puppeteer в том, что он умеет ждать результата действий, что снижает вероятность ошибок, когда скрипт начинает анализировать страницу до того, как она успела отреагировать на клик.
Шаг второй: позволить Agent проверить доказательства из среды выполнения. Есть ли ошибки в Console? Какой эндпоинт в Network работает медленно или возвращает ошибку? Действительно ли кнопка отображается на скриншоте страницы? Не вызвало ли определённое взаимодействие лишние запросы? Раньше эту информацию вручную переносили из DevTools в ИИ, теперь Agent может считывать её напрямую.
Шаг третий: возврат к исправлению кода. Получив стек ошибок, информацию о запросах, скриншоты и trace, Agent вносит правки не на основе абстрактных рассуждений, а последовательно сужая область поиска, опираясь на доказательства. После внесения изменений тот же набор браузерных действий запускается повторно для проверки.
Этот цикл особенно хорошо подходит для трёх типов сценариев:
- UI-баги, которые «не воспроизводятся локально»: Agent фиксирует шаги воспроизведения
- Проблемы производительности: Agent сначала собирает trace, и только потом обсуждается оптимизация
- Закрытие пробелов в E2E-тестах: сначала запуск через естественный язык, затем конвертация в скрипты Playwright/Cypress
Однако у него есть свои ограничения. В README чётко указано: chrome-devtools-mcp предоставляет содержимое экземпляра браузера MCP-клиенту, который может выполнять inspect, debug и modify данных в браузере или DevTools. Поэтому не стоит подключать его к сессиям браузера, содержащим конфиденциальные аккаунты, токены или данные клиентов. Официально поддерживаются Google Chrome и Chrome for Testing; работа с другими браузерами на базе Chromium не гарантируется.
Моя рекомендация: сначала поместите его в песочницу «чистый браузер + тестовый аккаунт + локальное окружение». Дайте Agent выполнить две простые задачи: воспроизвести известный баг и исправить уже падающий тест. Как только эти два сценария заработают, команда сможет решить, стоит ли внедрять инструмент в ежедневный рабочий процесс.
Есть ещё одно часто упускаемое из виду преимущество: улучшение качества коммуникации между человеком и ИИ. Раньше, когда вы говорили «страница немного тормозит» или «кнопка не реагирует», ИИ мог лишь гадать на основе размытых описаний. Теперь trace, скриншоты, данные Console и результаты запросов можно использовать как общий контекст. Даже если финальное исправление всё равно выполняет инженер вручную, локализация проблемы ускорится. Для команды это не демонстрация технологий, а стандартизация доказательной базы отладки.
Главный страх при программировании с ИИ — это «ситуация, когда он не видит среду выполнения, но делает вид, что видит». Значение Chrome DevTools MCP не в том, чтобы Agent стал красноречивее, а в том, чтобы он наконец мог меньше гадать.
Основной источник: GitHub - ChromeDevTools/chrome-devtools-mcp