AIKraft/Skills/chrome-devtools

chrome-devtools

Использует Chrome DevTools через MCP для отладки, автоматизации браузера и анализа производительности. Применяется при отладке веб-страниц, инспекции сетевых запросов и взаимодействии с браузером. Не работает в режиме --slim.

GOGoogle official Разработка ★ 53k

Что делает навык

Использует Chrome DevTools через MCP для отладки, автоматизации браузера и анализа производительности веб-страниц. Позволяет управлять жизненным циклом браузера, взаимодействовать с элементами страниц и выполнять скрипты.

Когда применять

  • Отладка веб-страниц и инспекция их структуры
  • Анализ производительности и отладка памяти
  • Автоматизация взаимодействия с браузером
  • Выполнение JavaScript-кода на целевых страницах
  • Работа с расширениями и service workers

Как работает

  1. Запустить браузер (запускается автоматически при первом вызове инструмента с использованием постоянного профиля Chrome)
  2. Использовать list_pages для получения доступных страниц и их pageId или создать новую страницу через new_page
  3. Вызвать take_snapshot для получения структуры страницы с уникальными идентификаторами элементов (uid)
  4. Взаимодействовать с элементами страницы, используя их uid, или делать новый снимок, если элемент не найден
  5. Выполнять скрипты через evaluate_script, указывая pageId для страниц или serviceWorkerId для расширений
  6. При необходимости включить дополнительные инструменты (расширения или память) через флаги --categoryExtensions или --memoryDebugging в конфигурации MCP

Примеры запросов агенту

Открой главную страницу сайта и сделай снимок структуры, чтобы найти кнопку входа
Выполни JavaScript-код, который выводит количество элементов с классом 'product' на текущей странице
Проверь доступные вкладки браузера и получи их идентификаторы для дальнейшей работы

Что понадобится

  • MCP-сервер chrome-devtools-mcp
  • Установленный Chrome/Chromium
  • Не работает в режиме --slim

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «chromedevtools-chrome-devtools» из репозитория: # https://github.com/chromedevtools/chrome-devtools-mcp
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r chromedevtools-chrome-devtools/ ~/.claude/skills/chromedevtools-chrome-devtools/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.