Отладка

В мобильном приложении нет привычной консоли браузера под рукой, но инструменты отладки те же: вывод в консоль, точки останова, просмотр дерева компонентов. Они доступны из терминала, где запущен npx expo start.

console.log

Вывод console.log на телефоне попадает в терминал на компьютере:

// app/(tabs)/index.tsx
async function load() {
  const response = await fetch(`${API}/posts`);
  const data = await response.json();
  console.log('Загружено статей:', data.length);
  setPosts(data);
}

После загрузки списка в терминале появится строка «Загружено статей: 100». console.warn и console.error выводятся там же и дополнительно показываются плашкой внизу экрана приложения.

Красный экран и предупреждения

Красный экран показывает текст ошибки и стек вызовов с именами файлов и номерами строк. Исправьте код и сохраните файл — Fast Refresh уберёт экран. Плашку предупреждения можно нажать, чтобы прочитать подробности. В собранном для магазина приложении этих экранов нет — там ошибка просто закрывает приложение.

Меню разработчика

Меню открывается клавишей m в терминале или жестом на устройстве:

В меню есть перезагрузка, переключение Fast Refresh, инспектор элементов (нажмите на элемент на экране — увидите его стили и размеры) и монитор производительности.

React Native DevTools

Нажмите j в терминале — в браузере Chrome или Edge откроется React Native DevTools. Это отладчик, похожий на инструменты разработчика браузера:

• вкладка Console — вывод console.log и выполнение выражений;
• вкладка Sources — исходный код и точки останова;
• вкладки Components и Profiler — дерево компонентов React с пропсами и состоянием, замер скорости рендера.

Поставьте точку останова на строке с setPosts(data) и потяните список вниз — выполнение остановится, и вы увидите содержимое data. Тот же эффект даёт строка debugger; в коде.

Частая ошибка

Искать вывод console.log в браузере, открыв приложение на телефоне. Он появляется в терминале, где запущен npx expo start, и в консоли React Native DevTools. Если терминал закрыт или сервер перезапущен в другом окне, сообщения теряются — держите окно сервера на виду.