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

Впервые здесь? Начните с demo-health-check/ ↓

✦ Добавлено в этом форке: две сквозные демонстрации

Если такие термины, как MCP-сервер, протокол Chrome DevTools, трассировка производительности или Lighthouse вам незнакомы — вы не одиноки, и вы попали по адресу.

Этот форк содержит две автономные демонстрации — вместе они охватывают 26 из 29 инструментов chrome-devtools-mcp.

Демо 1 — demo-health-check/ — Аудит состояния веб-сайта (CNN.com)

Демо 2 — demo-shopping/ — Агентский рабочий процесс покупок (saucedemo.com)

ИИ-агент автономно выполняет полный процесс покупки в интернет-магазине: вход → просмотр → сравнение в нескольких вкладках → корзина → эмуляция мобильного устройства → оформление заказа → подтверждение заказа. Охватывает 18 инструментов взаимодействия, не использованных в Демо 1.

Что еще можно создать с помощью этого? → use-cases.md

Более 50 агентских рабочих процессов в области QA, производительности, SEO, электронной коммерции, исследований, безопасности и личной продуктивности — с указанием конкретных инструментов для каждого случая и причин, почему CDP лучше альтернатив.

Что на самом деле делает этот инструмент

chrome-devtools-mcp дает вашему ИИ-ассистенту (Claude, Gemini, Cursor, Copilot…) возможность управлять и проверять работу реального браузера Chrome. Вместо того чтобы просто читать и записывать текстовые файлы, ваш ИИ может:

• Открывать веб-страницы и делать скриншоты

• Читать структуру страницы, как программа чтения с экрана

• Собирать ошибки консоли и сетевые запросы в реальном времени

• Запускать аудит Lighthouse (доступность, SEO, лучшие практики)

• Записывать трассировки производительности и измерять Core Web Vitals (LCP, CLS, INP)

Вы взаимодействуете с ним на обычном языке — «Проверь производительность этой страницы» — и ИИ сам решает, какой из 29 инструментов вызвать.

Опыт не требуется

Демонстрация была разработана для тех, кто никогда не открывал Chrome DevTools, никогда не использовал MCP-сервер и только начал пользоваться ИИ-ассистентом для программирования. Каждая концепция объясняется с нуля, прежде чем она будет использована.

Chrome DevTools MCP

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

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

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

• Получение данных о производительности: Использует Chrome DevTools для записи трассировок и извлечения полезных данных о производительности.

• Продвинутая отладка браузера: Анализ сетевых запросов, создание скриншотов и проверка сообщений консоли браузера (с трассировками стека на основе source-map).

• Надежная автоматизация: Использует 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.

Требования

• Node.js v20.19 или более новая последняя версия LTS с поддержкой.

• Chrome текущей стабильной версии или новее.

• npm

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Установка в качестве плагина (MCP + Skills)

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

/plugin marketplace add ChromeDevTools/chrome-devtools-mcp

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

/plugin install chrome-devtools-mcp

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

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

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

copilot

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

/mcp add

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

• Имя сервера: chrome-devtools

• Тип сервера: [1] Local

• Команда: npx -y chrome-devtools-mcp@latest

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

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

Следуйте руководству по установке MCP со стандартной