Chrome DevTools MCP

Этот MCP-сервер позволяет вашему AI-ассистенту (например, Gemini, Claude, Cursor или Copilot) управлять браузером Chrome и анализировать его через DevTools. Он предоставляет полный доступ к возможностям Chrome DevTools для автоматизации, отладки и анализа производительности.

Основные возможности

• Анализ производительности: запись трассировок и извлечение полезных данных с помощью Chrome DevTools
• Глубокая отладка: анализ сетевых запросов, создание скриншотов, проверка консоли браузера
• Надёжная автоматизация: использует Puppeteer для действий в Chrome с автоматическим ожиданием результатов

Предупреждения

Сервер предоставляет MCP-клиентам доступ ко всем данным браузера. Не передавайте sensitive-информацию, которую не хотите раскрывать.

Требования

• Node.js 22 или новее
• Chrome (стабильная версия или новее)
• npm

Быстрый старт

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

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

Использование chrome-devtools-mcp@latest гарантирует автоматическое получение последней версии сервера.

Настройка для популярных клиентов

• Claude Code: claude mcp add chrome-devtools npx chrome-devtools-mcp@latest (инструкция)
• Cline: используйте конфигурацию выше, следуя руководству
• Copilot / VS Code: инструкция по MCP или через CLI: code --add-mcp '{"name":"chrome-devtools","command":"npx","args":["chrome-devtools-mcp@latest"]}'
• Cursor: нажмите кнопку установки или настройте вручную в Settings -> MCP
• Gemini CLI: следуйте руководству
• Gemini Code Assist: настройка MCP

Проверка работы

Запросите:

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

Сервер автоматически откроет браузер и запишет трассировку производительности.

Инструменты

Сервер предоставляет несколько категорий инструментов. Полный список с описанием доступен в документации.

• Автоматизация ввода (7): click, drag, fill, fill_form, handle_dialog, hover, upload_file
• Навигация (7): close_page, list_pages, navigate_page, navigate_page_history, new_page, select_page, wait_for
• Эмуляция (3): emulate_cpu, emulate_network, resize_page
• Производительность (3): performance_analyze_insight, performance_start_trace, performance_stop_trace
• Сеть (2): get_network_request, list_network_requests
• Отладка (4): evaluate_script, list_console_messages, take_screenshot, take_snapshot

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

Поддерживаемые опции (передаются через args в JSON):

• --browserUrl / -u: подключение к уже запущенному Chrome (строка)
• --headless: запуск без UI (булево, по умолчанию false)
• --executablePath / -e: путь к кастомному Chrome (строка)
• --isolated: создание временной директории пользователя, очищаемой после закрытия (булево, false)
• --channel: канал Chrome (stable, canary, beta, dev), по умолчанию stable

Пример:

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

Также можно запустить npx chrome-devtools-mcp@latest --help для полного списка опций.

Концепции

Директория пользовательских данных

По умолчанию Chrome сохраняет профиль в:

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

Директория не очищается между запусками. Если нужно временное окружение, используйте опцию --isolated.

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

Песочницы ОС

Некоторые MCP-клиенты запускают сервер в изолированной среде (macOS Seatbelt, Linux контейнеры). В таких случаях chrome-devtools-mcp не может запустить Chrome из-за конфликта песочниц. Решение: отключите изоляцию для сервера в клиенте или используйте --browserUrl для подключения к уже запущенному вручную экземпляру Chrome вне песочницы.