Способы анализа работы приложения в React Native

Начнём с простого уровня. У вас есть приложение React Native. Оно пока в режиме разработки, то есть ваше приложение ещё не собрано для сторов (AppStore, Google Play, RuStore и т.д.), запущен сервер Metro. Что самое первое можно сделать? Запустить режим отладки и Show Perf Monitor. Это выведет плашку в окне приложения поверх всех окон, в которой три основных показателя: JS Thread FPS, UI Thread FPS и потребляемая приложением оперативка. Способ самый быстрый и уже даёт нам представление о том, что происходит. Мы начинаем видеть чрезмерный жор оперативки, проседания частоты кадров в UI (поздравляю, вы умудрились его посадить!) и в JS (довольно частое явление, но сильные проседания, например до 0 кадров, — это не есть норма 😊).

Идём дальше — React Debugger, мощный инструмент, который позволяет измерять время рендера компонентов, дерево компонентов и т.д.

Далее — Reactotron для анализа store (MobX/Redux), анализа сетевых запросов (ограниченного, многие запросы могут просто не показываться), вызываемых action в тех же сторах, удобного вывода log и т.д.

Proxyman — более продвинутый анализ запросов, причём даже для production-приложений.

И всё же давайте не забывать, что мы имеем дело с нативной платформой (Android/iOS). Поэтому там, где заканчивается обычный анализ, начинается нативный 🫡. Тут и начинается настоящее веселье, ведь это профилировщики потребления памяти, процессора, анализ утечек, разбор графа памяти для выявления циклических ссылок и т.д.

Например, в Android Studio есть Logcat, который выводит очень много полезной информации, предупреждений, ошибок. Его можно использовать для анализа уже собранного APK (production-сборка).

Также в Android Studio есть профилировщик для анализа потребления ресурсов приложением.

В Xcode есть Debug, который сразу же можно использовать для базового профилирования, так и для продвинутого. Например, вы можете смотреть иерархию нативных View, чтобы глубже видеть загруженность дерева View и их отношения. Также вы можете посмотреть Memory Graph, чтобы выявлять циклические связи, утечки памяти и т.д.

Если хотите ещё больше заморочиться, вы можете запустить приложение через Xcode: Product -> Profile. У вас запустится приложение в режиме production-сборки (без Metro, с собранным JS-бандлом), и там ещё больше инструментов, например анализ утечек памяти (уже от самого Xcode) и т.д.

В общем, подводя итог сказанного, — в RN у вас есть куча хороших инструментов, чтобы не сидеть подобно слепому, а понимать, что происходит с вашим приложением на самом деле…

Способы анализа работы приложения в React Native | Сетка — новая социальная сеть от hh.ru
repost

124

input message

напишите коммент

еще контент автора

еще контент автора

войдите, чтобы увидеть

и подписаться на интересных профи

в приложении больше возможностей

пока в веб-версии есть не всё — мы вовсю работаем над ней

сетка — cоциальная сеть для нетворкинга от hh.ru

пересекайтесь с теми, кто повлияет на ваш профессиональный путь