Урок 12

Отладка и инструменты

Отладка в React Native отличается от веба. Разберём инструменты.

Console.log

Работает, но вывод идёт в терминал, где запущен Metro bundler, а не в браузер.

console.log('значение:', value);
console.warn('предупреждение');
console.error('ошибка');

React DevTools

Подключается к приложению. Позволяет смотреть дерево компонентов, пропсы, состояние.

npx react-devtools

Или через меню разработчика в приложении.

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

  • iOS: Cmd + D в симуляторе
  • Android: Cmd + M (macOS) или Ctrl + M (Windows/Linux)
  • Устройство: потрясти телефон

Опции:

  • Reload
  • Debug
  • Toggle Inspector
  • Performance Monitor
  • Fast Refresh

Fast Refresh

Изменения в коде применяются мгновенно, без перезагрузки. Работает для компонентов и хуков. Не работает для изменений в StyleSheet в некоторых случаях — иногда нужен reload.

Инспектор

Toggle Inspector показывает границы компонентов. Клик на элемент — информация о стилях и пропсах.

Performance Monitor

Показывает FPS, использование памяти, количество компонентов.

Отладка в Chrome

Старый способ, сейчас редко. Вместо него — Flipper или React DevTools.

Flipper

Инструмент от Meta для отладки мобильных приложений:

  • Просмотр логов
  • Инспектор сети
  • Layout inspector
  • Плагины

В Expo работает через dev client.

Отладка сети

В Flipper — вкладка Network. Показывает все запросы.

Или логирование вручную:

async function apiCall(url: string) {
    console.log('→', url);
    const start = Date.now();
    try {
        const res = await fetch(url);
        console.log('←', res.status, `${Date.now() - start}ms`);
        return res.json();
    } catch (e) {
        console.error('×', e);
        throw e;
    }
}

Sentry

Для отслеживания ошибок в продакшене:

npx expo install sentry-expo

import * as Sentry from 'sentry-expo';

Sentry.init({
    dsn: 'YOUR_DSN',
    enableInExpoDevelopment: false,
    debug: __DEV__,
});

Error Boundary

import { ErrorBoundary } from 'react-error-boundary';

<ErrorBoundary
    FallbackComponent={({ error, resetErrorBoundary }) => (
        <View>
            <Text>Что-то пошло не так</Text>
            <Text>{error.message}</Text>
            <Pressable onPress={resetErrorBoundary}>
                <Text>Повторить</Text>
            </Pressable>
        </View>
    )}
>
    <App />
</ErrorBoundary>

Логи в продакшене

В dev — console.log. В продакшене — Sentry, LogRocket, Firebase Crashlytics.

Проверка на устройстве

Симулятор не всегда показывает реальное поведение:

  • Производительность — на реальном устройстве другая
  • Камера, GPS, датчики — только на устройстве
  • Жесты — симулятор упрощает
  • Размер экрана — реальные устройства разные

Полезные команды

npx expo start --clear       # очистка кеша Metro
npx expo start --no-dev      # без dev-режима
npx expo-doctor              # проверка проекта
npx expo install --check     # проверка версий

Если ты уже знаешь React

В вебе — DevTools в браузере. В React Native — React DevTools + Flipper + меню разработчика. Логика та же, инструменты разные.

Итоги

  • console.log в терминал Metro
  • React DevTools для компонентов
  • Меню разработчика — Reload, Inspector
  • Fast Refresh мгновенно применяет код
  • Flipper для сети и логов
  • Sentry для продакшена
  • Тестируй на реальном устройстве