Интеграция ИИ-агентов с состоянием приложения через протокол WebMCP в Chrome DevTools

Логика понятна: DOM показывает только отрендеренный результат, но полностью игнорирует внутреннее состояние фреймворка, JS-сигналы и зависимости. В Chrome DevTools для агентов версии 0.25.0 завезли экспериментальную поддержку сторонних инструментов разработки через протокол WebMCP. Теперь библиотеки и фреймворки могут напрямую скармливать агентам свой внутренний контекст выполнения, избавляя их от необходимости гадать по разметке.

Протокол WebMCP и регистрация инструментов на клиенте

Вместо того чтобы заставлять ИИ парсить DOM, новый стандарт WebMCP предлагает взаимодействовать с веб-приложениями через машиночитаемые действия. Под капотом Chrome DevTools MCP server ищет кастомные инструменты через событие devtoolstooldiscovery на глобальном объекте window. Это событие триггерится автоматически при навигации или смене страницы, а также вызывается вручную через MCP-инструмент list_3p_developer_tools.

Чтобы агент увидел ваши внутренние структуры данных, приложение или библиотека должны подписаться на это событие и вернуть ToolGroup — группу инструментов с описанием, схемой входных параметров и функцией выполнения.

Примерная схема регистрации очередного костыля для отладки выглядит так:

Учтите ограничение: несериализуемые объекты напрямую передавать между страницей и DevTools for agents нельзя. Исключение сделано только для DOM-элементов — DevTools сопоставляет их по UID, полученным через take_snapshot.

Отладка Angular и React без парсинга DOM

Агент вызывает зарегистрированный инструмент через execute_3p_developer_tool, а DevTools валидирует входные параметры по описанной схеме. Если нужно выполнить сложную цепочку действий без лишних сетевых транзакций между агентом и браузером, используется метод evaluate_script — агент просто передает кусок JS-кода для выполнения прямо на странице.

Google уже обкатал эту схему совместно с командой Angular. Для агентов выкатили два инструмента:

1. Signal Graph — показывает связи между стейтом и представлением. Помогает агенту находить циклические зависимости, которые приводят к бесконечным обновлениям интерфейса.

2. Dependency Injection Graph — дает доступ к инжекторам во время выполнения. Поскольку DI-граф существует только в рантайме, статический анализ кода тут бесполезен. Без этого инструмента агент не поймет, почему упал DI-провайдер.

Разработчики React тоже начали экспериментировать со сторонними инструментами для DevTools for agents.

Как вызвать инструменты в сессии отладки

Для работы со сторонними инструментами вам понадобятся вызовы к MCP-серверу DevTools. Сначала запрашиваем список доступных методов, затем дергаем нужный:

Если вы надеетесь, что ИИ-агенты теперь сами починят все ваши баги в рантайме без вашего участия — снимите розовые очки. Без вменяемой разметки инструментов и понимания жизненного цикла приложения вы получите только бесконечный цикл выполнения и счета за токены. Пишите тесты и делайте бэкапы перед каждым деплоем.