React Native — это кроссплатформенный фреймворк для разработки мобильных приложений, написанный на JavaScript. В этой статье рассматриваются официальные способы отладки React Native наряду с другими существующими инструментами.

В последние несколько лет я довольно много работал с React Native. Мой первый опыт отладки был, когда я открыл браузер-devtools, который является отладчиком по умолчанию для React Native, и заметил, что некоторые функции отсутствуют. Вкладка «Элементы» пуста, и вы не можете проверить или изменить иерархию компонентов, как в обычной веб-разработке. Точно так же вкладка «сеть» кажется пустой.

Мне стало ясно, что для отладки react native недостаточно браузерных-devtools, так как отсутствовали некоторые базовые требования для отладки.

В конечном счете, я хочу иметь возможность:

  • Отладка сценариев и компонентов — просмотр вывода консоли, установка точек останова и проверка значений среды выполнения.
  • Отладка иерархии компонентов реакции
  • Профилируйте компоненты — анализируйте производительность компонентов и выясняйте, что заставляет компонент отображать
  • Отслеживание сетевых запросов

Официальный способ реагирования родной

В официальном руководстве по отладке упоминается несколько средств отладки, и при совместном использовании они покрывают все основные потребности, о которых говорилось выше.

Начнем с обзора этих инструментов.

Инструменты разработчика браузера

Базовым отладчиком React Native по умолчанию является браузер-devtools.
Никакой установки или специальной настройки не требуется, просто откройте меню отладки телефона, на котором вы работаете, и выберите параметр отладки.

Откройте browser-devtools по адресу «http://localhost:8081/debugger-ui/», и на вкладке «источник» вы сможете отлаживать скрипты и компоненты.

React Native DevTools

Из реагирующих нативных документов:

Вы можете использовать автономную версию инструментов разработчика React для отладки иерархии компонентов React. Чтобы использовать его, установите пакет react-devtools глобально:

react-devtools — это официальная отдельная версия инструментов разработчика React. Настройка довольно проста, просто установите ее глобально -

npm install -g react-devtools

и запустите команду -

react-devtools

После запуска react-devtools и выбора «debug» в меню отладки телефона, react-devtools подключится к нашему приложению, и мы сможем искать наш компонент в дереве компонентов, как показано на изображении выше, или мы можем использовать пункт «Показать инспектор» в меню отладки и выберите нужный элемент. В обоих случаях мы сможем отлаживать иерархию компонентов реакции.

На правой панели мы видим стили, свойства и локальное состояние.
Эти значения можно изменить, просто щелкнув и изменив их. Изменения отразятся немедленно.

В react-devtools также есть инструмент профилировщик, который находится рядом с вкладкой компоненты на правой панели. Профилировщик собирает информацию о времени каждого визуализируемого компонента, чтобы выявить узкие места в производительности. Профилировщик также может записывать, почему отображается каждый компонент, что я считаю чрезвычайно полезным при работе с реактивной навигацией и редукцией.

Реактотрон

Из реагирующих нативных документов:

Reactotron — это настольное приложение с открытым исходным кодом, которое позволяет вам проверять состояние приложения Redux или MobX-State-Tree, а также просматривать пользовательские журналы, запускать пользовательские команды, такие как сброс состояния, сохранение и восстановление снимков состояния, а также другие полезные функции отладки для React. Нативные приложения.

Reactotron упоминается в официальной документации как инструмент для отладки состояния вашего приложения. Он предлагает несколько очень полезных функций отладки, и одна из них — отслеживание сетевых запросов.

Отказ от ответственности: мы можем отслеживать сетевые запросы вообще без Reactotron или любых других внешних инструментов. Мы можем выбрать «Toggle Inspector» в меню отладки телефона, откроется пользовательский интерфейс с несколькими вкладками, а на вкладке «Сеть» мы сможем увидеть наши сетевые запросы.

Хотя эта опция доступна, мне кажется сложным и неинтуитивным отслеживать вызовы API таким образом.

Миссия выполнена?

Браузер-devtools, react-devtools и Reactotron вместе дают нам все основные требования, о которых мы упоминали выше.

Другими словами, да!, мы можем использовать их и решать все наши задачи, но я должен признать, что прыгать между тремя разными инструментами отладки немного раздражает. Было бы неплохо, если бы все они были объединены в один инструмент отладчика?

реагировать-родной-отладчик

Автономное приложение, основанное на официальном отладчике React Native и включающее в себя React Inspector/Redux DevTools и т. д.

react-native-debugger — это универсальный отладчик.

Оно включает -

  1. chrome-devtools, который дает нам возможность отладки скриптов и компонентов. Мы также можем проверить сетевые запросы с помощью вкладки сеть, если проверка сети включена. Чтобы включить проверку сети, откройте контекстное меню (щелкните правой кнопкой мыши на левой панели) и выберите Включить проверку сети.

2. react-devtools — что дает нам возможность отлаживать иерархию компонентов реакции и компоненты профиля так же, как мы это делали, используя автономные инструменты реагирования.

Все наши требования были удовлетворены с помощью одного инструмента отладки, и помимо наших основных требований есть еще больше функций, таких как redux-devtools и глобальные переменные.

Флиппер

Flipper — это платформа для отладки приложений iOS, Android и React Native. Визуализируйте, проверяйте и управляйте своими приложениями с помощью простого интерфейса рабочего стола. Используйте Flipper как есть или расширьте его с помощью плагина API.

Flipper построен как платформа. Помимо использования уже включенных инструментов, вы можете создавать собственные плагины для визуализации и отладки данных из ваших мобильных приложений. Flipper позаботится об отправке данных туда и обратно, вызове функций и прослушивании событий в мобильном приложении. Flipper — это просто канал связи между настольным приложением и вашим приложением. Его истинная сила исходит от его плагинов.

Flipper предоставляет несколько функций из коробки, некоторые из них:

  • Native Layout Inspector — просмотр и редактирование собственного макета, выводимого средством визуализации React Native.
  • Изображения. Проверяйте, какие изображения были загружены, откуда они берутся, и выборочно очищайте кэши.
  • React DevTools — интеграция с реактивными инструментами разработки
  • Сетевой инспектор

Начиная с версии 0.62, React Native включает поддержку Flipper по умолчанию.

Заключение

Официальные инструменты для отладки react-natvie должны удовлетворить все наши основные потребности в отладке. В качестве альтернативы есть инструмент react-native-debugger, который объединяет chrome-devtools и react-devtools в один инструмент.
Для более сложных сценариев я бы использовал Flipper, так как он имеет некоторые расширенные функции и плагины, которых нет в других инструментах.

Если вы знакомы с другими инструментами или хотите поделиться своими мыслями, оставьте комментарий.