Chrome DevTools научит ИИ-агентов видеть не только DOM, но и состояние приложения

В Chrome DevTools for agents появилась экспериментальная поддержка сторонних инструментов разработчика. Теперь приложения, фреймворки и библиотеки могут передавать ИИ-агентам внутренний контекст приложения во время выполнения.

Идея простая: для отладки современного веб-приложения агенту нев достаточной степени видеть только исходный исходник и итоговый DOM. Важная часть состояния часто живёт внутри фреймворка или платформы: в иерархии компонентов, JavaScript-сигналах, серверном состоянии, данных CMS или внутренних структурах библиотек.

Зачем это нужно

Chrome DevTools и раньше имел доступ к итоговому DOM. Но DOM показывает уже отрисованный итог, а не всегда объясняет, почему приложение пришло именно к такому состоянию.

Сторонние инструменты должны дать агентам доступ к контексту, который обычно находится внутри фреймворков и библиотек. Например, они смогут:

• сопоставить DOM-элемент на странице с компонентом фреймворка и его внутренним состоянием;

• получить доступ к серверному состоянию или данным базы в рамках сеанса отладки.

По замыслу Chrome, такой механизм должен помочь агентам разбирать проблемы, которые плохо видны при одном только статическом анализе кода.

Как работает Discovery программный интерфейс

Сторонние инструменты используют событийный JavaScript программный интерфейс.

Chrome DevTools MCP server находит такие инструменты через событие devtoolstooldiscovery на глобальном объекте window. Событие автоматически отправляется при навигации по странице или при смене выбранной страницы. Его также можно вызвать явно через MCP-инструмент list_3p_developer_tools.

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

В реализации нужно:

1. описать входные параметры через JSON Schema;

2. реализовать функцию execute, которая выполняется в контексте страницы;

3. вернуть сериализуемые данные.

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

Как агент работает с инструментами

После регистрации агент может получить список доступных сторонних инструментов через list_3p_developer_tools. Для запуска конкретного инструмента используется execute_3p_developer_tool. DevTools одновременно проверяет входные параметры по описанной схеме.

Есть и иной метод — evaluate_script. Агент передаёт JavaScript-фрагмент, который DevTools выполняет на странице. Это нужно для более сложной отладки: можно объединять некоторое количество операций, функционировать с объектами фреймворка прямо в контексте страницы и уменьшать количество обменов между агентом и браузером.

Первые интеграции: Angular и React

Chrome уже сотрудничает с командой Angular. В Angular реализовали два сторонних инструмента для DevTools for agents.

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

Dependency Injection Graph открывает агенту доступ к инжекторам. Так можно увидеть, где предоставляется сервис и где он отсутствует. Для Angular это важно: DI-граф существует только во время выполнения, поэтому одной статической проверки кода недостаточно для отладки ошибок провайдеров.

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

Как попробовать

Опция пока экспериментальная. Она доступна в Chrome DevTools for agents начиная с версии 0.25.0.

Для включения нужен флаг командной строки:

--categoryExperimentalThirdParty

Техническое описание программный интерфейс опубликовано в репозитории Chrome DevTools MCP.

Что это меняет

Это шаг от анализа исходников к отладке приложения в контексте выполнения. Если фреймворк или набор модулей умеют отдавать агенту своё внутреннее состояние, агент получает больше данных для диагностики: не только что отображается на странице, но и какая логика за этим стоит.

Пока это экспериментальная возможность, но сама идея важна для фронтенд-инструментов: DevTools начинают учитывать не только сценарии для разработчика-человека, но и сценарии, где часть отладки выполняет ИИ-агент.

Больше о том, как ИИ-инструменты переходят от экспериментов к рабочим сценариям разработки, поговорят на бесплатном уроке 29 июня в 20:00 — «Обзор ИИ-технологий для разработчиков: от идей до рабочих решений».