Что сможет агент
- Откроет твой сайт в Chrome и покажет, что сломано: ошибки в консоли, упавшие запросы, ответы сервера.
- Замерит скорость загрузки, как вкладка Performance в DevTools: LCP, сдвиг вёрстки, что тормозит первую отрисовку, - и скажет, что поправить.
- Покажет сайт глазами человека с телефона: экран телефона, медленная сеть, слабый процессор.
- Прогонит Lighthouse по странице: доступность, поисковую оптимизацию (SEO) и лучшие практики с разбором по пунктам.
- Пройдёт по сайту как человек: нажмёт кнопки, заполнит формы, снимет экран.
- Кто сделал
- Версия
- 1.10.1
- Проверено
- 26.09.2026, Claude Code
- Лицензия
- Apache-2.0
- Документация
- developer.chrome.com/blog/chrome-devtools-mcp
Подключить
Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.
Подключи MCP-сервер «Chrome DevTools» версии 1.10.1. Работай по шагам и после каждого коротко говори, что сделал.
Данные сервера (каталог code.tarasovweb.ru, проверено 26.09.2026):
- имя в конфиге: chrome-devtools
- официальный источник: https://github.com/ChromeDevTools/chrome-devtools-mcp
- запуск: npx -y chrome-devtools-mcp@1.10.1 --isolated --no-usage-statistics --no-performance-crux
Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.
Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 20 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get chrome-devtools` (в Codex: `codex mcp list`).
3. Подключи сервер:
Claude Code: claude mcp add --scope user --transport stdio chrome-devtools -- npx -y chrome-devtools-mcp@1.10.1 --isolated --no-usage-statistics --no-performance-crux
Codex: codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@1.10.1 --isolated --no-usage-statistics --no-performance-crux
Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 30 инструментов, перечисли их. Сделай пробный запрос: «Проверь скорость загрузки https://developer.chrome.com». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove chrome-devtools --scope user` (в Codex: `codex mcp remove chrome-devtools`).
Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://code.tarasovweb.ru/mcp/chrome-devtools#problemy- Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.
Что нужно на компьютере: Node.js 20 или новее.
Ключ: не нужен.
Нужны Google Chrome и Node.js 20.19 или новее. Флаги в команде: --isolated - браузер каждый раз стартует с чистым временным профилем и не помнит входы (убери флаг, если нужен сохранённый вход в свой кабинет); --no-usage-statistics и --no-performance-crux - сервер не отправляет Google статистику использования и адреса страниц для замеров у реальных посетителей.
Проверь, что работает
Проверь скорость загрузки https://developer.chrome.com
Что должно получиться: Chrome откроет страницу, агент запишет трассу и покажет LCP, сдвиг вёрстки и подсказки по ускорению.
Что можно сделать
5 сценариевПочему сайт медленно открывается
Агент замерит загрузку страницы, как вкладка Performance в DevTools: LCP, сдвиг вёрстки и что мешает первой отрисовке, - и даст правки по порядку пользы.
- performance_start_trace перезагружает страницу и записывает трассу, как вкладка Performance в DevTools.
- performance_analyze_insight раскрывает подсказки: блокирующие запросы, тяжёлые картинки, шрифты.
- Агент сверяет подсказки с кодом проекта и предлагает правки.
Открой в Chrome главную страницу моего сайта (адрес возьми из настроек проекта или спроси меня) и замерь загрузку через performance_start_trace с перезагрузкой. Покажи LCP, CLS и из чего складывается LCP. Потом разбери каждую подсказку трассы через performance_analyze_insight и дай список правок по порядку пользы: что поменять в коде этого проекта, в каком файле и что это даст. Правки пока не вноси.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Замеряй дважды: первый заход без кеша всегда медленнее.
- Совет. На твоём компьютере сайт быстрее, чем у людей: для честной картины добавь в промпт медленную сеть через emulate.
Ошибки в консоли и упавшие запросы
Агент пройдёт по главным страницам сайта, соберёт ошибки консоли и запросы с ответами 400 и выше и найдёт в коде, откуда они.
- list_console_messages отдаёт ошибки и предупреждения с последнего перехода, со ссылками на строки кода.
- list_network_requests показывает запросы с ответами сервера: сразу видно, что упало.
Открой мой сайт в Chrome и пройди по главным страницам: главная, страница услуги или товара, форма заявки. На каждой собери сообщения консоли (list_console_messages) и сетевые запросы с ответами 400 и выше (list_network_requests). Для каждой ошибки найди в коде проекта, откуда она, и предложи исправление. Сначала покажи список, потом правь по одной, после каждой правки проверяй страницу заново.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Предупреждения вроде «A form field element should have an id or name attribute» не ломают сайт, но мешают автозаполнению и доступности - их тоже стоит поправить.
Сайт на телефоне и медленном интернете
Агент откроет сайт с экраном телефона, медленной сетью и слабым процессором, снимет экран и покажет, что съехало и что грузится дольше всего.
- emulate подменяет экран, скорость сети и процессора в открытой вкладке.
- take_screenshot и performance_start_trace показывают, как страница выглядит и грузится в этих условиях.
Открой главную страницу моего сайта в Chrome так, как её видит человек с телефона: через emulate поставь экран 390x844x3,mobile,touch, сеть Slow 4G и замедление процессора в 4 раза. Сними снимок экрана главной и страницы заявки, замерь загрузку через performance_start_trace. Покажи, что съехало на маленьком экране и что грузится дольше всего, и предложи правки в коде проекта.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Slow 4G и замедление процессора в 4 раза близки к недорогому телефону в городе; Slow 3G - к загородной связи.
Lighthouse: доступность и поисковая оптимизация
Агент прогонит Lighthouse по странице для телефона и разберёт замечания по доступности, поисковой оптимизации и лучшим практикам с правками в коде.
- lighthouse_audit перезагружает страницу и проверяет её, отчёт сохраняет во временную папку.
- Скорость Lighthouse здесь не считает: для неё есть трасса.
Прогони Lighthouse по главной странице моего сайта: lighthouse_audit в режиме navigation для устройства mobile. Разбери каждое замечание по доступности, SEO и лучшим практикам: что не так, где это в коде проекта и как исправить. Скорость здесь не меряй, для неё отдельно запиши трассу через performance_start_trace.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Проверяй страницу для телефона: Яндекс и Google смотрят на сайт в первую очередь так.
Проверить форму заявки до конца
Агент заполнит форму на сайте тестовыми данными, отправит её и проверит, что запрос ушёл без ошибок и открылась страница «Спасибо».
- take_snapshot даёт номера полей и кнопок, fill_form заполняет их за один вызов.
- После отправки list_network_requests показывает запрос формы и ответ сервера.
Открой на моём сайте страницу с формой заявки. Сними структуру страницы (take_snapshot), заполни форму тестовыми данными (имя Тест, почта test@example.com) через fill_form и отправь. Проверь в list_network_requests, что запрос формы ушёл и сервер ответил без ошибки, и что открылась страница благодарности. Если что-то не так, найди причину в коде проекта.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Форма отправится по-настоящему: заранее реши, куда падают тестовые заявки, и удали их после проверки.
Пример работы
редакция, прогон при проверке 26.09.2026- Задача
- Проверить чужой сайт: консоль, скорость, Lighthouse для телефона
- Промпт
- Открой https://developer.chrome.com, покажи сообщения консоли, замерь загрузку и прогони Lighthouse для телефона.
- Что сделал агент
- new_page открыл developer.chrome.com за 2 секунды.
- list_console_messages: 8 картинок с отложенной загрузкой без заданных размеров и поле формы без id и name.
- performance_start_trace с перезагрузкой: LCP 537 мс (ответ сервера 391 мс, отрисовка ещё 147 мс), сдвиг вёрстки 0,19.
- lighthouse_audit для телефона: доступность 93, лучшие практики 100, SEO 69; 56 проверок пройдено, 4 нет.
- Результат
- Четыре вызова за 17 секунд в одном сеансе браузера. Сдвиг вёрстки 0,19 и SEO 69 - первое, что стоило бы поправить на этой странице.
Инструменты
30 · описания около 8 тыс. токеновЖёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.
Когда не нужен
Если нужно только пройти по страницам и снять экран, хватит Playwright - он уже в каталоге. Chrome DevTools нужен, когда разбираешь, почему сайт тормозит или ломается: консоль, сеть, трасса скорости, Lighthouse.
Частые проблемы
6Агент пишет «pageId: expected number»
Почти каждому инструменту нужен номер вкладки, а агент его не передал. Попроси агента сначала открыть страницу или вызвать list_pages: номера вкладок будут в ответе, текущая помечена [selected].
Агент не видит инструментов сервера
Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.
«spawn npx ENOENT» при запуске
Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.
«Unsupported engine» или падение при старте
Старая версия Node.js. Нужна 20 или новее, проверить: node --version.
Codex: сервер не успевает запуститься
Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.
Агент путается в инструментах и медленно отвечает
В настройках Claude Code задан свой адрес подключения (ANTHROPIC_BASE_URL): поиск инструментов выключается, и описания всех подключений грузятся целиком. Оставь включёнными только нужные подключения.
Безопасность и данные
- Кто сделал
- Google (официальный). Исходный код: github.com/ChromeDevTools/chrome-devtools-mcp, лицензия Apache-2.0.
- Что видит агент
- Страницы, которые открывает агент: тексты, формы, сообщения консоли, сетевые запросы с заголовками, включая cookie. Снимки и ответы уходят в модель вместе с разговором. С флагом --isolated браузер стартует с чистым профилем и входов из твоего обычного Chrome не видит.
- Куда уходят данные
- Данные уходят: Google, США.
- Что может изменить
- Нажимает, вводит, отправляет формы и выполняет JavaScript на открытых страницах; инструмент upload_file загружает файлы с твоего компьютера на сайты. Отчёты и снимки пишет во временную папку системы. Команд на компьютере не запускает.
- Наша проверка
- Источник - репозиторий ChromeDevTools/chrome-devtools-mcp (команда Chrome DevTools, Google) и пакет chrome-devtools-mcp в npm, лицензия Apache-2.0. В базе OSV записей по версии 1.10.1 нет, команд, которые запускаются при установке, у пакета нет. Описания всех 30 инструментов прочитаны, скрытых указаний агенту нет, своих инструкций у сервера нет. По умолчанию сервер отправляет Google статистику использования и адреса страниц для CrUX - в команде каталога это выключено флагами. Проверка соединений на локальной странице с этими флагами: сам Chrome в фоне ходит к серверам Google, как обычный браузер, Node - к реестру npm. Версия в команде закреплена.
- Версия
- В командах закреплена версия 1.10.1: ставится ровно то, что мы проверили.
- Проверить самому
- агент прочитает код подключения как недоверенный
Полезные материалы
- Инструкция · на английскомChrome DevTools MCP: репозиторий и подключениеОфициальный источник: установка, флаги, что сервер отправляет Google и как это выключить.
- Инструкция · на английскомСправочник инструментовВсе инструменты с параметрами: пригодится, чтобы точнее просить агента.
- Статья · на английскомChrome DevTools (MCP) for your AI agentСтатья команды Chrome: зачем агенту DevTools и какие задачи он с ним решает.
- СтатьяLCP: что это и как ускоритьГлавная метрика скорости из трассы: что считается и какие цифры хорошие. Перевод машинный.
- СтатьяСдвиг вёрстки (CLS)Почему страница «прыгает» при загрузке и как это убрать. Перевод машинный.
Журнал проверок
- 26.09.2026·1.10.1·Claude Code, macOS·работает02feabac7322e17e
Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.
Похожие подключения
Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.
