Chrome DevTools MCP: агент-ориентированный дебаггинг или overengineering?

Когда Google тихо заливает в GitHub репозиторий с 563 звездами за неделю — это либо новый vite, либо странный эксперимент. Chrome DevTools MCP (Multi-Channel Processing) — определенно второй вариант. В документации красиво говорят про «инструменты для coding agents», но на практике это пока больше research project, чем daily driver.

Что вообще происходит?

MCP — это попытка переосмыслить DevTools в мире, где часть кода пишут и анализируют LLM-based агенты. Основные фичи:

1. Agent Protocol — JSON-RPC подобный интерфейс для взаимодействия с агентами
2. Multi-channel DOM — параллельное представление DOM для человека и AI
3. Action Traces — аудит изменений, внесенных агентами

На практике это выглядит как гибрид классических DevTools и чего-то вроде автономного Copilot. Вот пример конфига для подключения агента:

{
  "agent": "claude-3-opus",
  "capabilities": ["dom_analysis", "perf_optimization"],
  "permissions": {
    "modify_styles": true,
    "suggest_alters": false
  }
}

Главный вопрос — зачем? После недели тестов у меня сформировались два сценария, где это может быть полезно.

Сценарий 1: Дебаггинг AI-generated кода

Когда агент типа Claude Code или GPT-4 Engineer пишет фронтенд, он часто:

• Генерирует избыточные DOM-узлы
• Дублирует обработчики событий
• Оставляет артефакты типа data-ai-id="xyz"

MCP добавляет специальные фильтры в Elements panel:

ai-actions:modified
ai-actions:added-last-hour
ai-confidence:<0.7

Это действительно экономит время — особенно когда разбираешься с чужим AI-assisted PR. Но есть нюанс: пока поддерживается только их внутренний протокол, а не популярные агенты вроде Cursor или Codeium.

Сценарий 2: Vibe-девелопмент

Термин «vibe coding» пока не устоялся, но в контексте MCP я использую его для workflow, где:

1. Ты набрасываешь идею в UI (например, «сделай кнопку более кликабельной»)
2. Агент предлагает N вариантов через MCP-интерфейс
3. Выбираешь вариант мышкой, не переключаясь в код

Пример из моего эксперимента с кнопкой:

// Было
button.style.padding = '8px 16px';

// MCP-агент предложил:
// 1. padding: 10px 20px (лучший affordance)
// 2. padding: 12px 24px + box-shadow (акцент)
// 3. padding: 8px 16px + transform:scale(1.02) на hover

Фишка в том, что изменения применяются через временные overlay, а не сразу в код. Для быстрого прототипирования — удобно, но в продакшне такой подход пока вызывает вопросы.

Где собака зарыта

Основные проблемы текущей реализации:

1. RAG-интеграция хромает
   Агенты не имеют доступа к вашей codebase (в отличие от того же Cursor), поэтому suggestions часто generic.

2. Перформанс
   Включение MCP добавляет ~200-300ms на каждый DOM operation. На сложных SPA это заметно.

3. Нет интеграции с vite/webpack
   Все изменения остаются в браузере, что ломает привычный workflow с HMR.

Любопытно, что в issues уже есть пул-реквест от кого-то из команбы Vercel — видимо, они присматриваются к технологии для своего AI SDK.

Стоит ли пробовать?

Мой личный чеклист:

• ✅ Если экспериментируешь с AI coding agents
• ✅ Для образовательных проектов с учениками
• ❌ Для продакшн-разработки (пока)
• ❌ Если работаешь с сложным state-менеджментом (Redux, MobX)

Установка простая — достаточно клонировать репозиторий и добавить флаг в Chrome:

chrome://flags/#enable-experimental-web-platform-features

Но имейте в виду: это не замена обычным DevTools, а скорее research sandbox. Лично я буду следить за развитием Agent Protocol — если его подхватят major-игроки вроде GitHub Copilot, может получиться интересный симбиоз.

Пока же советую попробовать на pet-проектах и посмотреть, впишется ли такой workflow в ваш стиль работы. У меня, например, после двух недель тестов остались смешанные чувства — идея перспективная, но implementation пока сыровата.

Попробуй сам: Cursor — AI-редактор для разработчиков.

Источник: https://github.com/ChromeDevTools/chrome-devtools-mcp