Chrome DevTools for agents — это набор инструментов, который расширяет возможности Chrome DevTools для ваших рабочих процессов программирования ИИ. Установив Chrome DevTools for agents, вы получаете доступ к:
- MCP Server : Подключает вашего ИИ-агента к работающему экземпляру браузера, используя протокол контекста модели с открытым исходным кодом.
- Chrome DevTools CLI : интерфейс для прямого взаимодействия с браузером из терминала.
- Навыки работы с агентом : Инструкции от экспертов, обучающие вашего агента координации работы нескольких инструментов для решения сложных задач, таких как обеспечение доступности или отладка производительности.
В контексте веб-разработки, Chrome DevTools для агентов интегрирует возможности отладки в вашего ИИ-агента.
Например, агент может использовать инструменты для записи и анализа трассировок производительности, чтобы оценить производительность веб-сайта и выявить потенциальные возможности для улучшения. Помимо веб-разработки, DevTools для агентов также позволяет вашему агенту просматривать работающий веб-сайт, а не просто получать статический HTML-код.
Настраивать
В этом руководстве показано, как настроить инструменты разработчика Chrome для агентов, чтобы помочь вашему агенту-программисту контролировать и проверять работающий в режиме реального времени браузер Chrome.
Используйте пакет chrome-devtools-mcp для управления и проверки работающего браузера Chrome из вашего агента разработки (например, Gemini, Claude, Cursor или Copilot). Обратите внимание, что хотя Chrome DevTools для агентов предоставляет полный набор инструментов, CLI поддерживает только целевое подмножество для автоматизации на основе командной оболочки.
Поддерживаемые IDE и модели
Chrome DevTools для агентов поддерживает любые инструменты или IDE, поддерживающие протокол MCP. Сюда входят Antigravity, Gemini CLI, Claude Code, Cursor, Copilot и многие другие.
Вопросы безопасности
Поскольку ваш агент сможет просматривать страницы, к которым он получает доступ, и взаимодействовать с ними, он сможет эффективно действовать от вашего имени, если вы подключите его к браузеру с активной, аутентифицированной сессией. Избегайте передачи конфиденциальной или личной информации, которой вы не хотите делиться с агентами.
Предварительные требования
Перед установкой Chrome DevTools для агентов убедитесь, что ваша среда соответствует следующим требованиям:
Для настройки Chrome DevTools для агентов выберите метод, соответствующий вашей предпочтительной среде разработки. Некоторые агенты требуют ручной установки, в то время как другие поставляются с предустановленными инструментами.
Антигравитация
Инструменты разработчика Chrome для агентов поставляются в комплекте с Antigravity 2.0 . Вы можете начать использовать его немедленно, используя подагент браузера . Попробуйте использовать команду с косой чертой, например:
/browser Navigate to the Google homepage
Для доступа к специализированным навыкам агента мы рекомендуем установить плагин DevTools на этапе сборки с помощью Google при первоначальной настройке или в настройках приложения. Для получения дополнительной информации ознакомьтесь с документацией по субагенту Antigravity Browser .
Установка с помощью командной строки
Для настройки Chrome DevTools для агентов можно использовать конфигурационный файл JSON или команду CLI для прямой установки сервера, если ваш агент поддерживает эту функцию. Некоторые агенты также предлагают официальные расширения или плагины, которые включают навыки агента — подробные инструкции, помогающие агенту использовать функции DevTools.
Если вашего агента нет в этом списке, вы можете найти инструкцию по его установке в репозитории Chrome DevTools for Agents на GitHub .
Чтобы добавить инструменты разработчика Chrome для агентов к агенту командной строки, используйте встроенные команды CLI для вашего конкретного агента:
Gemini CLI
Установите расширение Gemini CLI, включающее пакет MCP и сопутствующие навыки, используя следующую команду:
# Gemini extension (MCP+Skills)
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp
Установите только пакет MCP с помощью следующей команды:
# MCP only
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
Кодекс Клода
Для установки Chrome DevTools для агентов в качестве плагина Claude Code используйте следующие команды с косой чертой в Claude Code. Добавьте реестр Marketplace:
/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
Установите плагин из реестра Marketplace:
/plugin install chrome-devtools-mcp@chrome-devtools-plugins
Для получения более подробной информации посетите официальную страницу плагина Claude в Chrome DevTools .
Кодекс
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
Установка с использованием конфигурации JSON.
Для других агентов, поддерживающих ключ конфигурации mcpServers , добавьте эту запись вручную и обязательно установите DevTools для агентов с помощью npm i chrome-devtools-mcp .
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": ["-y", "chrome-devtools-mcp@latest"]
}
}
}
Установка в других агентах
Чтобы настроить работу с агентом, которого нет в списке, см. репозиторий Chrome DevTools MCP на GitHub .
Проверьте свою настройку.
Введите следующую команду в своем агенте, чтобы проверить, все ли работает:
Check the performance of https://developers.chrome.com
Ваш агент должен открыть окно браузера и записать трассировку производительности.
Устранение неполадок в вашей настройке
Если ваш агент не может запустить инструменты, но имеет доступ к навыкам Chrome DevTools, он может попытаться исправить проблему автоматически. Если этого не происходит, вы можете явно запросить у агента следующее:
Use the Chrome DevTools troubleshooting skill to fix my setup.
Или вы можете уточнить:
I'm having trouble with Chrome DevTools for agents. I tried to run [Tool Name]
but got the error: [Error Message]. I am on [OS Name]. Use the Chrome DevTools
troubleshooting skill to fix my setup.
Расширенная конфигурация
Вот еще несколько способов, которыми ваш агент может получить доступ к браузеру.
Настройка безмониторного режима
Если вы хотите выполнять фоновые задачи без видимого окна браузера, вы можете запустить Chrome в безголовом режиме (без пользовательского интерфейса). Добавьте флаг --headless к аргументам вашего сервера:
{
"mcpServers": {
"chrome-devtools": {
"command": "npx",
"args": [
"-y",
"chrome-devtools-mcp@latest",
"--headless"
]
}
}
}
Подключиться к существующей сессии браузера
По умолчанию DevTools для агентов запускает новый экземпляр Chrome. Однако вы можете подключить своего агента к существующей сессии браузера, используя флаг --autoConnect . Это особенно полезно, если вашему агенту необходимо расследовать проблему, доступ к которой ограничен входом в систему или уже запущенной сессией.
Существует два способа подключения к существующей сессии:
Использовать автоматическое подключение (Chrome 144+)
Если для сервера Chrome DevTools MCP указана опция --autoConnect , сервер MCP подключится к активному экземпляру Chrome и запросит сеанс удаленной отладки.
- В запущенном браузере Chrome перейдите по адресу
chrome://inspect/#remote-debugging, чтобы включить удаленную отладку. Обновите конфигурацию MCP, добавив флаг
--autoConnect:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--autoConnect"] } } }Отправьте запрос своему агенту. Chrome отобразит диалоговое окно с запросом разрешения пользователя на проведение сеанса удаленной отладки. Нажмите «Разрешить» .
Подключитесь вручную, используя порт удаленной отладки.
Если вы не можете использовать --autoConnect (например, если запускаете агент в изолированной среде), вы можете запустить Chrome вручную, указав порт отладки. Вот пример (для macOS):
Запустите браузер Chrome с включенным портом удаленной отладки. В целях безопасности также необходимо указать пользовательский каталог данных.
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stableНастройте свой агент для подключения с использованием параметра
--browser-url:{ "mcpServers": { "chrome-devtools": { "command": "npx", "args": [ "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222" ] } } }