ExecBro
Початок роботи
Налаштуйте MCP-сервер, щоб налагоджувати свій React Native застосунок за допомогою AI.
1
додайте MCP-сервер у свою IDE
claude mcp add execbro --scope project -- npx -y execbro@latest
Налаштування для VS Code Copilot, Cursor і драйвера iOS дивіться в повному посібнику з налаштування.
2
встановіть помічники для автоматизації UI
brew install cameroncooke/axe/axe
Потрібно для тапів, свайпів, введення тексту та запитів accessibility у симуляторі iOS (AXe CLI, драйвер за замовчуванням; як альтернатива доступний IDB). Android працює одразу через ADB, нічого додатково налаштовувати не треба. Повний посібник описує варіанти драйверів.
3
встановіть SDK у свій застосунок рекомендовано
npm install execbro-sdk
Найбільше покращення якості налагодження: під’єднайте свої сховища стану (Redux, TanStack Query) і мережевий шар напряму до агента, щоб він бачив справжній стан застосунку й повні тіла запитів і відповідей, а не вгадував ззовні. Один імпорт у вхідному файлі вашого застосунку (не в MCP-сервері ExecBro). Налаштування й параметри SDK.
4
увійдіть і під’єднайте вебкабінет необов’язково
ExecBro безкоштовний, без лімітів і без потреби в акаунті. Увійдіть, щоб бачити статистику використання, історію сесій і налаштування в кабінеті. Саме прив’язка встановлення тут виводить ваше використання в цей кабінет.
5
запустіть свій React Native застосунок
npm start
6
попросіть свого AI-асистента
Підключись до симулятора і з’ясуй, що спричинило помилку на екрані
Можливості
Взаємодія під час виконання
- Перехоплення логів консолі: console.log, warn, error, info, debug з фільтрацією та пошуком
- Відстеження мережевих запитів: HTTP-запити та відповіді із заголовками, таймінгами й тілом
- Виконання JavaScript: запускайте код просто у своєму застосунку (у стилі REPL) і досліджуйте результати
- Налагодження глобального стану: знаходьте й досліджуйте Apollo Client, сховища Redux, Expo Router і власні глобальні об’єкти. Під’єднайте сховища та внутрішні частини застосунку напряму до агента через необов’язковий SDK для прямого й надійного доступу до стану
- Виявлення помилок бандла: помилки бандлера Metro і проблеми компіляції з розташуванням у файлах
Керування пристроєм
- Симулятор iOS: скриншоти, керування застосунками, відкриття URL, запуск і завершення
- Пристрої Android: скриншоти, встановлення й запуск застосунків, керування пакетами
- Уніфікований тап: один інструмент тапу з автоматичним ланцюжком запасних варіантів: дерево fiber → accessibility → OCR → координати
- Автоматизація UI: свайп, довге натискання, введення тексту та події клавіш на обох платформах
- Інспекція accessibility: запити до ієрархії UI, щоб знаходити елементи за текстом, підписом або resource ID
- Розпізнавання тексту (OCR): видимий текст із координатами для тапу через Google Cloud Vision
Налагодження на кількох пристроях
- Підключення всіх пристроїв: scan_metro автоматично знаходить усі Bridgeless-цілі й підключається до них
- Вибір пристрою: кожен інструмент приймає необов’язковий параметр device, щоб працювати з конкретним пристроєм
- Окремі буфери для пристроїв: логи й мережеві запити збираються окремо для кожного пристрою
Electron і Chromium (експериментально)
- Десктопні React-застосунки: вікно Electron або вкладка Chrome підключаються поруч із вашими симуляторами, і кожен інструмент приймає той самий параметр device
- Що працює: логи, перехоплення й мокання мережі, execute_in_app, Redux, інспекція компонентів, читання екрана (get_screen_state, get_screen_layout, inspect_at_point), а також screenshot, tap, input_text, swipe, press_key і handle_dialog для JavaScript-алертів
- Старт без налаштувань:
electron_launch_appзапускає Electron-проєкт із теки з вихідним кодом з відкритим портом налагодження і підключає його вікна. Зібрані застосунки ніколи не запускаються - Або ввімкніть вручну: додайте
if (!app.isPackaged) app.commandLine.appendSwitch('remote-debugging-port', '9222')у головний процес, потім під’єднайтеся черезconnect_metro({ port: 9222, device: "<window title>" }). Не прибирайте перевірку isPackaged: відкритий порт налагодження в опублікованому застосунку дозволяє будь-кому, хто до нього дістанеться, виконувати в ньому код - Поки що ні: pinch, navigate та інші інструменти лише для мобільних відхиляють ціль Chromium із відповідним повідомленням
Нативний Android (preview)
- Kotlin-застосунки без JavaScript-рантайму: нативний застосунок, що містить execbro-sdk-android у своїй debug-збірці, реєструє іменований стан і команди, а scan_metro знаходить його через adb поруч з іншими цілями
- Що працює: list_debug_globals та inspect_global читають зареєстрований стан, run_app_command виконує зареєстровані команди, navigate керує Jetpack Navigation, screenshot знімає екран, а інструменти android_* натискають клавіші й запускають застосунки
- Незабаром: SDK ще не опубліковано в Maven. Інструкції зі встановлення з’являться разом із релізом
Під капотом
- Автовиявлення: сканує Metro на портах 8081-8090, показує цілі Electron/Chrome на 9222 і знаходить нативні Android-застосунки з execbro-sdk-android через adb
- Автоперепідключення: експоненційна затримка (до 8 спроб)
- Ефективна буферизація: кільцеві буфери на 500 логів і 200 мережевих запитів
- Підтримувані платформи: Expo SDK 54+, React Native 0.70+
Доступні інструменти
Усі 58 інструментів з описами дивіться в повному довіднику інструментів. Ключові інструменти:
| Інструмент | Опис |
|---|---|
| scan_metro | Почніть звідси: пошук серверів Metro та автоматичне підключення |
| get_logs / search_logs | Перехоплення й пошук логів консолі з фільтрацією та зведеннями |
| get_network_requests | Відстеження HTTP-запитів з фільтрацією за методом і статусом |
| get_screen_state | Знімок без скриншота: активний маршрут, оверлеї, що перекривають екран, і всі елементи на екрані з координатами для тапу |
| get_screen_layout | Карта екрана з видимими компонентами, їхніми позиціями, розмірами й текстом |
| tap | Уніфікований тап: сам визначає платформу і пробує fiber → accessibility → OCR → координати |
| execute_in_app | Виконання JS-виразів у рантаймі застосунку (у стилі REPL) |
| screenshot | Скриншот на будь-якій платформі: симулятор iOS, Android, Electron чи Chrome. Також знімає фізичний iPhone/iPad, підключений через USB (лише знімок) |
Навички Claude Code
Готові навички для типових сценаріїв налагодження. Повний список та інструкції зі встановлення дивіться в посібнику з навичок.
| Навичка | Опис |
|---|---|
| session-setup | Запуск сесії налагодження: пошук пристроїв, запуск симуляторів, підключення до Metro |
| debug-logs | Перехоплення, фільтрація й аналіз логів консолі |
| network-inspect | Відстеження й аналіз HTTP-запитів і збоїв |
| device-interact | Автоматизація взаємодії з пристроєм: тап, свайп, введення тексту |
| component-inspect | Інспекція дерева React-компонентів, props і стану |
Детальні посібники
| Посібник | Опис |
|---|---|
| Налаштування платформ та IDE | Налаштування Claude Code, VS Code Copilot, Cursor та встановлення драйвера iOS |
| execbro-sdk | Необов’язковий SDK для застосунку: встановлення, налаштування та повний довідник API |
| Повний довідник інструментів | Повний список усіх 58 інструментів з описами |
| Навички Claude Code | Готові навички для налаштування сесії, налагодження та автоматизації |
Підтримувані версії React Native
| Версія | Архітектура | Рушій | Статус |
|---|---|---|---|
| Expo SDK 54+ | Bridgeless (New Arch) | Hermes | Повна підтримка |
| RN 0.76+ | Bridgeless (New Arch) | Hermes | Повна підтримка |
| RN 0.73 – 0.75 | Bridge (Old Arch) | Hermes | Повна підтримка |
| RN 0.70 – 0.72 | Bridge (Old Arch) | Hermes / JSC | Підтримується |
| RN < 0.70 | Bridge | JSC | Не перевірено |
Усунення проблем
Пристрої не знайдено
- Сервер не підключається автоматично: агент має спершу викликати
scan_metro, щоб знайти сервери Metro і підключитися до них - Переконайтеся, що ваш React Native застосунок запущено з бандлером Metro
- Перевірте, що Metro доступний за адресою
http://localhost:8081
Логи не з’являються
- Переконайтеся, що застосунок справді запущено (а не лише Metro)
- Попросіть агента викликати
clear_logs, а потім виконайте кілька дій у застосунку - Під час холодного старту: з’єднання CDP встановлюється вже після ранньої ініціалізації. Попросіть агента викликати
reload_app: наступне перезавантаження перехопить усе. Для повного перехоплення старту встановіть необов’язковий SDK
Підключено не той пристрій
- Попросіть агента викликати
list_devices, щоб побачити всі симулятори, емулятори й фізичні пристрої, абоget_apps, щоб побачити лише ті, що вже підключені до Metro - Попросіть агента явно вказати назву пристрою
Відгуки та побажання
Маєте ідею або знайшли, що можна покращити? Заходьте в GitHub Discussions, щоб поділитися відгуком, запропонувати функцію й проголосувати за те, що буде зроблено далі.