Отладка

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

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

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

Включение быстрой перезагрузки

Быстрая перезагрузка — функция React Native, которая позволяет получать практически мгновенную обратную связь на изменения в ваших React-компонентах. Во время отладки включение быстрой перезагрузки может быть полезным. Быстрая перезагрузка включена по умолчанию, и вы можете переключать «Включить быструю перезагрузку» в меню разработчика React Native. При включенном режиме, большинство ваших правок должны отображаться в течение секунды или двух.

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

React Native поддерживает несколько сочетаний клавиш в iOS-симуляторе. Они описаны ниже. Чтобы включить их, откройте меню «Аппаратное обеспечение», выберите «Клавиатура» и убедитесь, что «Подключить клавиатуру» включено.

LogBox

Ошибки и предупреждения в сборках для разработки отображаются в LogBox внутри вашего приложения.

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

Ошибки и предупреждения консоли

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

Эти уведомления могут быть скрыты с помощью LogBox.ignoreAllLogs(). Это полезно при демонстрации продукта, например. Кроме того, уведомления могут быть скрыты на основе каждого журнала с помощью LogBox.ignoreLogs(). Это полезно, когда есть шумное предупреждение, которое нельзя исправить, например, в зависимости от стороннего компонента.

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

import { LogBox } from 'react-native';

// Ignore log notification by message:
LogBox.ignoreLogs(['Warning: ...']);

// Ignore all log notifications:
LogBox.ignoreAllLogs();

Необработанные ошибки

Необработанные ошибки JavaScript, такие как undefined is not a function, автоматически откроют ошибку LogBox во весь экран с указанием источника ошибки. Эти ошибки можно закрыть и свернуть, чтобы увидеть состояние вашего приложения при возникновении этих ошибок, но их всегда необходимо устранять.

Синтаксические ошибки

При возникновении синтаксической ошибки на весь экран автоматически откроется ошибка LogBox со стеком вызовов и местоположением синтаксической ошибки. Эту ошибку нельзя закрыть, так как она представляет недействительное выполнение JavaScript, которое необходимо исправить перед продолжением работы приложения. Чтобы закрыть эти ошибки, исправьте синтаксическую ошибку и либо сохраните, чтобы автоматически закрыть её (при включённой быстрой перезагрузке), или нажмите cmd+r для перезагрузки (при выключенной быстрой перезагрузке).

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

Чтобы отладить код JavaScript в Chrome, выберите «Отладить JS удалённо» в меню разработчика. Это откроет новую вкладку по адресу http://localhost:8081/debugger-ui.

Выберите Tools → Developer Tools из меню Chrome, чтобы открыть Инструменты разработчика. Вы также можете получить доступ к DevTools с помощью сочетаний клавиш (⌘⌥I на macOS, Ctrl Shift I на Windows). Возможно, также стоит включить Приостановку при пойманных исключениях для улучшения опыта отладки.

Примечание: в Android, если время между отладчиком и устройством сдвинулось, такие вещи, как анимация, поведение событий и т. д., могут работать неправильно или результаты могут быть неточными. Пожалуйста, исправьте это, выполнив adb shell "date `date +%m%d%H%M%Y.%S%3N`" на вашем компьютере с отладчиком. Для использования на реальных устройствах требуется доступ root.

Примечание: расширение React Developer Tools для Chrome не работает с React Native, но вы можете использовать его автономную версию. Прочитайте эту секцию, чтобы узнать, как.

Отладка с использованием пользовательского отладчика JavaScript

Чтобы использовать пользовательский отладчик JavaScript вместо инструментов разработчика Chrome, установите переменную среды REACT_DEBUGGER на команду, которая запустит ваш пользовательский отладчик. Затем вы можете выбрать «Отладить JS удалённо» в меню разработчика, чтобы начать отладку.

Отладчик получит список всех корневых директорий проекта, разделённых пробелом. Например, если вы установите REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative", то будет использоваться команда node /path/to/launchDebugger.js --port 2345 --type ReactNative /path/to/reactNative/app для запуска вашего отладчика.

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

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

Вы можете использовать Safari для отладки iOS-версии вашего приложения, не активируя «Отладить JS удалённо».

• Включите меню «Разработка» в Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
• Выберите JSContext вашего приложения: Develop → Simulator → JSContext
• Инспектор веб-страниц Safari должен открыться с консолью и отладчиком

Хотя sourcemap могут быть не включены по умолчанию, вы можете следовать этому руководству или видео, чтобы включить их и установить точки останова в правильных местах исходного кода.

Однако каждый раз, когда приложение перезагружается (с помощью живой перезагрузки или ручным перезапуском), создаётся новый JSContext. Выбор «Автоматически отображать инспекторы веб-страниц для JSContexts» избавит вас от необходимости вручную выбирать последний JSContext.

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

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

Примечание: Версия 4 react-devtools требует react-native версии 0.62 или выше для корректной работы.

• npm
• Yarn

npm install -g react-devtools

yarn global add react-devtools

Теперь выполните react-devtools из терминала для запуска автономного приложения DevTools:

react-devtools

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

Примечание: если вы предпочитаете избегать глобальных установок, вы можете добавить react-devtools в качестве зависимости проекта. Добавьте пакет react-devtools в свой проект, используя npm install --save-dev react-devtools, затем добавьте "react-devtools": "react-devtools" в раздел scripts в вашем package.json, и затем выполните npm run react-devtools из папки вашего проекта, чтобы открыть DevTools.

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

Откройте меню разработчика приложения и выберите «Переключить инспектор». Это отобразит наложение, которое позволяет нажать на любой элемент пользовательского интерфейса и увидеть информацию о нём:

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

Вы можете выбрать «Переключить инспектор» в том же меню, чтобы выйти из этого режима.

Просмотр экземпляров компонентов

При отладке JavaScript в Chrome вы можете просматривать свойства и состояние React-компонентов в консоли браузера.

Сначала выполните инструкции по отладке в Chrome, чтобы открыть консоль Chrome.

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

Затем выберите React-компонент в React DevTools. В верхней части есть поле поиска, которое поможет вам найти его по имени. Как только вы его выберете, он станет доступен как $r в консоли Chrome, что позволит вам просмотреть его свойства, состояние и свойства экземпляра.

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

Вы можете включить наложение производительности, чтобы помочь в отладке проблем с производительностью, выбрав «Монитор производительности» в меню разработчика.

Отладка состояния приложения

Reactotron — это открытая платформа для отладки состояния Redux или MobX-State-Tree приложения, а также просмотра пользовательских журналов, выполнения пользовательских команд, таких как сброс состояния, сохранение и восстановление снимков состояния и других полезных функций отладки для приложений React Native.

Инструкции по установке можно посмотреть в файле README. Если вы используете Expo, вот статья, описывающая как установить его в Expo.

Отладка нативного кода

Проекты только с нативным кодом

Следующий раздел применим только к проектам с нативным кодом. Если вы используете управляемый рабочий процесс Expo, см. руководство по прекомпиляции для использования этого API.

Доступ к журналам консоли

Чтобы отобразить журналы консоли для приложения iOS или Android, используйте следующие команды в терминале во время выполнения приложения:

npx react-native log-ios
npx react-native log-android

Вы также можете получить к ним доступ через Debug → Open System Log... в iOS-симуляторе или выполнив adb logcat *:S ReactNative:V ReactNativeJS:V в терминале, когда приложение Android запущено на устройстве или эмуляторе.

Если вы используете Create React Native App или Expo CLI, журналы консоли уже отображаются в том же выводе терминала, что и бандлер.

Отладка на устройстве с инструментами разработчика Chrome

Если вы используете Create React Native App или Expo CLI, это уже настроено за вас.

На устройствах iOS откройте файл RCTWebSocketExecutor.mm и замените "localhost" на IP-адрес вашего компьютера, затем выберите «Отладить JS удалённо» в меню разработчика.

На устройствах Android 5.0+ подключенных по USB, можно использовать утилиту командной строки adb для настройки переадресации портов с устройства на ваш компьютер:

adb reverse tcp:8081 tcp:8081

В качестве альтернативы, выберите «Настройки разработчика» в меню разработчика, затем обновите настройку «Хост сервера отладки для устройства», чтобы он соответствовал IP-адресу вашего компьютера.

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

Отладка нативного кода

При работе с нативным кодом, например, при написании нативных модулей, вы можете запустить приложение из Android Studio или Xcode и воспользоваться функциями нативной отладки (установка точек останова и т. д.), как вы бы делали при создании стандартного нативного приложения.