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

Но отладка - одна из важнейших частей разработки программного обеспечения. Благодаря отладке мы знаем, что идет не так, а что нет, что работает, а что нет. Отладка дает нам возможность оценить наш код и легко исправить проблемы.

Различные способы отладки в React Native

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

Меню разработчика в приложении - это первые ворота для отладки кода в React Native, и оно отключено в выпускных (производственных) сборках.

Доступ к нему можно получить, встряхнув телефон, если вы находитесь на физическом устройстве, или Command / Ctrl + D в симуляторе IOS или Command / Ctrl + M в эмуляторе Android (как в Windows, так и в Linux).

Различные варианты в меню разработчика:

  • Обновить: перезагружает приложение.
  • Отладка: открывает канал для отладчика JavaScript.
  • Переключить инспектор

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

  • Отключить быстрое обновление

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

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

Аббревиатура «Perf Monitor» означает «Монитор производительности», который помогает отладить проблемы, связанные с производительностью. Мы можем проверить fps для UI и JS, а также понизить FPS.

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

Мы можем использовать React Developer Tools для отладки различных компонентов нашего проекта React. Чтобы использовать или инициировать разработчика, вам сначала необходимо установить react-devtools.

npm install -g react-devtools

И запустите DevTools:

react-devtools

console.log

console.log - лучший вариант при отладке в веб-приложениях. Точно так же мы можем использовать его в наших приложениях React Native.

Большинство людей задаются вопросом, где выводится печать, пока мы консервируем значение или что-то в этом роде. Мы можем увидеть результат в нашем Терминале, с которого мы начали наш проект, как показано на рисунке ниже.

Спасибо! Для чтения.
Продолжайте кодировать :)

Следуй за мной: @ beevekmgrz