ExecBro
← усі статті

Читайте логи консолі React Native застосунку просто з AI-агента (ExecBro)

туторіали

clear_logsget_logsget_pressable_elementsios_screenshotscan_metrosearch_logsswipetap

Налагодження екрана React Native зазвичай коштує вам двох перемикань контексту. Спершу ви вручну проклацуєте застосунок, щоб дістатися екрана, який поводиться неправильно. Потім перемикаєтеся в термінал Metro й гортаєте потік виводу консолі в пошуках тих трьох рядків, що мають значення, а якщо хочете, щоб допоміг AI-агент, копіюєте ці рядки в чат.

ExecBro прибирає обидва кроки. Він відкриває запущений застосунок вашому агенту через MCP: get_pressable_elements каже агенту, що можна натиснути, tap і swipe керують інтерфейсом, ios_screenshot показує, що сталося, а get_logs / search_logs / clear_logs дають прямий доступ до буфера консолі. Агент сам переходить екранами й сам читає логи.

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

1. Підключіть MCP-сесію через scan_metro

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

Error: No apps connected. Run 'scan_metro' first.

Запустіть scan_metro на порту, де працює Metro:

mcp__execbro__scan_metro {"startPort": 8090, "endPort": 8090}
Metro scan results:
Port 8090: Found 1 device(s)
  - Connected to org.reactjs.native.example.RnDebuggerTestApp (iPhone 14)

Один пристрій, підключено. Тепер кожен інструмент нижче має з чим говорити.

2. Зафіксуйте стан через ios_screenshot

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

mcp__execbro__ios_screenshot {"udid": "A4287B5C-5156-40B1-86F9-32CD855FBD4A"}
Screenshot: raw 1170x2532 px → delivered 924x2000 px (downscaled 0.790× to fit API limits).
Pressable coordinates below are in delivered-image pixels.

Симулятор iOS на вкладці UI/Debug з екраном Tap Targets

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

3. Складіть карту того, що можна натиснути, через get_pressable_elements

Ніколи не вгадуйте координати. get_pressable_elements повертає те, що можна натиснути саме зараз:

mcp__execbro__get_pressable_elements {}
Found 20 pressable elements (3 icon-only, 17 with text labels)

1. HeaderMenuButton "☰" — center:(92,164) frame:(47,128 88x71) [a11y="Open navigation …"]

Чипи навігації в цьому списку закінчуються на "Tap Targets", "Scroll", "Gallery" і "Reanimated". Чипа "Diagnostics", тобто потрібного вам екрана, немає.

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

4. Прокрутіть приховане у видиму область через swipe

Те, чого не видно на екрані, натиснути не можна, тож прокрутіть його у видиму область. Проведіть ліворуч уздовж смуги навігації, використовуючи координату y, на якій смуга справді розташована:

mcp__execbro__swipe {"startX": 800, "startY": 294, "endX": 200, "endY": 294, "durationMs": 400}
{
  "success": true,
  "platform": "ios",
  "from": {"x": 800, "y": 294},
  "to": {"x": 200, "y": 294}
}

Смугу навігації прокручено ліворуч, видно чип Diagnostics

Потім знову перечитайте карту. Не вважайте, що свайп спрацював, перевірте це:

mcp__execbro__get_pressable_elements {}
Found 21 pressable elements (3 icon-only, 18 with text labels)

Тепер двадцять один елемент замість двадцяти, і "Diagnostics" стоїть шостим із центром (773, 294) і testID screen-nav-Diagnostics.

Подивитися → діяти → подивитися знову. У цьому весь цикл.

5. Натискайте за testID, а не за координатами

Тепер, коли елемент справді на екрані, натисніть його за testID. Координати крихкі через різні розміри екранів і позиції прокрутки, а testID ні:

mcp__execbro__tap {"testID": "screen-nav-Diagnostics", "screenshot": false}
{
  "success": true,
  "method": "accessibility",
  "query": {"testID": "screen-nav-Diagnostics"},
  "pressed": "Diagnostics"
}

Переконайтеся ще одним скриншотом, що опинилися там, де планували:

mcp__execbro__ios_screenshot {"udid": "A4287B5C-5156-40B1-86F9-32CD855FBD4A"}

Екран Diagnostics із кнопками console.log, console.warn і console.error

Екран Diagnostics відкрито, на ньому кнопки console.log, console.warn (LogBox) і console.error.

6. Прочитайте буфер через get_logs(summary: true)

Буфер консолі живе в MCP-сервері, а не у вашому терміналі, і саме тому агент може читати його напряму, а не просити вас щось вставити. Завжди починайте зі зведення, а не з повного дампу:

mcp__execbro__get_logs {"summary": true}
Log Summary (SDK):

Total logs: 4

By Level:
  log: 4

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

Звідки вже чотири записи: різниця, яку дає execbro-sdk

Подивіться на мітку: Log Summary (SDK). Ці чотири записи з’явилися під час запуску застосунку, задовго до підключення MCP-сесії. Це можливо лише тому, що в демо-застосунку встановлено execbro-sdk.

Різниця важлива:

  • Без SDK MCP-сервер може показати лише вивід, що з’явився після підключення застосунку. Усе, що було залоговано під час старту, зникає ще до того, як ви під’єднаєтеся.
  • З SDK він патчить console в момент запуску застосунку й тримає власний кільцевий буфер усередині процесу застосунку.

Цей буфер у застосунку також переживає розрив з’єднання. Якщо Metro перезапуститься або ваш агент від’єднається й під’єднається знову, історія й далі лежить у застосунку й чекає на запит. Без SDK розрив з’єднання означає, що все залоговане, поки вас не було, просто не відновити.

Суфікс (SDK) у відповіді показує, в якому режимі ви працюєте.

7. Скиньте буфер через clear_logs перед відтворенням

Хоч у якому режимі ви працюєте, буфер кільцевий, приблизно на 500 записів. Балакучий застосунок витісняє найстаріші рядки просто з-під вас, тож гортати назад і сподіватися, що докази вціліли, погана ставка. Спершу очистіть, потім відтворюйте:

mcp__execbro__clear_logs {}
Cleared 4 log entries from all devices.

Переконайтеся, що вихідна точка справді чиста:

mcp__execbro__get_logs {"summary": true}
Log Summary (SDK):

Total logs: 0

Нуль. Усе, що з’явиться далі, належить до запуску, який ви от-от зробите, і саме це робить результат надійним.

8. Відтворіть, а потім звужуйте через level і search_logs

Запустіть відтворення. Тут це три тапи, по одному на кожен рівень консолі:

mcp__execbro__tap {"testID": "diag-log",   "screenshot": false}
mcp__execbro__tap {"testID": "diag-warn",  "screenshot": false}
mcp__execbro__tap {"testID": "diag-error", "screenshot": false}

Тап по кнопці console.log на екрані Diagnostics

Візуальних змін не чекайте: ці кнопки лише пишуть у консоль. Саме тут інструменти логів і доводять свою цінність: скриншот нічого не скаже.

Тап по кнопці console.error, на екрані без видимих змін

Знову спершу зведення:

mcp__execbro__get_logs {"summary": true}
Log Summary (SDK):

Total logs: 3

By Level:
  log: 1
  warn: 1
  error: 1

Три записи, по одному на рівень, і всі три належать до вашого відтворення. Тепер звужуйте. Фільтруйте за серйозністю через level:

mcp__execbro__get_logs {"level": "error"}
Console Logs (1 entries, SDK):

9:56:52 PM [error] [playground] error log

Або фільтруйте за текстом на всіх рівнях через search_logs:

mcp__execbro__search_logs {"text": "playground"}
Search results for "playground" (3 matches, SDK):

9:56:52 PM [error] [playground] error log
9:56:47 PM [warn] [playground] warning for LogBox
9:56:41 PM [log] [playground] log message

Просте правило: беріть search_logs, коли вже знаєте рядок, який шукаєте, і get_logs, коли ще досліджуєте й хочете розрізати логи за серйозністю.

9. Залиште по собі чистий буфер

Наприкінці очистіть буфер ще раз, щоб наступне розслідування почалося з нуля, а не успадкувало ваш шум:

mcp__execbro__clear_logs {}
Cleared 6 log entries from all devices.

Висновок

Тепер ви можете керувати запущеним React Native застосунком повністю з AI-агента: скриншот, щоб зафіксувати стан, get_pressable_elements, щоб побачити, що є насправді, swipe, щоб дістати приховане, і tap за testID, щоб діяти, а потім get_logs, level і search_logs, щоб читати консоль, яка вже є в агента, з clear_logs на початку й наприкінці відтворення, щоб зібрані докази були однозначними.

Жодних ручних тапів. Жодного гортання термінала Metro. Подивитися, діяти, подивитися знову, а потім прочитати логи.