Chrome DevTools MCP

Что умеет сервер

Пакет chrome-devtools-mcp даёт кодовому агенту доступ к настоящему браузеру Chrome с возможностями DevTools. Агент записывает трассы производительности и получает из них практические выводы, разбирает сетевые запросы, читает сообщения консоли (стек вызовов сопоставляется с исходным кодом через source maps) и делает снимки экрана. Действия на странице выполняются через Puppeteer, который сам дожидается результата каждого шага. В тот же пакет входит консольная утилита chrome-devtools, ею можно управлять браузером и без MCP.

Параметры задаются флагами в args. Среди них --headless (без окна), --isolated (временный профиль, который удаляется после закрытия), --channel (stable, beta, dev или canary) и --browser-url для подключения к уже запущенному Chrome с отладочным портом. Флаг --slim оставляет всего три инструмента: навигацию, выполнение скрипта и снимки экрана.

Когда использовать

Сервер нужен, когда агенту мало читать код: после правки вёрстки он сам открывает страницу, смотрит консоль и сеть и проверяет, что изменилось. Типичные задачи: найти причину медленной загрузки по трассе, понять, почему запрос завершается ошибкой, посмотреть интерфейс при другой ширине экрана, пройти сценарий и сохранить снимки.

Для первой проверки README предлагает попросить агента оценить производительность любого сайта: клиент должен открыть браузер и записать трассу. Браузер запускается лишь тогда, когда клиент вызовет инструмент, которому он нужен, само подключение сервера Chrome не открывает.

Ограничения и безопасность

Сервер отдаёт клиенту содержимое браузера целиком: агент может просматривать и менять любые данные в браузере и в DevTools. В README просят не делиться с клиентом тем, что не должно уйти наружу. Если подключиться к уже запущенному Chrome через --browser-url, агент получит доступ ко всему, что в нём открыто, поэтому для экспериментов удобнее --isolated.

Официально поддерживаются только Google Chrome и Chrome for Testing. Другие браузеры на Chromium могут работать, но без гарантий. Инструменты производительности способны отправлять адреса из трассы в Google CrUX API, чтобы показать данные реальных пользователей рядом с лабораторными, отключается это флагом --no-performance-crux. Google также собирает статистику использования (успешность вызовов, задержки, окружение). Сбор включён по умолчанию, выключается флагом --no-usage-statistics. Для работы нужны LTS-версия Node.js, свежий стабильный Chrome и npm.

Стандартная конфигурация

Добавьте в настройки MCP-клиента:

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

Проверочный запрос: Check the performance of https://developers.chrome.com.

Claude Code

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

Вместе с навыками его можно поставить как плагин:

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp
/plugin install chrome-devtools-mcp@chrome-devtools-plugins

Перезапустите Claude Code, чтобы подгрузились сервер и навыки.

Codex

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

Gemini CLI

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

VS Code

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

Cursor

Откройте Cursor Settings -> MCP -> New MCP Server и вставьте стандартную конфигурацию из начала раздела.

Параметры запуска

Флаги передаются через args, например:

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

Отказ от сбора статистики использования:

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