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

Помимо двойных DevTools, React Native Debugger также включает в себя встроенную консоль, сетевой инспектор и инспектор элементов, аналогичный Chrome DevTools. Он поддерживает точки останова и переменные часов, что делает его всеобъемлющей средой отладки. Поскольку он запускает JavaScript в движке V8 Electron, он имеет такое же ограничение, как Chrome DevTools для проблем, связанных с Hermes.

Когда использовать React Native Debugger для Chrome DevTools

Если ваш проект в значительной степени зависит от Redux или MobX, интегрированные инструменты управления состоянием React Native Debugger меняют правила игры. Вы можете воспроизводить действия, проверять состояние диффузии и состояние экспорта в любой момент. Для разработчиков, которые предпочитают отдельное окно, предназначенное исключительно для отладки без отвлекающих факторов от других вкладок Chrome, этот инструмент предлагает более чистый рабочий процесс.

Flipper: официальная платформа отладки React Native

Flipper — платформа с открытым исходным кодом, разработанная Meta (ранее Facebook) для отладки мобильных приложений. Она была принята в качестве инструмента отладки по умолчанию для React Native в версии 0.62 и обеспечивает богатую экосистему плагинов. Flipper работает нативно вместе с приложениями iOS и Android, предлагая такие функции, как проверка макета, регистрация сети, отчетность о сбоях и просмотр баз данных. В отличие от Chrome DevTools, Flipper подключается к движку JavaScript, работающему на устройстве (Hermes или JSC), поэтому он более точно сообщает об ошибках, которые происходят в родной среде.

Установка и настройка Flipper

Чтобы настроить Flipper для вашего проекта React Native:

Ключевой плагин Flipper для React Native

• Инспектор настройки : Нажмите на любой элемент пользовательского интерфейса на устройстве, чтобы увидеть его имя компонента, стили, иерархию родителей и детей и абсолютные координаты. Это намного мощнее панели элементов Chrome, потому что она работает с нативными представлениями.
• Сетевой плагин: Просмотр всех сетевых запросов, сделанных вашим приложением, включая заголовки, полезные нагрузки и время. Вы можете фильтровать, искать и воспроизводить запросы. Этот плагин также показывает неудавшиеся запросы и коды ошибок.
• Logs Плагин: Централизует , логкат Android и записи iOS NSLog.Логи кодируются цветом по уровню журнала и могут фильтроваться по тегу.
• Плагин Crash Reporter: захватывает собственные сбои и следы стека JavaScript, обеспечивая временную шкалу событий, приводящих к сбою.
• Hermes Debugger Plugin: Если вы используете Hermes в качестве движка JavaScript, этот плагин позволяет отлаживать точки останова, перешагнуть и проверить переменные непосредственно на устройстве.
• Плагин базы данных : Просмотр и редактирование баз данных SQLite, которые ваше приложение использует во время разработки, что облегчает проверку устойчивости данных.

Архитектура плагинов Flipper также позволяет создавать пользовательские плагины. Команды часто создают плагины для визуализации внутреннего состояния приложения, макетирования ответов сервера или событий аналитики журналов. Эта гибкость делает Flipper наиболее перспективным инструментом отладки в экосистеме React Native.

Профилирование производительности и отладка памяти

Помимо исправления логических ошибок, отладка проблем производительности имеет решающее значение для обеспечения плавного взаимодействия с пользователем. React Native предоставляет несколько способов профилирования производительности вашего приложения.

Использование React Native Performance Monitor

Меню разработчика включает в себя опцию «Show Perf Monitor», которая накладывает небольшой график поверх вашего приложения.

• FPS: Рамы в секунду. Плавный опыт должен поддерживать 60 FPS (или 90/120 на устройствах с высокой частотой обновления). Падения ниже 30 FPS указывают на jank.
• JS FPS: Частота кадров потока JavaScript.Если это падает, ваш код JavaScript может блокировать основной поток.
• Использование оперативной памяти : Приблизительное потребление памяти приложения.
• Просмотр счета : Количество нативных просмотров в настоящее время установлено.

Используйте этот монитор в качестве первого индикатора того, что что-то не так, а затем используйте более детальные инструменты, чтобы определить причину.

Профилирование с помощью Chrome DevTools Performance Tab

При удаленной отладки с помощью Chrome DevTools вкладка Performance может записывать временную шкалу выполнения JavaScript, включая вызовы функций, макеты и события рисования.

1. Откройте Chrome DevTools, подключенный к вашему приложению.
2. Перейдите на вкладку «Исполнение» и нажмите кнопку «Запись».
3. Взаимодействуйте с вашим приложением, чтобы воспроизвести проблему производительности.
4. Прекратите записывать и анализировать диаграмму пламени. Ищите долговременные функции, частые макеты или чрезмерные повторные рендеры.

Однако, поскольку JavaScript работает в Chrome, показатели производительности (особенно память) могут отличаться от фактического устройства. Для профилирования, подобного производству, используйте плагин производительности Flipper или автономные инструменты производительности React Native, такие как .

Отладка памяти с помощью Xcode и Android Studio

Для утечек нативной памяти используйте инструменты, специфичные для платформы:

• Xcode Instruments (iOS): Запустите приложение в Xcode, затем используйте инструменты Leaks и Allocations для обнаружения сохраненных объектов и роста памяти.
• Android Studio Profiler (Android): Откройте вкладку Профильер при запуске приложения на эмуляторе или устройстве. Он показывает память, процессор и использование сети в режиме реального времени.

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

Общие сценарии отладки и решения

Даже с помощью мощных инструментов, знание того, как подойти к конкретным проблемам, ускоряет разрешение. Вот некоторые частые проблемы, возникающие во время развития React Native, и как отладить их.

«Невозможность устранить модуль» Ошибки

Это часто происходит, когда пакет отсутствует или есть несоответствие версии. Проверьте свой и убедитесь, что вы выполнили или . Если модуль является локальным файлом, дважды проверьте путь импорта. Используйте сообщение об ошибке пульдера Metro, чтобы увидеть, какой файл не работает. Вы также можете очистить кэш Metro с .

Blank Screen для запуска приложения

Чистый экран обычно указывает на ошибку JavaScript во время инициализации. С помощью Chrome DevTools или React Native Debugger откройте панель консоли, чтобы увидеть сообщение об ошибке. Общие причины включают синтаксические ошибки, отсутствие или неправильную ссылку на родной модуль. Если ошибка является нативной (например, отсутствующий Pod), консоль устройства или плагин журнала Flipper покажет детали.

Государство не обновляется, как ожидалось

Проблемы управления состоянием могут быть сложными. Используйте React DevTools (либо в React Native Debugger, либо Chrome DevTools с расширением инструментов разработчика React) для проверки дерева компонентов и проверки текущего состояния и реквизита. Для приложений Redux откройте панель Redux DevTools и сравните отправленное действие с ожидаемым состоянием diff. Установите точки останова внутри редукторов, чтобы проверить, что действия производят правильные переходы состояния.

Медленная производительность Scroll

Проблемы с производительностью прокрутки часто возникают из-за чрезмерных повторных рендеров или больших списков. Проверьте React Native Performance Monitor для FPS падений. Затем профилируйте с помощью Chrome DevTools, чтобы увидеть, какие компоненты часто перерендеруются. Используйте , или , чтобы предотвратить ненужные обновления. Для больших списков используйте с или переключитесь на для лучшей производительности.

Интеграция отладки в рабочий процесс вашего развития

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

Автоматическая обработка ошибок

Используйте границы ошибок в компонентах React, чтобы ловить ошибки JavaScript и зарегистрировать их в системе, такой как Sentry или Bugsnag. Во время разработки вы можете перенаправить эти журналы на Flipper или консоль, чтобы вы могли быстро улавливать проблемы.

Написать тестируемый и отладочный код

Разбейте код на маленькие, чистые функции и компоненты. Это облегчает изолирование ошибок и запись единичных тестов. Когда возникает проблема, вы можете быстро воспроизвести его в тестовой среде без полного запуска приложения. Такие инструменты, как Jest и React Native Testing Library дополняют ваши усилия по отладке, улавливая регрессии до того, как они достигнут производства.

Используйте горячую перезагрузку и быструю перезагрузку

React Native's Fast Refresh (включается по умолчанию в последних версиях) позволяет мгновенно видеть изменения, не теряя состояния приложения. Однако он может скрывать проблемы, которые возникают только при запуске нового приложения. При отладке начальных ошибок состояния временно отключите Fast Refresh, отредактировав свой код после полной перезагрузки.

Использование автоматизированного тестирования с отладкой

Комбинируйте отладку с автоматизированным тестированием с помощью таких инструментов, как Detox или Appium, для сквозных тестов. Когда тест e2e терпит неудачу, используйте инструмент скриншота Flipper для захвата состояния пользовательского интерфейса в момент отказа или интеграции с Flipper для остановки тестовых сбоев для ручного контроля.

Непрерывная отладка интеграции

В трубопроводах CI/CD отладка может быть сложной, потому что нет интерактивного пользовательского интерфейса. Используйте команды и для потоковой передачи журналов или захвата журналов Flipper программно с использованием Flipper SDK. Настройте свой CI для хранения журналов аварий и скриншотов в качестве артефактов для анализа после сборки.

Будущее-доказательство вашей настройки отладки

Экосистема React Native быстро развивается, и инструменты отладки следуют этому примеру. Hermes, движок JavaScript, оптимизированный для React Native, теперь по умолчанию для новых проектов. Плагин Hermes Debugger Flipper постоянно совершенствуется, а команда Flipper добавляет такие функции, как импорт базы данных и насмешка над сетевыми запросами. Между тем, автономный инструмент React DevTools обесценивается в пользу встроенного плагина React DevTools от Flipper.