00:00:00Итак, команда Chrome наконец-то выпустила обновление, которое позволяет MCP-серверу Chrome DevTools
00:00:06взаимодействовать с запущенным экземпляром Chrome для таких задач, как отладка проблем на страницах с авторизацией,
00:00:12анализ активных сессий и даже выполнение крутых штук вроде доступа
00:00:17к выбранному элементу, конкретным ошибкам и даже сетевой активности.
00:00:21Но учитывая наличие других ИИ-инструментов для отладки в браузере, таких как Agent Browser и Playwright, предлагающих CLI
00:00:26с набором навыков и MCP-сервер, придется ли Chrome DevTools MCP
00:00:31добавлять это в будущем?
00:00:33Подписывайтесь, и давайте выясним.
00:00:35Несколько месяцев назад Anjis выпустил видео с отличным обзором MCP-сервера
00:00:44Chrome DevTools, но на тот момент он мог только запускать новую сессию Chrome,
00:00:49либо можно было подключиться к порту удаленной отладки, но это требовало сложной ручной настройки.
00:00:53Теперь же в Chrome версии 144 и выше, при включенном флаге удаленной отладки, инструмент
00:00:58Chrome MCP автоматически обнаруживает открытую сессию для отладки, что лично для меня
00:01:04меняет правила игры, так как я предпочитаю использовать Claude Code в терминале. Это значит,
00:01:09что мне больше не нужны ИИ-браузеры вроде Deer, Comet или расширение Claude для Chrome,
00:01:15и даже такие полезные инструменты отладки, как React Grab.
00:01:18Давайте посмотрим на эти новые возможности Chrome DevTools MCP в действии.
00:01:22Сначала вам нужно установить MCP-сервер с поддержкой опции автоподключения.
00:01:27Я использую Open Code, но поддерживается много других агентов. В самом Chrome
00:01:31вам нужно перейти по этому адресу и убедиться, что данная опция включена.
00:01:36Раньше вам приходилось запускать сессию командой вроде этой, и агент
00:01:40подключался к открытому порту через HTTP.
00:01:43Но с новым подходом в этом интерфейсе вы можете запускать Chrome как обычно, имея доступ
00:01:48ко всем вашим куки, истории и прочему, и отключать его, когда закончите.
00:01:53Если вы беспокоитесь о безопасности, позже в видео я покажу,
00:01:57как подключиться к более приватной версии Chrome.
00:01:59После выполнения этих двух шагов — включения опции и подключения к
00:02:04MCP-серверу с параметром автоподключения — всё должно заработать.
00:02:08Я могу попросить агента проверить производительность Betastack, и в Chrome появится
00:02:12всплывающее окно с запросом на удаленную отладку, а затем сверху возникнет баннер.
00:02:17Агент смог перейти на сайт Betastack и теперь использует
00:02:21инструмент аудита Lighthouse, чтобы выдать мне показатели Web Vitals, баллы Lighthouse и другие детали.
00:02:27А теперь давайте сделаем что-то действительно полезное.
00:02:29Вот приложение для изучения языков, над которым я работаю.
00:02:31Я зашел как админ, перешел в контент, выбрал модуль и открыл это упражнение.
00:02:37Я заметил, что в модальном окне кнопка «Сохранить» здесь внизу отличается
00:02:42от остальных кнопок на сайте.
00:02:44Вместо того чтобы вручную просить агента повторить мои шаги (войти в систему и перейти
00:02:49на эту конкретную страницу), я просто выберу кнопку «Сохранить» в инструментах разработчика,
00:02:55а затем спрошу агента, видит ли он выбранный мною элемент.
00:02:58Спустя мгновение он подтверждает, что видит выбранную кнопку «Сохранить».
00:03:02Теперь я попрошу его изменить стиль этой кнопки, чтобы она выглядела как кнопка «Новое упражнение»,
00:03:06которую вы видите вот здесь сбоку.
00:03:09Через пару секунд он изменил стиль кнопки именно так, как я хотел.
00:03:13Однако если вы запускаете MCP-сервер в песочнице, вам придется использовать
00:03:18опцию URL-адреса браузера с портом для удаленной отладки по HTTP, а не через WebSockets.
00:03:23А если вы заботитесь о безопасности, вам нужно добавить путь к директории данных пользователя
00:03:28в параметры MCP-сервера. Это значит, что у агентов не будет доступа
00:03:33к вашим куки, паролям, истории браузера и многому другому.
00:03:36И вам придется заново логиниться на сайтах, если вы хотите, чтобы агент имел к ним доступ.
00:03:41При всей крутости этой технологии, если вы смотрели мои прошлые видео, то знаете,
00:03:46что я не большой фанат MCP-серверов, так как они потребляют много контекста,
00:03:51особенно если их много.
00:03:52Но, к счастью, MCP-сервер Chrome DevTools позволяет делать всё через CLI (интерфейс командной строки),
00:03:59о чем мало кто знает, так как эта функция спрятана.
00:04:04Нужно зайти в директорию навыков, затем в Chrome DevTools CLI, чтобы найти эту экспериментальную фичу,
00:04:10которая дает агенту инструкции по использованию.
00:04:12Там же есть инструкции по установке, если вы еще этого не сделали.
00:04:16По сути, это легкая оболочка вокруг MCP-сервера.
00:04:20И если сервер уже запущен внутри оболочки агента, этот CLI не будет его использовать,
00:04:24так как у него свой собственный демон (фоновый процесс).
00:04:26Эта команда выводит информацию о стандартном демоне, и вы видите,
00:04:30что флаг URL браузера уже установлен вместе с другими флагами, такими как headless и isolated.
00:04:34Но вы также заметите, что в доступных опциях CLI нет автоподключения.
00:04:39Так что если вы не запускали Chrome через терминал, вам придется закрыть текущий экземпляр
00:04:43и запустить его вот так, убедившись, что при использовании флага порта удаленной отладки
00:04:48вы также указали флаг директории данных пользователя.
00:04:50Теперь, когда всё готово, я могу запустить демон, получить список страниц,
00:04:54где пока видна только одна новая вкладка, так как там больше ничего нет.
00:04:57Но, конечно, настоящая мощь проявляется при использовании с агентом.
00:05:01Если я отключу инструмент Chrome MCP, выберу эту кнопку в DevTools и попрошу агента
00:05:06использовать CLI, чтобы определить выбранный элемент, мы увидим, что он справился.
00:05:10Заметьте.
00:05:11Информация в директории данных пользователя сохраняется между сессиями.
00:05:15Так что все мои куки, данные браузера и прочее остаются на месте.
00:05:19Кроме того, Chrome DevTools CLI умеет гораздо больше.
00:05:22Так что рекомендую ознакомиться с этим навыком — возможно, в будущем
00:05:26они добавят функцию автоподключения.
00:05:28Вот и всё: краткий обзор новых крутых фишек MCP-сервера
00:05:32и CLI для Chrome DevTools, которые точно упростят отладку
00:05:38с помощью ИИ-ассистентов.
00:05:39Как пользователь Arc (да, я всё еще на Arc), я очень надеюсь, что эта фича появится и там.
00:05:45А пока я с удовольствием использую Agent Browser от Vassal, который
00:05:50отлично себя показывает.
00:05:51Если вы ничего не знаете про Agent Browser, посмотрите моё старое видео,
00:05:55хотя с тех пор он стал намного лучше.
00:05:58Так что, возможно, пришло время записать о нём новый ролик.