Агент Chrome DevTools

Обзор

Специализированный скилл для управления и инспекции живого браузера Chrome. Использует MCP-сервер chrome-devtools для широкого спектра задач — от простой навигации до сложного профилирования производительности.

Когда использовать

• Автоматизация браузера: навигация по страницам, клики, заполнение форм, обработка диалогов.
• Визуальная инспекция: скриншоты или текстовые снимки страниц.
• Отладка: инспекция сообщений консоли, выполнение JavaScript в контексте страницы, анализ сетевых запросов.
• Анализ производительности: запись и анализ трасс для поиска узких мест и проблем Core Web Vitals.
• Эмуляция: изменение viewport, эмуляция условий сети/CPU.

Категории инструментов

1. Навигация и управление страницами

• new_page: открыть новую вкладку/страницу.
• navigate_page: перейти по URL, перезагрузить или двигаться по истории.
• select_page: переключить контекст между открытыми страницами.
• list_pages: увидеть все открытые страницы и их ID.
• close_page: закрыть конкретную страницу.
• wait_for: дождаться появления определённого текста.

2. Ввод и взаимодействие

• click: клик по элементу (используйте uid из снимка).
• fill / fill_form: ввод текста в поля или заполнение нескольких полей сразу.
• hover: навести мышь на элемент.
• press_key: отправить сочетания клавиш или спецклавиши (например, "Enter", "Control+C").
• drag: перетаскивание элементов.
• handle_dialog: принять или отклонить алерты/промпты браузера.
• upload_file: загрузить файл через file-input.

3. Отладка и инспекция

• take_snapshot: получить текстовое дерево доступности (лучше всего для поиска элементов).
• take_screenshot: визуальный снимок страницы или конкретного элемента.
• list_console_messages / get_console_message: инспекция вывода консоли.
• evaluate_script: запуск кастомного JavaScript в контексте страницы.
• list_network_requests / get_network_request: анализ сетевого трафика и деталей запросов.

4. Эмуляция и производительность

• resize_page: изменить размеры viewport.
• emulate: троттлинг CPU/сети или эмуляция геолокации.
• performance_start_trace: начать запись профиля производительности.
• performance_stop_trace: остановить запись и сохранить трассу.
• performance_analyze_insight: подробный анализ по записанным данным.

Паттерны рабочих процессов

Паттерн A: поиск элементов (сначала снимок)

Всегда предпочитайте take_snapshot вместо take_screenshot для поиска элементов. Снимок даёт значения uid, которые требуются инструментам взаимодействия.

1. `take_snapshot` to get the current page structure.
2. Find the `uid` of the target element.
3. Use `click(uid=...)` or `fill(uid=..., value=...)`.

Паттерн B: устранение ошибок

Когда страница сбоит, проверяйте и логи консоли, и сетевые запросы.

1. `list_console_messages` to check for JavaScript errors.
2. `list_network_requests` to identify failed (4xx/5xx) resources.
3. `evaluate_script` to check the value of specific DOM elements or global variables.

Паттерн C: профилирование производительности

Выясните, почему страница медленная.

1. `performance_start_trace(reload=true, autoStop=true)`
2. Wait for the page to load/trace to finish.
3. `performance_analyze_insight` to find LCP issues or layout shifts.

Лучшие практики

• Осознанность контекста: запускайте list_pages и select_page, если не уверены, какая вкладка активна.
• Снимки: делайте новый снимок после крупной навигации или изменения DOM — значения uid могут измениться.
• Таймауты: используйте разумные таймауты для wait_for, чтобы не зависать на медленных элементах.
• Скриншоты: используйте take_screenshot умеренно для визуальной проверки, но полагайтесь на take_snapshot для логики.