В Chrome DevTools for agents появилась экспериментальная поддержка сторонних инструментов разработчика. Теперь приложения, фреймворки и библиотеки могут передавать ИИ-агентам внутренний контекст приложения во время выполнения.
Идея простая: для отладки современного веб-приложения агенту недостаточно видеть только исходный код и итоговый DOM. Важная часть состояния часто живёт внутри фреймворка или платформы: в иерархии компонентов, JavaScript-сигналах, серверном состоянии, данных CMS или внутренних структурах библиотек.
Зачем это нужно
Chrome DevTools и раньше имел доступ к итоговому DOM. Но DOM показывает уже отрисованный результат, а не всегда объясняет, почему приложение пришло именно к такому состоянию.
Сторонние инструменты должны дать агентам доступ к контексту, который обычно находится внутри фреймворков и библиотек. Например, они смогут:
-
сопоставить DOM-элемент на странице с компонентом фреймворка и его внутренним состоянием;
-
получить доступ к серверному состоянию или данным базы в рамках сеанса отладки.
По замыслу Chrome, такой механизм должен помочь агентам разбирать проблемы, которые плохо видны при одном только статическом анализе кода.
Как работает Discovery API
Сторонние инструменты используют событийный JavaScript API.
Chrome DevTools MCP server находит такие инструменты через событие devtoolstooldiscovery на глобальном объекте window. Событие автоматически отправляется при навигации по странице или при смене выбранной страницы. Его также можно вызвать явно через MCP-инструмент list_3p_developer_tools.
Чтобы открыть агенту собственные инструменты, библиотека или приложение должны подписаться на это событие и вернуть ToolGroup — группу инструментов с описанием, схемой входных параметров и функцией выполнения.
В реализации нужно:
-
описать входные параметры через JSON Schema;
-
реализовать функцию
execute, которая выполняется в контексте страницы; -
вернуть сериализуемые данные.
Несериализуемые объекты нельзя передавать между страницей и 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
Техническое описание API опубликовано в репозитории Chrome DevTools MCP.
Что это меняет
Это шаг от анализа исходников к отладке приложения в контексте выполнения. Если фреймворк или библиотека умеют отдавать агенту своё внутреннее состояние, агент получает больше данных для диагностики: не только что отображается на странице, но и какая логика за этим стоит.
Пока это экспериментальная возможность, но сама идея важна для фронтенд-инструментов: DevTools начинают учитывать не только сценарии для разработчика-человека, но и сценарии, где часть отладки выполняет ИИ-агент.
Больше о том, как ИИ-инструменты переходят от экспериментов к рабочим сценариям разработки, поговорят на бесплатном уроке 29 июня в 20:00 — «Обзор ИИ-технологий для разработчиков: от идей до рабочих решений».
ссылка на оригинал статьи https://habr.com/ru/articles/1049120/