chrome-devtools

Chrome DevTools Agent — навык для управляемого взаимодействия с живой страницей через Chrome DevTools MCP. Он подходит, когда одной HTTP-проверки недостаточно: нужно открыть URL, увидеть фактическое состояние интерфейса, выполнить действие, проверить консоль или понять, какой сетевой запрос вызвал проблему. Рабочий процесс начинается с управления вкладками: можно создать страницу, перейти по адресу, перезагрузить её, выбрать нужный контекст, дождаться текста или закрыть лишнюю вкладку. Для поиска интерактивных элементов рекомендуется сначала снять accessibility snapshot и использовать полученные uid; это надёжнее, чем угадывать селекторы по скриншоту. В категории взаимодействия доступны клик, заполнение одного или нескольких полей, наведение, отправка клавиш, drag-and-drop, обработка диалогов и загрузка файла. Такой набор покрывает обычные сценарии проверки форм, меню, фильтров и динамических состояний. Для визуального контроля можно снять скриншот страницы или элемента, но для логического поиска элементов предпочтителен текстовый snapshot. После заметной навигации или изменения DOM snapshot нужно получать заново, потому что uid может измениться. Таймауты для ожидания следует держать разумными, чтобы диагностика медленной страницы не превращалась в зависший запуск. Для отладки навык объединяет консоль и сеть. Сначала можно перечислить сообщения браузера и получить конкретное сообщение, затем перечислить сетевые запросы и открыть детали неуспешного ответа. JavaScript на странице проверяется через evaluate_script: так можно узнать значение DOM-элемента, наличие JSON-данных, состояние приложения или результат небольшого диагностического выражения. Консоль без сетевого контекста показывает симптом, а сеть помогает связать его с API, статикой, редиректом или ошибкой загрузки; поэтому при неисправности полезно смотреть оба источника. Для производительности предусмотрен отдельный цикл: начать trace с перезагрузкой, дождаться завершения записи и разобрать insight. До этого стоит выбрать страницу и условия эмуляции, если нужно проверить другую ширину viewport, CPU или сеть. Навык поддерживает resize и emulate, поэтому можно воспроизвести проблемы адаптивности и замедленного соединения. В результатах следует отделять наблюдение от вывода: screenshot показывает внешний эффект, console и network — техническое событие, trace — последовательность и влияние на performance. Chrome DevTools Agent — инструмент инспекции и автоматизации; он не заменяет продуктовую проверку, security-аудит или доказательство поведения, которое не было воспроизведено в браузере.