СмыслоКод

Chrome DevTools

Официальный

Google · лицензия Apache-2.0

Агент сам найдёт, почему сайт тормозит или ломается: консоль, сеть, скорость, Lighthouse

На твоём компьютереБез ключаРаботает из РоссииДействует от твоего имениБесплатноДанные уходят: Google, СШАЧитает тексты посторонних: веб-страницыОпасное сочетание

✓ Проверено 26.09.2026 на версии 1.10.1 в Claude Code (macOS) · 30 инструментов

Подключить ↓Что можно сделать ↓

Что сможет агент

  • Откроет твой сайт в Chrome и покажет, что сломано: ошибки в консоли, упавшие запросы, ответы сервера.
  • Замерит скорость загрузки, как вкладка Performance в DevTools: LCP, сдвиг вёрстки, что тормозит первую отрисовку, - и скажет, что поправить.
  • Покажет сайт глазами человека с телефона: экран телефона, медленная сеть, слабый процессор.
  • Прогонит Lighthouse по странице: доступность, поисковую оптимизацию (SEO) и лучшие практики с разбором по пунктам.
  • Пройдёт по сайту как человек: нажмёт кнопки, заполнит формы, снимет экран.

Паспорт

Кто сделал
Google
Статус
Официальный
Лицензия
Apache-2.0
Проверено
26.09.2026
Версия
1.10.1
Где работает
На твоём компьютере
Доступ
Без ключа
Россия
Работает из России
Данные
Данные уходят: Google, США
Цена
Бесплатно
Проверено в
Claude Code
Исходный код
github.com/ChromeDevTools/chrome-devtools-mcp
Документация
developer.chrome.com/blog/chrome-devtools-mcp

Подключить

Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.

Промпт для агента
Подключи MCP-сервер «Chrome DevTools» версии 1.10.1. Работай по шагам и после каждого коротко говори, что сделал.

Данные сервера (каталог smyslokod.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://smyslokod.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, сдвиг вёрстки и что мешает первой отрисовке, - и даст правки по порядку пользы.

  1. performance_start_trace перезагружает страницу и записывает трассу, как вкладка Performance в DevTools.
  2. performance_analyze_insight раскрывает подсказки: блокирующие запросы, тяжёлые картинки, шрифты.
  3. Агент сверяет подсказки с кодом проекта и предлагает правки.
Промпт
Открой в Chrome главную страницу моего сайта (адрес возьми из настроек проекта или спроси меня) и замерь загрузку через performance_start_trace с перезагрузкой. Покажи LCP, CLS и из чего складывается LCP. Потом разбери каждую подсказку трассы через performance_analyze_insight и дай список правок по порядку пользы: что поменять в коде этого проекта, в каком файле и что это даст. Правки пока не вноси.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Замеряй дважды: первый заход без кеша всегда медленнее.
  • Совет. На твоём компьютере сайт быстрее, чем у людей: для честной картины добавь в промпт медленную сеть через emulate.

Ошибки в консоли и упавшие запросы

Агент пройдёт по главным страницам сайта, соберёт ошибки консоли и запросы с ответами 400 и выше и найдёт в коде, откуда они.

  1. list_console_messages отдаёт ошибки и предупреждения с последнего перехода, со ссылками на строки кода.
  2. list_network_requests показывает запросы с ответами сервера: сразу видно, что упало.
Промпт
Открой мой сайт в Chrome и пройди по главным страницам: главная, страница услуги или товара, форма заявки. На каждой собери сообщения консоли (list_console_messages) и сетевые запросы с ответами 400 и выше (list_network_requests). Для каждой ошибки найди в коде проекта, откуда она, и предложи исправление. Сначала покажи список, потом правь по одной, после каждой правки проверяй страницу заново.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Предупреждения вроде «A form field element should have an id or name attribute» не ломают сайт, но мешают автозаполнению и доступности - их тоже стоит поправить.

Сайт на телефоне и медленном интернете

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

  1. emulate подменяет экран, скорость сети и процессора в открытой вкладке.
  2. take_screenshot и performance_start_trace показывают, как страница выглядит и грузится в этих условиях.
Промпт
Открой главную страницу моего сайта в Chrome так, как её видит человек с телефона: через emulate поставь экран 390x844x3,mobile,touch, сеть Slow 4G и замедление процессора в 4 раза. Сними снимок экрана главной и страницы заявки, замерь загрузку через performance_start_trace. Покажи, что съехало на маленьком экране и что грузится дольше всего, и предложи правки в коде проекта.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Slow 4G и замедление процессора в 4 раза близки к недорогому телефону в городе; Slow 3G - к загородной связи.
Отчёт Lighthouse по developer.chrome.com для телефона из нашего прогона: доступность 93, лучшие практики 100, SEO 69

Lighthouse: доступность и поисковая оптимизация

Агент прогонит Lighthouse по странице для телефона и разберёт замечания по доступности, поисковой оптимизации и лучшим практикам с правками в коде.

  1. lighthouse_audit перезагружает страницу и проверяет её, отчёт сохраняет во временную папку.
  2. Скорость Lighthouse здесь не считает: для неё есть трасса.
Промпт
Прогони Lighthouse по главной странице моего сайта: lighthouse_audit в режиме navigation для устройства mobile. Разбери каждое замечание по доступности, SEO и лучшим практикам: что не так, где это в коде проекта и как исправить. Скорость здесь не меряй, для неё отдельно запиши трассу через performance_start_trace.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Проверяй страницу для телефона: Яндекс и Google смотрят на сайт в первую очередь так.

Проверить форму заявки до конца

Агент заполнит форму на сайте тестовыми данными, отправит её и проверит, что запрос ушёл без ошибок и открылась страница «Спасибо».

  1. take_snapshot даёт номера полей и кнопок, fill_form заполняет их за один вызов.
  2. После отправки list_network_requests показывает запрос формы и ответ сервера.
Промпт
Открой на моём сайте страницу с формой заявки. Сними структуру страницы (take_snapshot), заполни форму тестовыми данными (имя Тест, почта test@example.com) через fill_form и отправь. Проверь в list_network_requests, что запрос формы ушёл и сервер ответил без ошибки, и что открылась страница благодарности. Если что-то не так, найди причину в коде проекта.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Форма отправится по-настоящему: заранее реши, куда падают тестовые заявки, и удали их после проверки.

Пример работы

Задача

Проверить чужой сайт: консоль, скорость, Lighthouse для телефона

Промпт

Открой https://developer.chrome.com, покажи сообщения консоли, замерь загрузку и прогони Lighthouse для телефона.

Что сделал агент

  1. new_page открыл developer.chrome.com за 2 секунды.
  2. list_console_messages: 8 картинок с отложенной загрузкой без заданных размеров и поле формы без id и name.
  3. performance_start_trace с перезагрузкой: LCP 537 мс (ответ сервера 391 мс, отрисовка ещё 147 мс), сдвиг вёрстки 0,19.
  4. lighthouse_audit для телефона: доступность 93, лучшие практики 100, SEO 69; 56 проверок пройдено, 4 нет.

Результат

Четыре вызова за 17 секунд в одном сеансе браузера. Сдвиг вёрстки 0,19 и SEO 69 - первое, что стоило бы поправить на этой странице.

Редакция, 26.09.2026 · прогон при проверке

Инструменты сервера

30

30 инструментов, описания около 8 тыс. токенов. В Claude Code это почти не мешает: инструменты грузятся по запросу. Если в настройках Claude Code задан свой адрес подключения (ANTHROPIC_BASE_URL), в части других клиентов и на старых моделях описания грузятся целиком и занимают место в памяти агента на каждом сообщении.

Нажми на строку, чтобы увидеть оригинальное описание: ровно его читает агент.

Когда не нужен

Если нужно только пройти по страницам и снять экран, хватит Playwright - он уже в каталоге. Chrome DevTools нужен, когда разбираешь, почему сайт тормозит или ломается: консоль, сеть, трасса скорости, Lighthouse.

Частые проблемы

Агент пишет «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: ставится ровно то, что мы проверили.

Проверить самому

Промпт Артемия: агент прочитает код подключения как недоверенный и покажет строки, где читаются секреты, уходят данные или меняются твои настройки.

Полезные материалы

Журнал проверок

ДатаВерсияГдеИтогОтпечаток
26.09.20261.10.1Claude Code, macOSработает02feabac7322e17e

Отпечаток - контрольная сумма того, что сервер отдаёт агенту: инструкций, инструментов, подсказок и ресурсов. Поменялся при той же версии - поменялось поведение.

Похожие подключения

Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.