🙌

ExecBroReact Native DevTools для AI-агентів, що пишуть код

Як Chrome DevTools MCP, але для React Native. Ваш AI-агент сам ходить інтерфейсом, читає мережеві запити, логи та внутрішній стан застосунку, а також створює й налагоджує функції від початку до кінця.

scan_metro12ms→connect_metro11ms→ensure_connection5ms→get_bundle_status2ms→tap4070ms→tap4162ms→get_screen_state1538ms→ios_screenshot2485ms→tap4061ms→tap2953ms→get_screen_state1350ms→get_screen_layout375ms→find_components9ms→tap4537ms→tap8735ms→find_components9ms→tap3487ms→tap3675ms→tap3740ms→clear_network17ms→clear_logs4ms→tap6864ms→tap3124ms→get_network_requests4ms→tap6267ms→tap9665ms→get_screen_state3146ms→find_components32ms→tap2998ms→tap3843ms→tap3361ms→find_components10ms→tap10715ms→tap3626ms→tap2916ms→tap4343ms→get_network_requests4ms→get_request_details3ms→get_request_details1ms→execute_in_app7ms→tap4003ms→tap6328ms→tap8047ms→execute_in_app11ms→execute_in_app9ms→list_debug_globals21ms→tap6937ms→ios_screenshot2344ms→

10d4e816723/30 дн.7 143
2e9bc702122/30 дн.4 984
378c564d421/30 дн.3 570
416b9875021/30 дн.1 901
5b0d08b7a20/30 дн.2 920
6d7e8dc4b20/30 дн.254
7e732237d19/30 дн.3 408
86bb48ecf19/30 дн.887
91758d19719/30 дн.705
103bbc6b0518/30 дн.1 177

Випробувати в ділі

Для розробників, на їхніх власних dev-збірках, симуляторах та емуляторах. Не для продакшн-застосунків чи пристроїв кінцевих користувачів.

Проблема

Сьогодні руки агента це ви.

АгентЧитає код, вгадує виправлення.

ВиПерезавантажуєте застосунок. Проклацуєте чотири екрани, щоб дістатися бага.

ВиКопіюєте stack trace з термінала Metro. Вставляєте в чат.

АгентЗнову вгадує, трохи краще поінформований.

↺ повторити 6–10 разів на кожен баг

Половину кожної сесії налагодження людина працює пристроєм вводу-виводу. Агент повільний не тому, що недолугий: він повільний, бо працює з описом застосунку, а не з самим застосунком.

Що це

Один MCP-сервер, що під’єднує агента до запущеного застосунку.

Claude Code── MCP ──▸ExecBro── CDP / adb / simctl ──▸Metro──▸Ваш застосунок на симуляторі

Він говорить протоколами, якими вже користуються інструменти: Chrome DevTools Protocol через інспектор Metro, плюс adb і simctl для самого пристрою. Щоб почати, у застосунку нічого не треба змінювати: вкажіть запущений Metro, і він підключиться до кожного під’єднаного пристрою. 67 інструментів опиняються в руках агента, і він сам обирає потрібні.

Можливості

Чотири речі, які він отримує: очі, руки, рентген і важіль.

Очі

Читає запущений застосунок

Логи консолі й нативні логи, увесь мережевий трафік, скриншоти, OCR і текстовий знімок усього екрана з координатами для тапу.

get_logs · get_network_requests
get_screen_state · screenshot

Руки

Керує пристроєм

Тап за testID, видимим текстом чи назвою компонента, із запасними варіантами аж до accessibility, OCR і зрештою сирих координат. Свайп, довге натискання, введення тексту, щипок, deep link.

tap · swipe · input_text
reload_app · navigate

Рентген

Бачить, що відрендерилося

Дерево React fiber: props, хуки, стан, frame кожного предка, а також файл і рядок коду за будь-якою координатою на екрані.

inspect_at_point · find_components
redux_get_state · execute_in_app

Важіль

Змінює умови

Замокайте або підправте відповідь, щоб гілка помилки пройшла через ваш справжній код. Вимкніть мережу, зробіть так, щоб упала лише перша повторна спроба, повторіть перехоплений запит зі зміненим полем.

network_mock · network_condition
network_replay

Справжня сесія

Один промпт. Жодної людини в циклі.

Бейдж кошика не оновлюється після додавання кросівок. З’ясуй чому.

scan_metro

connected · iPhone 16 Pro (Bridgeless) · port 8081

get_screen_state

route /product/8821 · "Add to cart" (196, 742)

tap { text: "Add to cart" }

tapped · visual change detected · badge still reads 0

get_network_requests

POST /api/cart → 201 · { "ok": true, "lineId": 4417 }

get_logs { level: "error" }

no errors this run

redux_get_state { path: "cart" }

{ items: [ … 1 item ], count: 0 }

find_components { pattern: "CartBadge" }

CartBadge → useSelector(s => s.cart.count)

Запит успішний, і items записано, але cartSlice.addItem ніколи не збільшує count, а селектор бейджа читає count, а не items.length. src/store/cartSlice.ts:52

Тут нічого не вставляли вручну. Агент сам перейшов на екран, натиснув кнопку, подивився мережу, прочитав store і знайшов рядок, а далі може виправити його й знову натиснути кнопку, щоб переконатися.

Де це окуповується

Три завдання, які більшість команд роблять важким шляхом.

Завдання перше

Налагодити те, що відтворюється

Опишіть симптом, і агент сам відтворить баг. Він дістанеться потрібного екрана, викличе збій і прочитає логи, мережу та стан саме в ту мить, коли все ламається, замість того, щоб просити у вас усе це по одному повідомленню.

Завдання друге

Перевірити щойно зроблене

«Ти змінив флоу оформлення замовлення, пройди його». Агент проходить увесь флоу на симуляторі й розповідає, що побачив. Ловить той клас промахів, коли код правильний, а з’єднання між частинами ні.

Завдання третє

Перевірити шляхи помилок, не ламаючи бекенд

Замокайте 500, таймаут, зіпсоване тіло, невдалу першу спробу. Ваш справжній конструктор запитів, гілка помилки й повторна спроба працюють як є: жодних змін у staging і жодних прохань до бекенд-команди щось зламати на десять хвилин.

Чесні обмеження

Чого він не робить.

Лише dev-збіркиВін працює через інспектор Metro. У release-збірці немає Metro, CDP і LogBox, тож немає до чого під’єднуватися.

Для логів холодного старту потрібен SDKСервер під’єднується після запуску застосунку, тож перші рядки логів і стартові запити пропускаються. Необов’язковий execbro-sdk буферизує все з першого рядка й закриває цю прогалину.

Для тапів на iOS потрібна одна brew-командаСкриншоти працюють одразу; тап, свайп і введення тексту в симуляторі йдуть через AXe. Android не потребує нічого, крім adb.

Щипок лише в емуляторі AndroidСправжній мультитач двома пальцями потребує gRPC-мосту емулятора. iOS у роботі: інструмент відмовляє, а не імітує масштабування.

Він справді керує вашим симуляторомЦе не пісочниця і не відтворення запису. Якщо він натисне «Видалити акаунт» у збірці, де ви увійшли, це буде справжній запит. Спрямовуйте його на dev-середовище.

Налаштування · близько чотирьох хвилин

Як запустити.

Зареєструйте сервер у Claude Code

# this project only — writes .mcp.json, commit it and the team gets it too
claude mcp add execbro --scope project -- npx -y execbro@latest

# or everywhere, if you live in React Native
claude mcp add execbro --scope user -- npx -y execbro@latest

Краще --scope project. Без сервера Metro ExecBro нічого не робить, тож --scope user запускає його в кожній сесії, яку ви відкриваєте, зокрема в бекенд- і веб-репозиторіях, де немає симулятора, з яким можна говорити. Рівень проєкту також записує .mcp.json, який можна закомітити, тож решта команди отримає його, нічого не роблячи.

Встановлювати нічого не треба в жодному разі: npx завантажує останню версію на вимогу. Після цього закрийте й знову запустіть Claude Code, щоб він підхопив сервер.

Додайте драйвер автоматизації iOS

brew install cameroncooke/axe/axe

Потрібен лише для тапів, свайпів і введення тексту в симуляторі iOS. Якщо ви на Android, пропустіть цей крок.

Необов’язково, але це найбільше покращення

npm i execbro-sdk

Один init() у вхідному файлі застосунку дає агенту прямі посилання на те, що інакше йому доводиться вгадувати ззовні: будь-які сховища стану вашого застосунку, navigation container і сам HTTP-клієнт, тож він може надіслати запит через справжні перехоплювачі застосунку. Плюс повні тіла запитів і відповідей і кожен лог із першого рядка старту.

// index.js — dev only, tree-shaken out of release
import { init } from "execbro-sdk";
import { store } from "./store";            // Redux, Zustand, MobX…
import { queryClient } from "./queryClient";  // TanStack, Apollo…
import { http } from "./api/client";        // axios, ky, fetch wrapper
import { navigationRef } from "./navigation";

if (__DEV__) {
  init({
    // any state containers, keys are yours to name
    stores: { redux: store, queryClient },
    // routes and params it can inspect
    navigation: navigationRef,
    // anything else worth reaching — HTTP client,
    // MMKV, feature flags, your own singletons
    custom: { http },
  });
}

Необов’язково: передайте йому готові сценарії

Дев’ять готових навичок Claude Code поєднують ці інструменти в послідовності, які справді працюють: /session-setup, /debug-logs, /network-inspect, /component-inspect і ще п’ять. Кожна має власні правила запуску, тож Claude сам бере потрібну без підказки: /bundle-check, коли бачить червоний екран, /session-setup, коли ще нічого не підключено. Переглянути навички →

Спробуйте

Візьміть цього тижня один баг і не торкайтеся симулятора.

Оберіть те, на що зазвичай пішов би цілий день, передайте агенту і дозвольте йому самому натискати кнопки. Усе перше повідомлення виглядає так:

Підключись до симулятора і скажи, чому бейдж кошика лишається на нулі

Без назв інструментів і без церемоній налаштування: scan_metro сам знаходить кожен під’єднаний пристрій, а решту обирає агент.

Випробувати в ділі Переглянути презентацію