Отладка приложения

Краткий обзор инструментов, которые помогают находить и чинить ошибки в RN-приложении.

console.log — первый помощник

Самый простой и частый инструмент отладки — вывод в консоль. Сообщения появляются в терминале, где запущен expo start.

function handlePress(item) {
  console.log("Нажата задача:", item);
  console.log("Текущее состояние:", todos);
}

Не стесняйтесь расставлять console.log, чтобы понять, какие значения реально приходят и в каком порядке выполняется код.

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

В режиме разработки есть встроенное меню: на устройстве его открывают встряхиванием телефона, в эмуляторе — горячей клавишей. Что там есть:

Красный экран ошибки

Когда что-то ломается, RN показывает красный экран с описанием и стек-трейсом. Не пугайтесь — читайте сообщение: обычно там прямо написано, что не так (например, «Text strings must be rendered within a Text component»). Жёлтый экран — это предупреждение, приложение продолжает работать.

Частые ошибки новичков

• Текст вне Text — самая частая ошибка. Любая строка должна быть внутри Text.
• Забыт key / keyExtractor в списках.
• Мутация состояния (push вместо нового массива).
• Бесконечный useEffect — забыли массив зависимостей.

Fast Refresh и перезагрузка

Во время разработки работает Fast Refresh: вы сохраняете файл — и приложение мгновенно обновляется, сохраняя по возможности текущее состояние. Иногда состояние «застревает» или изменения не подхватываются — тогда помогает полная перезагрузка (Reload из меню разработчика). Если же приложение ведёт себя совсем странно, стоит остановить сервер и запустить заново с очисткой кэша: npx expo start -c.

React DevTools

Для осмотра дерева компонентов и их пропсов/состояния есть React DevTools. Он показывает, какие компоненты отрисованы и с какими данными — удобно, когда непонятно, почему UI выглядит не так: можно выбрать компонент и увидеть его текущие пропсы и состояние, а также проследить, кто его родитель. Это незаменимо, когда данные «не доезжают» до нужного компонента. Запускается отдельной командой и подключается к работающему приложению.

Подход к отладке

Отладка — это поиск места, где ожидание расходится с реальностью. Логируем значения, сужаем область, проверяем гипотезы. Запускаемый пример показывает типичную проверку догадки:

const todos = [{ id: "1", done: false }, { id: "2", done: true }];

// гипотеза: невыполненных задач должно быть 1
const active = todos.filter((t) => !t.done);
console.log("Невыполненных:", active.length);

if (active.length !== 1) {
  console.log("Что-то не так с фильтром!");
} else {
  console.log("Логика верна");
}

Вывод:

Невыполненных: 1
Логика верна

Итог

• console.log в терминал — основной и самый быстрый способ отладки.
• Меню разработчика (встряхивание устройства) даёт Reload, Inspector и монитор производительности.
• Читайте красный экран — там обычно прямо написана причина ошибки.