Chrome DevTools MCP: управление браузером и отладка в OpenCode 2.0

Оглавление

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

Обычный инструмент “веб-скрэпинга” загружает только сырой HTML. Если на странице работает современный фреймворк (React, Vue, Svelte, Angular), клиентский JavaScript просто не выполнится ваш агент увидит пустой <div id="root"></div>. Кроме того, агент не видит:

ошибки и предупреждения в консоли браузера;
заблокированные CORS-запросы или упавшие API-эндпоинты во вкладке Network;
фактический рендеринг верстки, перекрытия элементов и адаптивность на мобильных экранах;
поведение интерфейса при кликах, вводе текста или заполнении форм.

Chrome DevTools MCP решает частично эту проблему: он даёт агенту полноценный доступ к реальному Google Chrome через Chrome DevTools Protocol (CDP).

Что такое Chrome DevTools MCP
#

Chrome DevTools MCP — это официальный MCP сервер, разработанный командой Google Chrome DevTools.

MCP-сервер подключается к движку Chromium и открывает агенту те же возможности, которые мы используем каждый день в DevTools:

Инспекция DOM и дерева доступности: агент видит структуру страницы и уникальные идентификаторы элементов (UID) для взаимодействия.
Взаимодействие со страницей: клики, наведение курсора, ввод текста в поля, отправка форм и перетаскивание элементов.
Скриншоты и визуальный контроль: возможность сделать снимок всей страницы или конкретного блока, чтобы визуально оценить результат изменений.
Мониторинг консоли: чтение логов и перехват исключений JavaScript в рантайме.
Инспекция сетевых запросов: анализ заголовков, тел запросов/ответов, кодов статуса и таймингов.
Эмуляция устройств: переключение размеров экрана, эмуляция мобильных устройств и троттлинг сети.

OpenCode и настройка
#

В OpenCode 2.0 архитектура претерпела масштабные изменения: появился выделенный фоновый сервер-демон и Instant Hot Reloading.

Раньше добавление или изменение MCP-сервера требовало перезапуска всего CLI-клиента с потерей текущей ветки диалога. В OpenCode 2.0 конфигурационный файл постоянно отслеживается: вы просто сохраняете opencode.json или opencode.jsonc, и OpenCode на лету регистрирует новые инструменты за доли секунды без прерывания активной сессии.

Настройка в OpenCode
#

Для работы сервера требуется установленный Node.js (с утилитой npx), а также Google Chrome в системе.

Конфигурация добавляется в глобальный конфиг ~/.config/opencode/opencode.jsonc (или локальный файл opencode.json в корне вашего проекта).

Рассмотрим три основных варианта подключения.

Вариант 1. Автономный запуск в фоне (Headless) — базовый вариант
#

В этом режиме сервер сам запускает Chrome в фоновом режиме без открытия окон на рабочем столе. Отлично подходит для быстрой автоматизации, тестов и серфинга.

Добавьте в блок mcp вашего ~/.config/opencode/opencode.jsonc:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "chrome-devtools-mcp@latest",
        "--headless"
      ],
      "enabled": true
    }
  }
}

Вариант 2. С видимым окном браузера (No-Headless)
#

Если вам интересно видеть, что именно агент делает в браузере в реальном времени — куда кликает, что вводит и как листает страницы:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "chrome-devtools-mcp@latest",
        "--no-headless"
      ],
      "enabled": true
    }
  }
}

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

Вариант 3. Подключение к уже запущенному Chrome
#

Очень удобный сценарий, если вы хотите дать агенту доступ к уже открытой сессии с вашими куками, авторизациями на сайтах или локальным дев-сервером:

Запустите Chrome с флагом удаленной отладки в терминале:

# Для macOS
open -a "Google Chrome" --args --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-debug"


2. В `opencode.jsonc` укажите флаг `--browserUrl`:

```jsonc
{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "chrome-devtools": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222"
      ],
      "enabled": true
    }
  }
}

Настройка разрешений
#

В OpenCode по умолчанию для вызова сторонних инструментов может запрашиваться подтверждение. Чтобы агент не отвлекал вас вопросами на каждый клик или чтение консоли, можно настроить политику разрешений в opencode.jsonc:

{
  "permission": {
    "chrome-devtools_*": "allow"
  }
}

Если вы хотите подтверждать только действия, меняющие состояние (например, ввод текста или клики), но автоматически разрешать безопасные операции (чтение DOM, скриншоты):

{
  "permission": {
    "chrome-devtools_take_snapshot": "allow",
    "chrome-devtools_take_screenshot": "allow",
    "chrome-devtools_list_console_messages": "allow",
    "chrome-devtools_list_network_requests": "allow"
  }
}

Какие инструменты получает агент
#

После подключения сервер регистрирует такой набор инструментов:

1. Навигация и вкладки
#

navigate_page(url, type, ignoreCache) — переход по URL, перезагрузка страницы, шаг назад или вперед по истории.
new_page(url) — открытие новой вкладки.
list_pages() — список всех открытых вкладок с их ID, URL и заголовками.
select_page(pageId) — переключение активной вкладки.
close_page(pageId) — закрытие вкладки.
wait_for(condition) — ожидание определенного селектора, состояния сети (network idle) или тайм-аута.

2. Взаимодействие со страницей
#

take_snapshot() — создание компактного снимка дерева доступности (a11y/DOM). Каждый интерактивный элемент получает uid.
click(uid, dblClick) — клик по элементу по его uid.
hover(uid) — наведение курсора мыши.
fill(uid, value) — очистка поля ввода и набор текста.
fill_form(elements) — быстрое заполнение нескольких полей формы за один вызов.
press_key(key) — нажатие клавиши или шортката (Enter, Tab, Escape и т.д.).
upload_file(uid, filePath) — загрузка локального файла в <input type="file">.

3. Отладка и инспекция
#

take_screenshot(format, fullPage, filePath) — создание скриншота страницы (PNG, JPEG, WebP) или конкретного блока.
evaluate_script(script, args) — выполнение произвольного JavaScript в контексте страницы с возвратом результата.
list_console_messages(types) — получение логов консоли (log, warn, error) с трассировкой стека вызовов.
list_network_requests() — просмотр списка сетевых запросов, статусов и таймингов.
get_network_request(requestId) — детальный просмотр заголовков и тела конкретного запроса или ответа.

4. Эмуляция
#

emulate(viewport, userAgent, deviceScaleFactor, networkThrottling) — симуляция мобильных экранов, сенсорного ввода и медленного интернет-соединения.
resize_page(width, height) — изменение размеров вьюпорта.

Chrome DevTools MCP в связке с OpenCode - это удобно.

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

Что такое Chrome DevTools MCP#

OpenCode и настройка#

Настройка в OpenCode#

Вариант 1. Автономный запуск в фоне (Headless) — базовый вариант#

Вариант 2. С видимым окном браузера (No-Headless)#

Вариант 3. Подключение к уже запущенному Chrome#

Настройка разрешений#

Какие инструменты получает агент#

1. Навигация и вкладки#

2. Взаимодействие со страницей#

3. Отладка и инспекция#

4. Эмуляция#

Related