переведено ИИ

Chrome DevTools для агентов

Chrome DevTools для агентов (chrome-devtools-mcp) позволяет вашему кодирующему агенту (такому как Antigravity, Claude, Cursor или Copilot) управлять активным браузером Chrome и проверять его. Он выступает в роли сервера протокола Model-Context-Protocol (MCP), предоставляя вашему ИИ-ассистенту для кодирования полный доступ к возможностям Chrome DevTools для надежной автоматизации, глубокой отладки и анализа производительности. Также предоставлена CLI для использования без MCP.

Справочник по инструментам | История изменений | Участие в разработке | Устранение неполадок | Принципы проектирования

Ключевые особенности

Получение данных о производительности: Использует Chrome DevTools для записи трассировок и извлечения практически полезной информации о производительности.
Продвинутая отладка в браузере: Анализ сетевых запросов, создание снимков экрана и проверка сообщений консоли браузера (с трассировками стека, сопоставленными с исходным кодом).
Надежная автоматизация. Использует puppeteer для автоматизации действий в Chrome и автоматического ожидания результатов действий.

Отказы от ответственности

chrome-devtools-mcp раскрывает содержимое экземпляра браузера клиентам MCP, позволяя им проверять, отлаживать и изменять любые данные в браузере или DevTools. Избегайте передачи конфиденциальной или личной информации, которую вы не хотите делиться с клиентами MCP.

chrome-devtools-mcp официально поддерживает только Google Chrome и Chrome for Testing. Другие браузеры на базе Chromium могут работать, но это не гарантировано, и вы можете столкнуться с непредвиденным поведением. Используйте их по своему усмотрению. Мы стремимся предоставлять исправления и поддержку для последней версии Extended Stable Chrome.

Инструменты производительности могут отправлять URL-адреса трассировок в API Google CrUX для получения данных о реальном пользовательском опыте. Это помогает составить полную картину производительности, представляя полевые данные наряду с лабораторными. Эти данные собираются Отчетом о пользовательском опыте Chrome (CrUX). Чтобы отключить это, запускайте с флагом --no-performance-crux.

Статистика использования

Google собирает статистику использования (такую как частота успешного вызова инструментов, задержка и информация об окружении) для повышения надежности и производительности Chrome DevTools MCP.

Сбор данных включен по умолчанию. Вы можете отказаться от него, передав флаг --no-usage-statistics при запуске сервера:

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

Google обрабатывает эти данные в соответствии с Политикой конфиденциальности Google.

Сбор Google статистики использования для Chrome DevTools MCP не зависит от статистики использования браузера Chrome. Отключение метрик Chrome не автоматически отключает сбор для этого инструмента, и наоборот.

Сбор отключается, если установлены переменные среды CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS или CI.

Проверка обновлений

По умолчанию сервер периодически проверяет реестр npm на наличие обновлений и выводит уведомление, когда доступна более новая версия. Вы можете отключить эти проверки обновлений, установив переменную среды CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS.

Требования

Node.js версии LTS.
Chrome текущей стабильной версии или более новой.
npm

Начало работы

Добавьте следующую конфигурацию в ваш клиент MCP:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

[!NOTE] Использование chrome-devtools-mcp@latest гарантирует, что ваш клиент MCP всегда будет использовать последнюю версию сервера Chrome DevTools MCP.

Если вас интересуют только основные задачи работы с браузером, используйте режим --slim:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
    }
  }
}

Смотрите Справочник по урезанным инструментам.

Конфигурация клиента MCP

Amp

Следуйте инструкциям https://ampcode.com/manual#mcp и используйте приведенную выше конфигурацию. Вы также можете установить сервер Chrome DevTools MCP с помощью CLI:

amp mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Antigravity

Для использования сервера Chrome DevTools MCP следуйте инструкциям из документации Antigravity по установке пользовательского сервера MCP. Добавьте следующую конфигурацию в конфигурацию серверов MCP:

{
"mcpServers": {
  "chrome-devtools": {
    "command": "npx",
    "args": [
      "-y",
      "chrome-devtools-mcp@latest",
      "--browser-url=http://127.0.0.1:9222"
    ]
  }
}
}

Это позволит серверу Chrome DevTools MCP автоматически подключаться к браузеру, который использует Antigravity. Если вы используете другой порт, не 9222, убедитесь, что изменили его соответствующим образом.

Chrome DevTools MCP не будет автоматически запускать экземпляр браузера при использовании этого подхода, поскольку сервер Chrome DevTools MCP подключается к встроенному браузеру Antigravity. Если браузер еще не запущен, вам необходимо запустить его вручную, нажав на значок Chrome в правом верхнем углу.

Claude Code

Установка через CLI (только MCP)

Используйте CLI Claude Code для добавления сервера Chrome DevTools MCP (руководство):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Установка как плагина (MCP + Навыки)

[!NOTE] Если вы ранее устанавливали Chrome DevTools MCP для Claude Code, сначала удалите его из файлов установки и конфигурации.

Чтобы установить Chrome DevTools MCP с навыками, добавьте реестр маркетплейса в Claude Code:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

Затем установите плагин:

/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Перезапустите Claude Code, чтобы загрузились сервер MCP и навыки (проверьте с помощью /skills).

[!TIP] Если установка плагина завершается ошибкой Failed to clone repository (например, из-за проблем с HTTPS-подключением за корпоративным файрволом), ознакомьтесь с руководством по устранению неполадок, чтобы узнать о возможных решениях, или используйте вышеописанный метод установки через CLI.

Cline

Следуйте инструкциям https://docs.cline.bot/mcp/configuring-mcp-servers и используйте приведенную выше конфигурацию.

Codex

Следуйте руководству по настройке MCP, используя стандартную конфигурацию из примера выше. Вы также можете установить сервер Chrome DevTools MCP с помощью CLI Codex:

codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

В Windows 11

Настройте расположение установки Chrome и увеличьте время ожидания запуска, обновив файл .codex/config.toml и добавив следующие параметры env и startup_timeout_ms:

[mcp_servers.chrome-devtools]
command = "cmd"
args = [
  "/c",
  "npx",
  "-y",
  "chrome-devtools-mcp@latest",
]
env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

Command Code

Используйте CLI Command Code для добавления сервера Chrome DevTools MCP (руководство по MCP):

cmd mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Copilot CLI

Запустите Copilot CLI:

copilot

Запустите диалог для добавления нового сервера MCP, выполнив:

/mcp add

Настройте следующие поля и нажмите CTRL+S для сохранения конфигурации:

Имя сервера: chrome-devtools
Тип сервера: [1] Local (Локальный)
Команда: npx -y chrome-devtools-mcp@latest

Copilot / VS Code

Установка как плагина (Рекомендуется)

Самый простой способ начать работу — установить chrome-devtools-mcp как плагин для агента. Он объединяет сервер MCP и все навыки, так что ваш агент получит как инструменты, так и экспертные рекомендации по их эффективному использованию.

Откройте Палитру команд (Cmd+Shift+P на macOS или Ctrl+Shift+P на Windows/Linux).
Найдите и выполните команду Chat: Install Plugin From Source (Чат: Установить плагин из исходного кода).
Вставьте название нашего репозитория: ChromeDevTools/chrome-devtools-mcp.

На этом все! Теперь ваш агент оснащен возможностями Chrome DevTools.

Установка как сервера MCP (только MCP)

Нажмите кнопку для установки:

Или установите вручную:

Следуйте руководству по конфигурации MCP в VS Code, используя стандартную конфигурацию, приведенную выше, или воспользуйтесь CLI:

Для macOS и Linux:

code --add-mcp '{"name":"io.github.ChromeDevTools/chrome-devtools-mcp","command":"npx","args":["-y","chrome-devtools-mcp"],"env":{}}'

Для Windows (PowerShell):

code --add-mcp '{"""name""":"""io.github.ChromeDevTools/chrome-devtools-mcp""","""command""":"""npx""","""args""":["""-y""","""chrome-devtools-mcp"""]}'

Cursor

Нажмите кнопку для установки:

Или установите вручную:

Перейдите в Настройки Cursor -> MCP -> Новый MCP-сервер. Используйте конфигурацию, приведенную выше.

Factory CLI

Используйте Factory CLI для добавления сервера Chrome DevTools MCP (руководство):

droid mcp add chrome-devtools "npx -y chrome-devtools-mcp@latest"

Gemini CLI

Установите сервер Chrome DevTools MCP, используя Gemini CLI.

Для проекта:

# Either MCP only:
gemini mcp add chrome-devtools npx chrome-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ChromeDevTools/chrome-devtools-mcp

Глобально:

gemini mcp add -s user chrome-devtools npx chrome-devtools-mcp@latest

Либо следуйте руководству по MCP и используйте стандартную конфигурацию, приведенную выше.

Gemini Code Assist

Следуйте руководству по настройке MCP с использованием стандартной конфигурации, приведенной выше.

Grok Build CLI

grok mcp add chrome-devtools npx chrome-devtools-mcp@latest

Смотрите документацию для получения дополнительных опций.

JetBrains AI Assistant и Junie

Перейдите в Настройки | Инструменты | AI Assistant | Model Context Protocol (MCP) -> Добавить. Используйте конфигурацию, приведенную выше. Аналогично chrome-devtools-mcp можно настроить для JetBrains Junie в Настройки | Инструменты | Junie | MCP Settings -> Добавить. Используйте конфигурацию, приведенную выше.

Kiro

В Настройках Kiro перейдите в Configure MCP > Open Workspace or User MCP Config > Используйте фрагмент конфигурации, приведенный выше.

Или из Панели активности IDE > Kiro > MCP Servers > Click Open MCP Config. Используйте фрагмент конфигурации, приведенный выше.

Katalon Studio

Сервер Chrome DevTools MCP может использоваться с Katalon StudioAssist через MCP-прокси.

Шаг 1: Установите MCP-прокси, следуя руководству по настройке MCP-прокси.

Шаг 2: Запустите сервер Chrome DevTools MCP через прокси:

mcp-proxy --transport streamablehttp --port 8080 -- npx -y chrome-devtools-mcp@latest

Примечание: Возможно, потребуется выбрать другой порт, если 8080 уже занят.

Шаг 3: В Katalon Studio добавьте сервер в StudioAssist со следующими настройками:

URL-адрес подключения: http://127.0.0.1:8080/mcp
Тип транспорта: HTTP

После подключения инструменты Chrome DevTools MCP станут доступны в StudioAssist.

Mistral Vibe

Добавьте в ~/.vibe/config.toml:

[[mcp_servers]]
name = "chrome-devtools"
transport = "stdio"
command = "npx"
args = ["chrome-devtools-mcp@latest"]

OpenCode

Добавьте следующую конфигурацию в ваш файл opencode.json. Если у вас его нет, создайте его по пути ~/.config/opencode/opencode.json (руководство):

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

Qoder

В Настройках Qoder перейдите в MCP Server > + Добавить > Используйте фрагмент конфигурации, приведенный выше.

Либо следуйте руководству по MCP и используйте стандартную конфигурацию, приведенную выше.

Qoder CLI

Установите сервер Chrome DevTools MCP, используя Qoder CLI (руководство):

Для проекта:

qodercli mcp add chrome-devtools -- npx chrome-devtools-mcp@latest

Глобально:

qodercli mcp add -s user chrome-devtools -- npx chrome-devtools-mcp@latest

Visual Studio

Нажмите кнопку для установки:

Warp

Перейдите в Настройки | AI | Управление MCP-серверами -> + Добавить, чтобы добавить MCP-сервер. Используйте конфигурацию, приведенную выше.

Windsurf

Следуйте руководству по настройке MCP с использованием стандартной конфигурации, приведенной выше.

Ваш первый запрос

Введите следующий запрос в вашем MCP-клиенте, чтобы проверить, все ли работает:

Check the performance of https://developers.chrome.com

Ваш MCP-клиент должен открыть браузер и записать трассировку производительности.

[!NOTE] Сервер MCP автоматически запустит браузер, как только MCP-клиент использует инструмент, требующий запущенного экземпляра браузера. Само подключение к серверу Chrome DevTools MCP не приведет к автоматическому запуску браузера.

Инструменты

Если у вас возникли какие-либо проблемы, ознакомьтесь с нашим руководством по устранению неполадок.

Автоматизация ввода (10 инструментов)
click
drag
fill
fill_form
handle_dialog
hover
press_key
type_text
upload_file
click_at
Автоматизация навигации (6 инструментов)
close_page
list_pages
navigate_page
new_page
select_page
wait_for
Эмуляция (2 инструмента)
emulate
resize_page
Производительность (3 инструмента)
performance_analyze_insight
performance_start_trace
performance_stop_trace
Сеть (2 инструмента)
get_network_request
list_network_requests
Отладка (8 инструментов)
- evaluate_script
- get_console_message
- lighthouse_audit
- list_console_messages
- take_screenshot
- take_snapshot
- screencast_start
- screencast_stop
Память (11 инструментов)
- take_heapsnapshot
- close_heapsnapshot
- compare_heapsnapshots
- get_heapsnapshot_class_nodes
- get_heapsnapshot_details
- get_heapsnapshot_dominators
- get_heapsnapshot_duplicate_strings
- get_heapsnapshot_edges
- get_heapsnapshot_retainers
- get_heapsnapshot_retaining_paths
- get_heapsnapshot_summary
Расширения (5 инструментов)
- install_extension
- list_extensions
- reload_extension
- trigger_extension_action
- uninstall_extension
Сторонние (2 инструмента)
- execute_3p_developer_tool
- list_3p_developer_tools
WebMCP (2 инструмента)
- execute_webmcp_tool
- list_webmcp_tools

Конфигурация

Сервер Chrome DevTools MCP поддерживает следующие параметры конфигурации:

--autoConnect/ --auto-connect Если указан, автоматически подключается к локально запущенному браузеру (Chrome 144+) из каталога данных пользователя, определяемого параметром channel (по умолчанию используется stable). Требует запуска сервера удалённой отладки в экземпляре Chrome через chrome://inspect/#remote-debugging.
Тип: boolean
По умолчанию: false
--browserUrl/ --browser-url, -u Подключается к запущенному, подключаемому для отладки экземпляру Chrome (например, http://127.0.0.1:9222). Подробнее см.: https://github.com/ChromeDevTools/chrome-devtools-mcp#connecting-to-a-running-chrome-instance.
Тип: string
По умолчанию: false
--wsEndpoint/ --ws-endpoint, -w WebSocket-конечная точка для подключения к запущенному экземпляру Chrome (например, ws://127.0.0.1:9222/devtools/browser/). Альтернатива --browserUrl.
Тип: string
По умолчанию: false
--wsHeaders/ --ws-headers Пользовательские заголовки для WebSocket-подключения в формате JSON (например, '{"Authorization":"Bearer token"}'). Работает только с --wsEndpoint.
Тип: string
По умолчанию: false
--headless Запускать ли в headless-режиме (без пользовательского интерфейса).
Тип: boolean
По умолчанию: false
--executablePath/ --executable-path, -e Путь к пользовательскому исполняемому файлу Chrome.
Тип: string
По умолчанию: false
--isolated Если указан, создаёт временный каталог данных пользователя, который автоматически удаляется после закрытия браузера. По умолчанию false.
Тип: boolean
По умолчанию: false
--userDataDir/ --user-data-dir Путь к каталогу данных пользователя для Chrome. По умолчанию: $HOME/.cache/chrome-devtools-mcp/chrome-profile$CHANNEL_SUFFIX_IF_NON_STABLE
Тип: string
По умолчанию: false
--channel Указывает другой канал Chrome, который следует использовать. По умолчанию используется стабильный канал (stable).
Тип: string
Варианты: canary, dev, beta, stable
По умолчанию: false
--logFile/ --log-file Путь к файлу для записи отладочных логов. Установите переменную окружения DEBUG в * для включения подробных логов. Полезно для отправки отчётов об ошибках.
Тип: string
По умолчанию: false
--viewport Начальный размер окна просмотра для экземпляров Chrome, запускаемых сервером. Например, 1280x720. В headless-режиме максимальный размер составляет 3840x2160 пикселей.
Тип: string
По умолчанию: false
--proxyServer/ --proxy-server Конфигурация прокси-сервера для Chrome, передаваемая как --proxy-server при запуске браузера. Подробнее см. https://www.chromium.org/developers/design-documents/network-settings/.
Тип: string
По умолчанию: false
--acceptInsecureCerts/ --accept-insecure-certs Если включено, игнорирует ошибки, связанные с самоподписанными и просроченными сертификатами. Используйте с осторожностью.
Тип: boolean
По умолчанию: false
--experimentalPageIdRouting/ --experimental-page-id-routing Включать ли pageId для инструментов, действующих в контексте страницы, и маршрутизировать запросы по ID страницы (полезно для параллельных сессий агентов).
Тип: boolean
По умолчанию: false
--experimentalDevtools/ --experimental-devtools Включить ли автоматизацию через цели DevTools.
Тип: boolean
По умолчанию: false
--experimentalVision/ --experimental-vision Включить ли инструменты с координатной основой, такие как click_at(x,y). Обычно требует модели компьютерного зрения, способной генерировать точные координаты по скриншотам.
Тип: boolean
По умолчанию: false
--memoryDebugging/ --memory-debugging, -experimentalMemory Включить ли инструменты отладки памяти.
Тип: boolean
По умолчанию: false
--experimentalStructuredContent/ --experimental-structured-content Выводить ли структурированные форматированные данные.
Тип: boolean
По умолчанию: false
--experimentalIncludeAllPages/ --experimental-include-all-pages Включать ли все типы страниц (например, веб-вью или фоновые страницы) в список страниц.
Тип: boolean
По умолчанию: false
--experimentalScreencast/ --experimental-screencast Экспериментальные инструменты скринкаста (требуется ffmpeg). Установите ffmpeg (https://www.ffmpeg.org/download.html) и убедитесь, что он доступен в PATH сервера MCP.
Тип: boolean
По умолчанию: false
--experimentalFfmpegPath/ --experimental-ffmpeg-path Путь к исполняемому файлу ffmpeg для записи скринкаста.
Тип: string
По умолчанию: false
--categoryExperimentalWebmcp/ --category-experimental-webmcp Установите значение true для включения отладки инструментов WebMCP. Требуется Chrome 149+ со следующими флагами: --enable-features=WebMCP,DevToolsWebMCPSupport
Тип: boolean
По умолчанию: false
--chromeArg/ --chrome-arg Дополнительные аргументы для Chrome. Применяются только тогда, когда Chrome запускается chrome-devtools-mcp.
Тип: array
По умолчанию: false
--blockedUrlPattern/ --blocked-url-pattern Ограничивает сетевой доступ браузера, блокируя указанные шаблоны URL (используется https://urlpattern.spec.whatwg.org/). Тихо отсоединяется от целей с заблокированными URL при подключении и блокирует запросы времени выполнения (включая переходы и подресурсы). Принимает массив шаблонов.
Тип: array
По умолчанию: false
--allowedUrlPattern/ --allowed-url-pattern Ограничивает сетевой доступ браузера, разрешая только указанные шаблоны URL (используется https://urlpattern.spec.whatwg.org/). Требуется Chrome 149+. Тихо отсоединяется от целей с неразрешенными URL при подключении и блокирует запросы времени выполнения (включая переходы и подресурсы). Принимает массив шаблонов.
Тип: array
По умолчанию: false
--ignoreDefaultChromeArg/ --ignore-default-chrome-arg Явно отключает аргументы Chrome по умолчанию. Применяются только тогда, когда Chrome запускается chrome-devtools-mcp.
Тип: array
По умолчанию: false
--categoryEmulation/ --category-emulation Установите значение false, чтобы исключить инструменты, связанные с эмуляцией.
Тип: boolean
По умолчанию: true
--categoryPerformance/ --category-performance Установите значение false, чтобы исключить инструменты, связанные с производительностью.
Тип: boolean
По умолчанию: true
--categoryNetwork/ --category-network Установите значение false, чтобы исключить инструменты, связанные с сетью.
Тип: boolean
По умолчанию: true
--categoryExtensions/ --category-extensions Установите значение true, чтобы включить инструменты, связанные с расширениями. Примечание: Эта функция в настоящее время поддерживается только с соединением через pipe. autoConnect, browserUrl и wsEndpoint не поддерживаются с этой функцией до выхода версии 149.
Тип: boolean
По умолчанию: false
--categoryExperimentalThirdParty/ --category-experimental-third-party Установите значение true для включения сторонних инструментов разработчика, предоставляемых самой отслеживаемой страницей
Тип: boolean
По умолчанию: false
--performanceCrux/ --performance-crux Установите значение false, чтобы отключить отправку URL из трассировок производительности в API CrUX для получения данных о производительности в полевых условиях.
Тип: boolean
По умолчанию: true
--usageStatistics/ --usage-statistics Установите значение false, чтобы отказаться от сбора статистики использования. Google собирает данные об использовании для улучшения инструмента, что обрабатывается в соответствии с Политикой конфиденциальности Google (https://policies.google.com/privacy). Это не зависит от метрик браузера Chrome. Отключается, если установлены переменные среды CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS или CI.
Тип: boolean
По умолчанию: true
--screenshotFormat/ --screenshot-format Переопределяет формат вывода по умолчанию, используемый take_screenshot, когда вызывающий код не указывает его. Файлы JPEG и WebP примерно в 3-5 раз меньше PNG, что помогает уменьшить размер контекста в AI-диалогах. Если не задано, сохраняется существующий формат по умолчанию ("png").
Тип: string
Choices: jpeg, png, webp
По умолчанию: false
--screenshotQuality/ --screenshot-quality Переопределяет качество сжатия по умолчанию (0-100), используемое take_screenshot для JPEG и WebP, когда вызывающий код не указывает его. Меньшие значения означают файлы меньшего размера. Игнорируется для PNG. Если не задано, сохраняется значение по умолчанию Puppeteer.
Тип: number
По умолчанию: false
--screenshotMaxWidth/ --screenshot-max-width Максимальная ширина в пикселях для скриншотов. Если захваченное изображение шире, оно уменьшается (с сохранением пропорций) перед возвратом. Уменьшает размер контекста в AI-диалогах. Если не задано, изменение размера не производится.
Тип: number
По умолчанию: false
--screenshotMaxHeight/ --screenshot-max-height Максимальная высота в пикселях для скриншотов. Если захваченное изображение выше, оно уменьшается (с сохранением пропорций) перед возвратом. Может использоваться совместно с --screenshot-max-width; побеждает меньший коэффициент масштабирования. Если не задано, изменение размера не производится.
Тип: number
По умолчанию: false
--slim Предоставляет «облегченный» набор из 3 инструментов, охватывающих только навигацию, выполнение кода и скриншоты. Полезен для базовых задач с браузером.
Тип: boolean
По умолчанию: false
--redactNetworkHeaders/ --redact-network-headers Если true, редактирует некоторые сетевые заголовки, считающиеся конфиденциальными, перед возвратом клиенту.
Тип: boolean
По умолчанию: false
--allowUnrestrictedPaths/ --allow-unrestricted-paths Если задано, отключает ограничение путей по умолчанию, которое применяется, когда клиент MCP не согласовывает возможность корневых каталогов. По умолчанию инструменты записи файлов ограничиваются временным каталогом ОС, если корневые каталоги не настроены. Используйте это только при подключении доверенного локального клиента, который не реализует корневые каталоги MCP и требует доступа к путям за пределами временного каталога.
Тип: boolean
По умолчанию: false

Передавайте их через свойство args в JSON-конфигурации. Например:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--channel=canary",
        "--headless=true",
        "--isolated=true"
      ]
    }
  }
}

Подключение через WebSocket с пользовательскими заголовками

Вы можете подключиться напрямую к конечной точке WebSocket Chrome и включить пользовательские заголовки (например, для аутентификации):

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

Чтобы получить конечную точку WebSocket из запущенного экземпляра Chrome, перейдите по адресу http://127.0.0.1:9222/json/version и найдите поле webSocketDebuggerUrl.

Вы также можете запустить npx chrome-devtools-mcp@latest --help, чтобы увидеть все доступные параметры конфигурации.

Концепции

Параллельные сессии

Большинство клиентов MCP запускают один сервер Chrome DevTools MCP на каждый диалог. Если ваш клиент совместно использует один экземпляр сервера между параллельными агентами или подагентами, запустите сервер с флагом --experimentalPageIdRouting. Это раскрывает pageId в инструментах, привязанных к странице, чтобы каждый агент мог направлять вызовы инструментов на вкладку, с которой он работает.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--experimentalPageIdRouting"
      ]
    }
  }
}

Если вы запускаете несколько независимых клиентских сессий MCP и хотите, чтобы каждая сессия запускала свой временный профиль Chrome, также передайте --isolated. Это избегает совместного использования каталога пользовательских данных Chrome DevTools MCP по умолчанию между этими экземплярами сервера.

Каталог пользовательских данных

chrome-devtools-mcp запускает экземпляр стабильного канала Chrome, используя следующий каталог пользовательских данных:

Linux / macOS: $HOME/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL
Windows: %HOMEPATH%/.cache/chrome-devtools-mcp/chrome-profile-$CHANNEL

Каталог пользовательских данных не очищается между запусками и используется совместно всеми экземплярами chrome-devtools-mcp. Установите параметр isolated в значение true, чтобы использовать временный каталог пользовательских данных, который будет автоматически очищен после закрытия браузера.

Подключение к запущенному экземпляру Chrome

По умолчанию сервер Chrome DevTools MCP запускает новый экземпляр Chrome с выделенным профилем. Это может быть не всегда удобно:

Если вы хотите сохранять одинаковое состояние приложения при переключении между ручным тестированием сайта и тестированием с помощью агента.
Когда MCP необходимо войти на веб-сайт. Некоторые аккаунты могут блокировать вход, когда браузер управляется через WebDriver (механизм запуска по умолчанию для сервера Chrome DevTools MCP).
Если вы запускаете вашу LLM в изолированной среде, но хотите подключиться к экземпляру Chrome, который работает за пределами этой среды.

В этих случаях сначала запустите Chrome и позвольте серверу Chrome DevTools MCP подключиться к нему. Есть два способа сделать это:

Автоматическое подключение (доступно в Chrome 144): лучше всего для совместного использования состояния между ручным тестированием и тестированием с помощью агента.
Ручное подключение через порт удаленной отладки: лучше всего для работы в изолированной среде.

Автоматическое подключение к запущенному экземпляру Chrome

Шаг 1: Настройте удаленную отладку в Chrome

В Chrome (>= M144) выполните следующие действия для настройки удаленной отладки:

Перейдите по адресу chrome://inspect/#remote-debugging, чтобы включить удаленную отладку.
Следуйте инструкциям в диалоговом окне, чтобы разрешить или запретить входящие соединения для отладки.

Шаг 2: Настройте сервер Chrome DevTools MCP на автоматическое подключение к запущенному экземпляру Chrome

Для подключения сервера chrome-devtools-mcp к запущенному экземпляру Chrome используйте аргумент командной строки --autoConnect для MCP-сервера.

Следующий фрагмент кода является примером конфигурации для gemini-cli:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

Шаг 3: Проверьте вашу настройку

Убедитесь, что ваш браузер запущен. Откройте gemini-cli и выполните следующий запрос:

<<>

[!NOTE] Параметр autoConnect требует от пользователя запуска Chrome. Если у пользователя активно несколько профилей, сервер MCP подключится к профилю по умолчанию (как определено Chrome). Сервер MCP имеет доступ ко всем открытым окнам для выбранного профиля.

Сервер Chrome DevTools MCP попытается подключиться к вашему запущенному экземпляру Chrome. Он отобразит диалоговое окно с запросом разрешения пользователя.

Нажатие кнопки Разрешить приведет к тому, что сервер Chrome DevTools MCP откроет developers.chrome.com и соберет трассировку производительности.

Ручное подключение с использованием перенаправления портов

Вы можете подключиться к запущенному экземпляру Chrome, используя параметр --browser-url. Это полезно, если вы запускаете сервер MCP в изолированной среде, которая не позволяет запускать новый экземпляр Chrome.

Вот пошаговое руководство по подключению к запущенному экземпляру Chrome:

Шаг 1. Настройте клиент MCP

Добавьте параметр --browser-url в конфигурацию вашего клиента MCP. Значение этого параметра должно быть URL-адресом запущенного экземпляра Chrome. Типичным значением по умолчанию является http://127.0.0.1:9222.

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

Шаг 2. Запустите браузер Chrome

[!ПРЕДУПРЕЖДЕНИЕ] Включение порта удаленной отладки открывает порт отладки на запущенном экземпляре браузера. Любое приложение на вашем компьютере может подключиться к этому порту и управлять браузером. Убедитесь, что вы не посещаете конфиденциальные сайты, пока порт отладки открыт.

Запустите браузер Chrome с включенным портом удаленной отладки. Убедитесь, что вы закрыли все запущенные экземпляры Chrome, прежде чем запускать новый с включенным портом отладки. Номер порта, который вы выберете, должен совпадать с указанным в параметре --browser-url в конфигурации вашего клиента MCP.

По соображениям безопасности Chrome требует использования каталога данных пользователя, отличного от каталога по умолчанию, при включении порта удаленной отладки. Вы можете указать пользовательский каталог с помощью флага --user-data-dir. Это гарантирует, что ваш обычный профиль просмотра и данные не будут доступны сессии отладки.

macOS

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Linux

/usr/bin/google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile-stable

Windows

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 --user-data-dir="%TEMP%\chrome-profile-stable"

Шаг 3. Проверьте настройку

После настройки клиента MCP и запуска браузера Chrome вы можете проверить свою настройку, выполнив простой запрос в вашем клиенте MCP:

Check the performance of https://developers.chrome.com

Ваш клиент MCP должен подключиться к запущенному экземпляру Chrome и получить отчет о производительности.

Если вы столкнулись с проблемами перенаправления портов между виртуальной машиной и хостом, см. раздел «Сбой удаленной отладки между виртуальной машиной (VM) и хостом» в файле docs/troubleshooting.md.

Для получения дополнительной информации о удаленной отладке см. документацию Chrome DevTools.

Отладка Chrome на Android

Пожалуйста, ознакомьтесь с этими инструкциями.

Известные ограничения

См. раздел Устранение неполадок.

Интеграция в качестве субагента браузера

Если вы разрабатываете инструменты для агентов и хотите предоставить встроенного субагента браузера как часть вашего продукта, мы рекомендуем строить его на базе Chrome DevTools для агентов.

В качестве справочной реализации см. документацию по браузерному агенту для Gemini CLI.

Chrome DevTools MCP

Chrome DevTools для агентов

Справочник по инструментам | История изменений | Участие в разработке | Устранение неполадок | Принципы проектирования

Ключевые особенности

Отказы от ответственности

Статистика использования

Проверка обновлений

Требования

Начало работы

Конфигурация клиента MCP

Ваш первый запрос

Инструменты

Конфигурация

Подключение через WebSocket с пользовательскими заголовками

Концепции

Параллельные сессии

Каталог пользовательских данных

Подключение к запущенному экземпляру Chrome

Автоматическое подключение к запущенному экземпляру Chrome

Ручное подключение с использованием перенаправления портов

Отладка Chrome на Android

Известные ограничения

Интеграция в качестве субагента браузера

Комментарии