Опубликовано: 18 июня 2026 г.
Для эффективной отладки современного веб-приложения агенту искусственного интеллекта требуется не только исходный код; ему необходимо понимать, как приложение ведет себя во время выполнения.
Мы рады представить сторонние инструменты для разработчиков Chrome DevTools for agents . Теперь ваши приложения и фреймворки могут предоставлять ИИ-агентам прямой доступ к информации об их внутреннем состоянии. Это помогает агентам устанавливать связь между тем, что происходит на экране, и логикой, работающей за кулисами.
Цель: выйти за рамки статического анализа.
Современная веб-разработка строится на абстракциях — фреймворках, таких как Angular, React или Vue; CMS-платформах, таких как WordPress или Shopify; и библиотеках для CSS, 3D-графики или анимации. Хотя DevTools имеет прямой доступ к окончательно отрисованному DOM, «истина» приложения часто находится внутри внутреннего состояния фреймворка: иерархии компонентов, сигналов JavaScript или состояния бэкэнда.
Наша цель при разработке сторонних инструментов для разработчиков — предоставить любой библиотеке возможность делиться этим богатым, полезным контекстом с агентами искусственного интеллекта. Таким образом, агенты смогут отлаживать проблемы, которые ранее были для них «невидимы», например:
- Иерархия компонентов: сопоставляет элемент DOM на странице непосредственно с соответствующим компонентом фреймворка и внутренним состоянием.
- Внутренний анализ состояния: прямой доступ к состоянию сервера или содержимому базы данных в рамках сеанса отладки.
Как это работает: API для поиска
Сторонние инструменты разработчика используют основанный на событиях JavaScript API. Сервер Chrome DevTools MCP обнаруживает эти инструменты, отправляя событие devtoolstooldiscovery глобальному объекту window . Событие devtoolstooldiscovery автоматически отправляется при каждой навигации по странице или при изменении выбранной страницы, и может быть отправлено явно с помощью инструмента MCP list_3p_developer_tools .
Разработайте собственные инструменты
Чтобы предоставить доступ к инструментам из вашей библиотеки или приложения, вам необходимо отслеживать это событие обнаружения и отвечать объектом ToolGroup .
window.addEventListener('devtoolstooldiscovery', (event) => {
event.respondWith({
name: "My Library Tools",
description: "Tools for inspecting internal library state",
tools: [
{
name: "getInternalState",
description: "Returns the current internal state of the framework.",
inputSchema: {
type: "object",
properties: {
componentId: { type: "string" }
}
},
execute: async (input) => {
// Access your framework's internal registry
return myFramework.getState(input.componentId);
}
}
]
});
});
Реализация осуществляется следующим образом:
- Определите схему: используйте JSON Schema для определения входных данных, которые ожидает ваш инструмент.
- Реализуйте логику: создайте функцию
execute, которая выполняется в контексте страницы и возвращает сериализуемые данные. - Элементы DOM: Несериализуемые объекты не могут передаваться между страницей и DevTools for agents. Элементы DOM являются исключением. Когда ваши инструменты возвращают элементы DOM, DevTools for agents автоматически сопоставляет их с теми же UID, которые используются инструментом
take_snapshot. Это позволяет вашему агенту взаимодействовать со всеми элементами страницы (независимо от того, поступают ли они из фреймворка или из снимка страницы) одинаковым образом.
Взаимодействие с инструментами с помощью MCP.
После регистрации инструментов ваш агент разработки сможет взаимодействовать с ними через DevTools для агентов. Инструмент MCP list_3p_developer_tools возвращает описания сторонних инструментов, доступных на странице. Кроме того, при изменении выбранной страницы (например, после перехода по ссылке) DevTools добавляет список доступных инструментов к ответу инструмента MCP.
Для использования этих инструментов ваш агент вызывает execute_3p_developer_tool . DevTools автоматически проверяет входные параметры, чтобы убедиться, что они соответствуют определению инструмента.
Вы также можете вызывать инструменты с помощью инструмента MCP evaluate_script . Ваш агент предоставляет фрагмент кода JavaScript, который DevTools выполняет на странице. Этот фрагмент может вызывать сторонние инструменты разработчика и немедленно использовать их результаты для дальнейших вычислений.
Использование evaluate_script эффективно для сложной отладки, поскольку позволяет агентам:
- Композиция операций : объединение нескольких шагов в одно выполнение.
- Обработка несериализуемых значений : обработка объектов или сигналов, специфичных для фреймворка, непосредственно в контексте страницы.
- Оптимизация производительности : минимизация накладных расходов на сериализацию и предотвращение многократных обменов данными между агентом и браузером.
Первые успехи: интеграция с Angular.
Мы сотрудничаем с командой Angular, которая внедрила два сторонних инструмента для разработчиков:
- Инструмент Signal Graph: предоставляет агентам возможность визуализировать взаимосвязи между состоянием и представлением, помогая им выявлять зависимости, вызывающие бесконечные циклы или сбои в обновлениях.
- Инструмент Dependency Injection (DI) Graph: предоставляет доступ к инструментам внедрения элементов, что позволяет агентам точно видеть, где предоставляется услуга, а где она отсутствует. Поскольку граф DI в Angular является конструкцией, работающей только во время выполнения, одного статического анализа недостаточно для отладки ошибок поставщика.
Команда React также начала экспериментировать со сторонними инструментами для разработчиков.
Создавайте будущее отладки с помощью агентов вместе с нами.
Эта экспериментальная функция доступна в инструментах разработчика Chrome для агентов, начиная с версии 0.25.0. Чтобы включить её, используйте флаг командной строки --categoryExperimentalThirdParty .
Если вы поддерживаете фреймворк, библиотеку или инструмент и хотите улучшить процесс отладки для агентов разработки, мы будем рады сотрудничеству:
- Ознакомьтесь с документацией: Техническое руководство на GitHub .
- Свяжитесь с нами: Мы ищем партнеров для доработки этих API и определения будущего веб-отладки с использованием ИИ. Вы можете создать заявку в репозитории GitHub, чтобы связаться с нами.
Присоединяйтесь к нам и вместе стройте будущее агентной веб-разработки!