Инструменты разработчика Chrome для агентов включают интерфейс командной строки (CLI), который позволяет вашему агенту-программисту или вам запускать инструменты разработчика как стандартные команды оболочки. Вместо динамического вызова инструментов через MCP-сервер агент записывает те же действия в виде команд оболочки и может объединить их в скрипт, который вы можете перезапустить в любое время. Например, агент может сгенерировать такой скрипт:
chrome-devtools new_page "https://example.com"
chrome-devtools take_snapshot 1
chrome-devtools fill 1 "1_4" "hello"
Сервер MCP и CLI подключаются к одному и тому же движку – постоянному фоновому демону, который взаимодействует с Chrome через Chrome DevTools Protocol (CDP). Разница заключается в том, как агент обращается к этой модели:
- MCP-сервер. Агент подключается через стандартный ввод/вывод с помощью JSON-RPC и обрабатывает каждый инструмент браузера как интерактивный вызов функции.
- CLI. Агент выполняет команды оболочки непосредственно в том же фоновом демоне.
С помощью CLI можно:
- Сохранение рабочего процесса. Превратите действия, которые агент выполнил во время сеанса отладки, в скрипт, который можно использовать повторно.
- Воспроизведение состояния приложения. Повторно запустите скрипт, чтобы вернуть браузер в известное состояние перед повторной отладкой.
- Пакетные действия. Выполняйте последовательность команд навигации, ввода, эмуляции и проверки без необходимости вести диалог между каждым шагом.
- Запускайте сценарии командной строки без ИИ-агента. Выполняйте сгенерированные сценарии командной строки из любого терминала, дочерней оболочки или контейнера непрерывной интеграции, который может выполнять сценарии командной строки, без активного сеанса LLM или клиента MCP.
Выберите между CLI и сервером MCP
Выбор между CLI и MCP-сервером – это инженерное решение, которое зависит от стоимости, контекста и рабочего процесса.
- Стоимость окна контекста. При регистрации MCP-сервера каждое определение инструмента и схема JSON добавляются в системный запрос LLM в каждом разговоре. При использовании навыка CLI агент загружает только компактную сводку Markdown и платит за токены, когда решает прочитать навык полностью и создать нужные команды. Для длинных многоэтапных сеансов агента эта разница увеличивает как стоимость, так и задержку.
- Исследование и выполнение. Инструменты MCP отлично подходят для динамической отладки, когда ни вы, ни агент ещё не знаете, что нужно проверить. Поскольку агент знает обо всех доступных инструментах, он с большей вероятностью будет использовать их для достижения своей цели. Если путь уже известен, CLI позволяет выполнять только необходимые шаги.
- Повторное использование. Вы можете сохранить скрипт CLI, повторно использовать его в навыке или запустить вручную вне цикла агента. Это невозможно сделать с помощью вызовов MCP-сервисов.
| Использовать MCP-сервер, когда | Используйте CLI, если: |
|---|---|
| Вы изучаете неизвестную проблему и вам нужен полный набор инструментов. | Вы уже знаете, что нужно делать, и хотите повторить эти действия. |
| Вам нужно решать проблемы в реальном времени и глубоко анализировать работу браузера. | Вам нужны навыки агента, эффективно использующие токены, или автоматизация на основе терминала. |
| Ваш агент работает в IDE или клиенте с поддержкой MCP. | Ваша среда не поддерживает MCP-клиенты. |
При использовании CLI учитывайте следующее:
- Поддержка инструментов. CLI поддерживает большинство инструментов разработчика Chrome для агентов, предназначенных для автоматизации на основе оболочки. Полный список команд приведен в справочнике по навыкам CLI.
- Неявный запуск. Фоновый сервер запускается автоматически при первом использовании. Вам не нужно выполнять команды
start,statusилиstopперед каждой командой. - Сохранение состояния. Состояние браузера сохраняется между командами, поэтому страница, открытая в одной команде, будет доступна в следующей, если она не была явно закрыта.
- Идентификаторы страниц и уникальные идентификаторы элементов. В большинстве команд в качестве первого аргумента используется идентификатор страницы. Чтобы найти его, выполните команду
chrome-devtools list_pages, а чтобы получить UID элементов, с которыми вы хотите взаимодействовать, –chrome-devtools take_snapshot. - Формат вывода. По умолчанию используется обычный текст в формате Markdown. Передайте
--output-format=json, если хотите использовать результаты в других скриптах или конвейерах непрерывной интеграции. - Доступ к файлам. По умолчанию у CLI есть полный доступ к файловой системе для сохранения параметров и файла
upload_file. Передайте--allowUnrestrictedPaths=false, чтобы ограничить доступ к файлам временным каталогом ОС. - Lighthouse в CI. Вы можете запустить
lighthouse_auditиз CLI, но автономный Lighthouse CLI и его GitHub Actions больше подходят, если вам нужны только оценки Lighthouse в CI. - Более простая абстракция, чем скрипты автоматизации браузера. В отличие от написания полных скриптов Puppeteer или Playwright на JavaScript или TypeScript, DevTools CLI предоставляет ограниченный, узкоспециализированный API. Этот синтаксис оболочки проще для чтения и поддержки людьми, и его значительно проще надежно генерировать даже моделям низкого уровня без галлюцинаций.
Требования
Прежде чем использовать CLI, убедитесь, что у вас есть:
- Установлены инструменты разработчика Chrome для агентов. Следуйте руководству по началу работы. Плагины и расширения для агентов, например расширение Gemini CLI, включают агентные навыки и сервер MCP.
- CLI, доступный в вашей оболочке. Установка выполняется один раз и не является частью обычного рабочего процесса агента. Ознакомьтесь с инструкциями по установке.
- Навык
chrome-devtools-cli(устанавливается вместе с инструментами разработчика Chrome для агентов). Этот навык позволяет агенту писать сценарии командной строки и выполнять команды в CLI.
Структура команды
Команды имеют следующий формат: chrome-devtools <tool> [arguments] [flags].
Обязательные аргументы являются позиционными, а необязательные используют флаги. Чтобы получить подробную информацию, используйте --help с любой командой.
Пример:
chrome-devtools new_page "https://example.com" # Open a page
chrome-devtools list_pages # Find the page ID
chrome-devtools take_snapshot 1 # Get element UIDs for page 1
chrome-devtools fill 1 "1_4" "hello" # Fill an input
chrome-devtools click 1 "1_7" --includeSnapshot true
chrome-devtools list_console_messages 1 --types error
chrome-devtools take_screenshot 1 --filePath "result.png"
Примеры использования интерфейса командной строки инструментов разработчика в Chrome
Поручите агенту записать уже найденные шаги в виде скрипта, чтобы не решать одну и ту же задачу в браузере заново в каждом сеансе.
Как сохранить сеанс отладки в виде скрипта
После сеанса отладки с использованием MCP вы не можете гарантировать, что та же проблема не возникнет снова. Чтобы не объяснять заново, как воспроизвести проблему, попросите агента записать выполненные им действия.
Пример запроса:
Please write a chrome-devtools CLI script for this user flow, and save it as test.sh.
Пример выполнения агента. Агент анализирует действия по навигации, вводу и проверке, которые он выполнил во время сеанса, и преобразует их в последовательность команд chrome-devtools, например new_page, take_snapshot, fill, click и list_console_messages. Скрипт будет сохранен как test.sh. В следующий раз, когда вы будете отлаживать эту область, вы можете указать агенту на скрипт, чтобы снова достичь того же состояния, или запустить его вне цикла агента для отладки вручную.
Воспроизведите состояние приложения перед началом анализа
Агенту сложно каждый раз воссоздавать в разговоре сложные состояния, такие как многоэтапная оплата или отфильтрованная панель управления. Используйте сохраненный скрипт в качестве отправной точки для нового анализа.
Пример запроса:
Run ./scripts/checkout-flow.sh to get the browser into the payment step, then check why the "Pay now" button stays disabled after I select Google Pay.
Пример выполнения агента. Агент запускает скрипт, который переходит к оформлению заказа, заполняет форму адреса и выбирает вариант доставки. Поскольку состояние браузера сохраняется между командами, агент использует take_snapshot и evaluate_script на той же странице, чтобы проверить состояние кнопки и обработчики событий, прикрепленные к селектору оплаты.
Пакетная визуальная проверка в разных окнах просмотра
Проверка изменений макета на экранах разных размеров – это повторяющийся процесс, который обычно выполняется вручную. Попросите агента написать скрипт, который применяет настройки эмуляции и собирает доказательства для каждой из них за один запуск.
Пример запроса:
Write a chrome-devtools CLI script that opens http://localhost:3000/pricing, captures a full-page screenshot at 375x667, 768x1024, and 1920x1080, and saves them to ./screenshots with the viewport size in the filename.
Пример выполнения агента. Агент пишет цикл, который вызывает chrome-devtools emulate 1 --viewport "<size>", а затем chrome-devtools
take_screenshot 1 --fullPage true --filePath "./screenshots/pricing-<size>.png" для каждой области просмотра. Вы можете запускать скрипт после каждого изменения ССЦ, не обращаясь в службу поддержки.
Дымовой тест процесса, в котором нет доступного клиента MCP
Некоторые среды, такие как контейнеры непрерывной интеграции или заблокированные корпоративные системы, не поддерживают клиенты MCP. Практически каждый терминал, дочерняя оболочка, контейнер непрерывной интеграции и фреймворк агента поддерживают запуск стандартных сценариев командной строки и чтение stdout, что делает CLI подходящим для простых проверок в этих местах.
Пример запроса:
Create a shell script that opens the sign-up page on the staging URL passed as the first argument, submits the form with test data, and exits with a non-zero code if any console errors are logged. Use --output-format=json so the script can parse the result.
Пример выполнения агента. Агент пишет скрипт, который использует new_page, take_snapshot, fill и click, затем вызывает list_console_messages 1
--types error --output-format=json и анализирует выходные данные JSON, чтобы определить код выхода.
Упакуйте рабочий процесс в легкий навык
Если процесс полезен для разных проектов или участников команды, агент может упаковать скрипт в навык. Это навык CLI инструментов разработчика – легкий справочник, который позволяет агенту выполнять определенные команды браузера, не платя за все инструменты.
Пример запроса:
Turn ./scripts/checkout-flow.sh into a skill named "reproduce-checkout" with a short description of when to use it, so I can invoke it in future sessions.
Пример выполнения агента. Агент создает SKILL.md с названием, однострочным описанием того, когда применяется навык, и инструкциями, которые ссылаются на скрипт. В последующих сеансах агент читает навык полностью, только если задача соответствует его описанию.
Дальнейшие действия
- Полный список команд и флагов CLI приведен в справочнике по CLI.
- Чтобы настроить базовый сервер (режим без графического интерфейса, каналы, экспериментальные категории), ознакомьтесь с разделом Конфигурация.