Отладка - Debugging

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

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

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

Видео

Включение быстрого обновления - 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

npm install -g react-devtools

Yarn

yarn global add react-devtools

pnpm

pnpm add -g react-devtools

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

react-devtools

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

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

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

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

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

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

React Native Debugger

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

Проблемы?

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

Вопросы

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

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

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

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

Done

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

Ссылки:

1. React Native