Перейти к основному содержимому

Отладка - Debugging

Доступ к меню разработчика в приложении#

Вы можете получить доступ к меню разработчика, встряхнув устройство или выбрав «Shake Gesture» в меню «Оборудование» в симуляторе iOS. Вы также можете использовать сочетание клавиш ⌘D, когда ваше приложение работает в симуляторе iOS, или ⌘M, когда оно работает в эмуляторе Android в Mac OS, и Ctrl + M в Windows и Linux. В качестве альтернативы для Android вы можете запустить команду adb shell input keyevent 82, чтобы открыть меню разработчика (82 - это код клавиши меню).

debug

Меню разработчика отключено в выпускных (производственных) сборках.

Видео#

Включение быстрого обновления - Fast Refresh#

Fast Refresh - это функция React Native, которая позволяет вам почти мгновенно получать обратную связь об изменениях в ваших компонентах React. Во время отладки может быть полезно включить быстрое обновление. Быстрое обновление включено по умолчанию, и вы можете переключить Enable Fast Refresh в меню разработчика React Native. Если этот параметр включен, большинство ваших правок должны быть видны в течение секунды или двух.

Включение сочетаний клавиш#

React Native поддерживает несколько сочетаний клавиш в симуляторе iOS. Они описаны ниже. Чтобы включить их, откройте меню "Оборудование", выберите Keyboard и убедитесь, что установлен флажок Connect Hardware Keyboard.

React Developer Tools#

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

npm install -g react-devtools

Теперь запустите response-devtools из терминала, чтобы запустить автономное приложение DevTools:

react-devtools

Он должен подключиться к вашему симулятору в течение нескольких секунд.

react-devtools

Интеграция с React Native Inspector#

Откройте меню разработчика в приложении и выберите Toggle Inspector. Появится оверлей, который позволит вам нажать на любой элемент пользовательского интерфейса и просмотреть информацию о нем:

React Native Inspector

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

react-devtools

Вы можете выбрать «Toggle Inspector» в том же меню, чтобы выйти из этого режима.

Подробней о режиме отладке вы можете всегда почитать здесь.

React Native Debugger#

Еще один вариант скачать React Native Debugger, которым лично мне больше нравится.

React Native Debugger

Проблемы?#

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

JavaScript Camp

Вопросы#

Функция React Native, которая позволяет вам почти мгновенно получать обратную связь об изменениях в ваших компонентах React?

  1. Toggle Inspector
  2. Fast Refresh
  3. Fast fresh

Как называется автономная версия инструмента для отладки компонентов React?

  1. Toggle Inspector
  2. Tools Inspector
  3. react-devtools

Done ✅#

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

Sumerian school

Ссылки:#

  1. React Native

Become a Patron!