agent-react-devtools CLI
CLI, который дает агенту смотреть работающее приложение на React: дерево компонентов, props, state, hooks и профилирование рендеров
- 251 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Фоновый демон слушает порт 8097 и по WebSocket получает данные запущенного приложения, включая `props` и state компонентов
- Команда `init` правит точку входа и конфигурацию проекта: Vite, Next.js, Create React App или Metro
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add cli/agent-react-devtoolsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Фоновый демон слушает порт 8097 и по WebSocket получает данные запущенного приложения, включая `props` и state компонентов
- Команда `init` правит точку входа и конфигурацию проекта: Vite, Next.js, Create React App или Metro
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
agent-react-devtools подключается к запущенному приложению на React или React Native по протоколу React DevTools и отдает данные в компактном формате, рассчитанном на языковые модели. Фоновый демон переживает отдельные вызовы CLI, поэтому агент не теряет связь между командами. Командой `get tree` агент получает дерево компонентов с метками `@c1`, `@c2` и глубиной по желанию, `get component` показывает `props`, state и `hooks` одного компонента, `find` ищет по имени, а `errors` перечисляет компоненты с ошибками и предупреждениями. Профилирование включают командой `profile start`, останавливают `profile stop` и затем смотрят `profile slow` (самые медленные компоненты), `rerenders` (самые частые повторные рендеры) и `timeline`. Результат можно выгрузить как JSON профайлера React DevTools и сравнить двух прогонов командой `profile diff`. Скилл `react-devtools` срабатывает на формулировки вроде «почему это перерисовывается» и «найди медленные компоненты».
Для кого. Для разработчиков на React и React Native, чьи агенты должны отлаживать работающий интерфейс, а не только читать исходники.
Подходит, если
- Интерфейс тормозит, и агент должен найти самые медленные компоненты и причины рендеров: `profile slow` показывает среднее и максимальное время и что изменилось
- Нужно понять, какие `props` и `hooks` пришли в конкретный компонент, например `TodoItem`, без правок кода и `console.log`
- Форма падает с предупреждениями: `errors` покажет компоненты с ошибками и предупреждениями, а в дереве они помечены значками
- Надо сравнить производительность до и после правки: `profile export` и `profile diff` сопоставляют два прогона
- Приложение на Vite, Next.js или Create React App нужно быстро подключить: `npx agent-react-devtools init` правит точку входа или конфигурацию
Не подходит, если
- Приложение не на React: инструмент читает дерево компонентов по протоколу React DevTools
- Нужна отладка сети, консоли и страницы в браузере в целом: инструмент показывает компоненты и рендеры, а не вкладки браузера
- Нужен стабильный инструмент без изменений: автор называет проект ранней разработкой и экспериментальным
- Вы не хотите, чтобы инструмент менял точку входа и конфигурацию: `init` вносит правки, их отменяет `uninit`
Пример запроса к агенту
Приложение тормозит при вводе в поиск. Запусти профилирование, найди самые медленные компоненты и скажи, почему они перерисовываютсяОграничения
Проект в ранней разработке, автор считает его экспериментальным. Команда `init` сама правит точку входа или конфигурацию для Vite, Next.js и Create React App; для React Native и Expo она настраивает Metro, но только для типовых конфигураций CommonJS. Для ESM, TypeScript, конфигураций в JSON или `package.json` и нестандартных путей `--config` нужна ручная настройка. Откатывает правки `npx agent-react-devtools uninit`.
Начиная с React Native 0.87, автоматического подключения без кода больше нет, нужна настройка из документации. Хост-компоненты вроде `div` скрыты по умолчанию, ключ `--all` их возвращает. Если приложение не подключено, `errors` завершается с кодом 1 и сообщением `No React app is attached`.
Как отключить. Выполните `npx agent-react-devtools uninit`, чтобы откатить правки точки входа и конфигурации. Демон останавливает `agent-react-devtools stop`, пакет удаляется командой `npm uninstall -g agent-react-devtools`.
Частые вопросы
Как поставить agent-react-devtools в Claude Code?
Установите CLI командой `npm install -g agent-react-devtools` и подключите скилл через `npx skills add callstackincubator/agent-react-devtools`. Через плагины Claude Code работают `/plugin marketplace add callstackincubator/agent-react-devtools` и `/plugin install agent-react-devtools@piotrski`.
Как подключить мое приложение на Vite?
Запустите `npx agent-react-devtools init` в корне проекта или добавьте в `vite.config.ts` плагин `reactDevtools()` из `agent-react-devtools/vite`, поставив его перед `react()`. Плагин работает только в режиме разработки, не в production-сборке.
Что делает однострочный импорт?
Строка `import "agent-react-devtools/connect"` первой в точке входа удаляет заглушку хука Vite, запускает `react-devtools-core` и соединяется по WebSocket. Если демон не запущен, приложение не блокируется и через 2 секунды продолжает работу.
На каком порту работает демон?
По умолчанию на 8097, порт меняется ключом `--port`. Команда `agent-react-devtools status` показывает, подключено ли приложение, сколько в нем компонентов и когда произошло последнее событие.
Какие агенты поддерживаются?
Скилл работает с Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Goose, OpenCode и Windsurf. Для Codex в корне репозитория есть `AGENTS.md`, который регистрирует скилл `react-devtools`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
CLI-инструментыCLI проверяет код React без нейросети по состоянию, производительности, безопасности и доступности, ставит оценку 0–100 и дает агенту скилл для исправлений
Панель разметки для React-страниц: клик по элементу дает агенту селектор и контекст, скиллы настраивают подключение и сами ведут критику интерфейса
Подключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии
Консоль, сеть, скриншоты и аудиты Lighthouse из вашего открытого Chrome прямо в агент через расширение DevTools
Скиллы Vercel для агентов
Agent Skills
Скиллы Vercel: производительность React и Next.js, проверка UI по гайдлайнам, React Native, композиция компонентов и деплой
Маркетплейс плагинов Bitovi: спецификации и реализация задач, Figma и React, Playwright QA, tRPC и Prisma
Коротко о README
Описание начинается с оговорки, что проект в ранней разработке, и перечня возможностей. Затем показан быстрый старт: запуск демона, дерево, проверка компонента, поиск и профилирование с примерами вывода. Дальше идут справочник команд, способы подключения приложения для Vite, Next.js, Create React App и React Native, использование с `agent-browser` и ассистентами и пример блока для `AGENTS.md` или `CLAUDE.md`.