Гайд со скриншотами · 13 кадров из одного видео
Claude Code + Chrome DevTools MCP: пусть агент видит ваш браузер
Сервер Chrome DevTools MCP отдаёт кодирующему агенту настоящий браузер — логи console, DOM, сетевой трафик и производительность читаются вживую, а не пересказываются вами. Разбираем команду установки из README, 26 инструментов, которые сервер открывает, и сессию отладки, которая находит битую картинку и не запущенный API.
Около 5 мин · 13 шагов, каждый со ссылкой на точную секунду исходного видео
TL;DR — что меняет сервер Chrome DevTools MCP
Без него агент отлаживает веб-страницу почти вслепую: симптом описываете вы и ошибки вставляете тоже вы. Сервер Chrome DevTools MCP закрывает этот разрыв, превращая живой браузер в набор инструментов. Для Claude Code установка — одна строка: claude mcp add chrome-devtools npx chrome-devtools-mcp@latest. Нужны только Node.js v20.19 или новее из LTS, стабильный Chrome и npm; после запуска сервер сообщает о 26 инструментах. Дальше видео показывает их по назначению: один prompt с просьбой найти первопричину, один клик подтверждения — и агент сам открывает страницу, читает console, выгружает шесть сетевых запросов и называет обе ошибки с их точными net:: кодами. Проверить можно построчно в собственных панелях Console и Network браузера, потому что доказательство одно и то же.
Исходное видео
Все скриншоты взяты из записи экрана StonerStack — прохождения, которое сначала ставит сервер Chrome DevTools MCP, а затем отлаживает с его помощью локальную страницу.
Кадры иллюстрируют только наши собственные инструкции. Демонстрация выполнена в VS Code с GitHub Copilot в режиме agent (Claude Sonnet 3.5), а не в самом Claude Code; показанная строка для Claude Code взята из README сервера. Чтобы инструменты появились, нужен перезапуск VS Code, а цен, тарифов и чисел token в видео нет вовсе.
Что это открывает
Связующее звено, которое позволяет агенту читать живой браузер, а не ждать, пока вы вставите ошибки.
- 1
Начните с объяснения от Google
Статья на developers.chrome.com — самое быстрое введение: что это за сервер, почему он важен и что умеет читать. Панель Performance рядом и есть его ценность — Largest Contentful Paint 0.98 s — это хорошо, а Cumulative Layout Shift 0.29 — это плохо, ровно те числа, которые агент теперь снимает сам. Промпт из статьи для производительности: 'Localhost:8080 is loading slowly. Make it load faster.'
Статья Google объясняет механику, а панель Performance показывает, какие числа возвращаются.Смотреть с 1:20 - 2
Вставьте конфиг и прогоните дымовой тест
Там же опубликован готовый блок mcpServers, который можно вставить в файл конфигурации клиента, и однострочная проверка — 'Please check the LCP of web.dev.'. Это удачный первый тест: если агент измеряет LCP реальной страницы, соединение с браузером живо.
Один блок конфигурации и один промпт, чтобы убедиться, что соединение работает.Смотреть с 2:05 - 3
Проверьте три требования
Раздел Requirements в README короткий: Node.js v20.19 или более новая latest maintenance LTS версия, текущая стабильная версия Chrome и npm. Больше ставить нечего — сам сервер поднимается через npx при запуске MCP-клиента.
Node, Chrome и npm. Сервер работает через npx, отдельная установка не нужна.Смотреть с 2:20
Установите для Claude Code
Одна строка из README или собственный путь редактора — а затем проверьте запись, которая запускает инструменты.
- 4
Строка установки для Claude Code
В разделе MCP Client configuration у README есть пункт Claude Code с точной командой: claude mcp add chrome-devtools npx chrome-devtools-mcp@latest. Выполните её один раз, и сервер зарегистрирован в нужной области — править JSON вручную не придётся.
Раздел README про Claude Code и готовая к копированию команда mcp add.Смотреть с 2:45 - 5
Или добавьте со стороны редактора
Если вы работаете в VS Code, а не через Claude Code CLI, документация VS Code по MCP перечисляет несколько способов регистрации сервера; видео рекомендует только два — командную строку и файл пользовательской конфигурации. Путь через командную строку — это пример code --add-mcp, и он крайне придирчив к кавычкам.
VS Code описывает несколько путей установки, но видео советует лишь CLI и пользовательский конфиг.Смотреть с 3:30 - 6
Запись, которая запускает 26 инструментов
Первая попытка провалилась — двойные кавычки в JSON пришлось экранировать. После успеха терминал сообщает 'Added MCP servers: chrome-devtools', а в пользовательском mcp.json появляется запись chrome-devtools, запускающая npx с chrome-devtools-mcp@latest. У запущенного сервера стоит пометка 'Start | 26 tools'.
Подтверждение добавления, записанный JSON и 26 инструментов, о которых сообщает сервер.Смотреть с 4:15
Поверхность инструментов
Что именно покрывают эти 26 инструментов — в той группировке, которую даёт сам агент.
- 7
Навигация и управление страницами
После перезапуска VS Code агент перечисляет инструменты по назначению. Navigation and Page Management включает navigate_page, navigate_page_history, new_page, list_pages, select_page, close_page и resize_page; Page Interaction — click, fill, fill_form, hover, drag, upload_file, handle_dialog и wait_for. Именно эта половина позволяет агенту управлять реальной вкладкой.
Агент группирует инструменты по назначению, а не выкладывает 26 строк подряд.Смотреть с 5:20 - 8
Анализ, console и сеть
Вторая половина списка — диагностическая: Page Analysis с take_snapshot, take_screenshot, evaluate_script, list_console_messages и list_network_requests. Последние два и превращают 'вот моя ошибка' в 'вот доказательство, которое агент добыл сам'.
Диагностические инструменты: снимки, скриншот, выполнение скрипта, сообщения console и сетевые запросы.Смотреть с 5:40
Отладьте сломанную страницу
Локальная страница с недостающим содержимым, доведённая до двух конкретных ошибок без единой ручной вставки.
- 9
Начните со страницы, которая явно сломана
Цель демонстрации — локальная страница Add Employee. В левой панели виден значок не загрузившейся картинки, а поля Name, Department и Email пусты — очевидно неправильно на вид и ровно та ситуация, где раньше оставалось лишь копировать вывод console в чат.
Страница, сломанная на вид: одна не загрузившаяся картинка и форма без единого значения.Смотреть с 6:10 - 10
Спросите о первопричине и одобрите инструмент
Промпт намеренно скупой — путь к файлу и просьба найти первопричину — и агент сразу запрашивает разрешение на инструмент new_page для file:///E:/Development/RESTApi-main/frontend/add.html. После одобрения открывается настоящий Chrome, агент сам переходит по адресу и затем последовательно вызывает list_console_messages и list_network_requests.
Одна карточка подтверждения, и агент сам открывает страницу и начинает собирать доказательства.Смотреть с 6:40 - 11
Шесть запросов, две названные ошибки
list_network_requests возвращает шесть запросов для этой страницы, и агент сообщает о двух основных проблемах: images/logo2.svg падает с net::ERR_FILE_NOT_FOUND, а http://localhost:5000/api/employees — с net::ERR_CONNECTION_REFUSED. Предложенные исправления конкретны: переименовать logo.svg в logo2.svg или указать в HTML файл logo.svg, а также запустить проект .NET EmployeeApi.
Две ошибки с точными кодами net:: и исправление для каждой.Смотреть с 7:20 - 12
Те же доказательства в вашем DevTools
В дампе агента нет ни одной строки, введённой вручную. Поставьте рядом собственные панели Application и Console браузера — строки совпадут: Failed to load resource для logo2.svg и для localhost:5000/api/employees, всего 2 проблемы в Console. Агент читал браузер, а вы можете проверить те же доказательства сами.
Собственные панели Chrome и дамп агента перечисляют одни и те же две ошибки.Смотреть с 7:30 - 13
Панель Network подтверждает обе ошибки
Панель Network замыкает цикл: из шести запросов add.html, styles.css, avatar2.svg и app.js возвращают 200, а logo2.svg и запрос employees помечены как неудачные — 6 requests, 7.5 kB transferred, Finish 2.34 s. Рядом лежит диагноз агента, и эта петля обратной связи — получить ошибки, исправить, перепроверить — и есть то, чего раньше не хватало.
Четыре запроса успешны, два провалились, а диагноз агента совпадает с таблицей строка в строку.Смотреть с 7:45