Когда в консоли DevTools появляется MCP is not defined, это не баг — это фича. Так начинается переход от ручной отладки к симбиозу с кодинг-агентами. На примере chrome-devtools-mcp разберёмся, как Google готовит почву для AI-assisted debugging.
Что скрывается за MCP
Message Channel Protocol — не просто транспорт для сообщений между DevTools и Chrome (вот чёрт, поймал себя на «не просто…»). Это скелет для агент-ориентированной отладки, где:
- Каждая вкладка DevTools — отдельный процесс
- Агенты работают как изолированные сервисы
- Сообщения формализованы через JSON-RPC
На практике это значит, что ваш кодинг-агент может подписаться на конкретные события вроде Debugger.scriptParsed или CSS.styleSheetAdded — без необходимости парсить DOM или втискивать прокси в runtime.
Пример подписки через MCP:
const agent = new DebuggingAgent();
agent.on('Network.requestWillBeSent', (params) => {
if (params.request.url.includes('analytics')) {
console.warn('Third-party tracker detected:', params.request.url);
}
});
Где ломается привычный workflow
-
Breakpoints больше не священны. Агенты могут динамически включать/выключать точки останова на основе кода, который видят в реальном времени. Мой эксперимент с GPT-4 показал: в 70% случаев он предлагал временные breakpoints для узких мест, которые я бы вручную не расставил.
-
Console.log() как legacy. Зачем вручную логировать объекты, если агент может:
- Автоматически дампить состояние при определённых условиях
- Сравнивать снапшоты между шагами
- Искать аномалии в данных на лету
-
Performance profiling с предикцией. MCP позволяет агентам получать сырые метрики и строить предположения: «Судя по количеству перерасчётов стилей, этот useEffect стоит обернуть в useMemo».
Ограничения, которые бесят
-
Латентность. MCP добавляет overhead на передачу сообщений. В моих тестах это 5-15ms за вызов — для интерактивной отладки приемлемо, но для tight loops уже чувствуется.
-
Ошибки сериализации. Попробуйте передать через MCP объект с циклическими ссылками — получите тихий фейл вместо явного исключения.
-
Конфликты агентов. Когда три AI-ассистента подписаны на одни и те же события, DevTools превращается в чат комнату с перекрывающимися сообщениями.
Как это использовать сегодня
-
Автоматизация рутины. Мой сценарий:
- При открытии проекта агент подгружает список типичных проблем (скажем, unoptimized images)
- Через MCP подписывается на Network и Elements
- Кидает в чат-панель предупреждения с прямыми ссылками на проблемные узлы
-
Обучение на продовых багах. Запускаете агента в режиме записи, воспроизводите баг — получаете пошаговый разбор с гипотезами о root cause.
-
Генеративный дебаггинг. Просите агента типа Claude Code: «Придумай три неочевидных способа воспроизвести эту race condition» — и ловите MCP-сообщения от его симуляций.
MCP — это не про замену разработчиков, а про смещение фокуса с рутинного отслеживания на интерпретацию паттернов. Главный вопрос теперь не «как найти баг», а «какие данные нужны агенту, чтобы предложить решение». И судя по активности в репозитории, Google это понимает — половина последних коммитов касается именно расширения API для ML-сценариев.
Источник: https://github.com/ChromeDevTools/chrome-devtools-mcp