Перейти к содержанию

Отладка

Доступ к меню Dev

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

  • iOS Simulator: Cmd+D (или Device → Shake)
  • Android emulators: Cmd+M (macOS) или Ctrl+M (Windows и Linux)

В качестве альтернативы для устройств и эмуляторов Android вы можете выполнить команду adb shell input keyevent 82 в терминале.

Примечание

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

LogBox

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

Примечание

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

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

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

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

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

1
2
3
4
5
6
7
import { LogBox } from 'react-native';

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

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

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

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

Ошибки синтаксиса

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

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

Чтобы отладить код JavaScript в Chrome, выберите "Open Debugger" в меню Dev. Это откроет новую вкладку по адресу http://localhost:8081/debugger-ui.

Отсюда выберите More Tools → Developer Tools в меню Chrome, чтобы открыть Chrome DevTools. Также вы можете воспользоваться сочетанием клавиш Option+Cmd+I (macOS) / Ctrl+Shift+I (Windows и Linux).

  • Если вы новичок в Chrome DevTools, рекомендуем изучить вкладки Console и Sources в документации.
  • Возможно, вам захочется включить Pause on Caught Exceptions для улучшения отладки.

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

Примечание

На Android, если время между отладчиком и устройством изменилось, такие вещи, как анимация и поведение событий, могут работать неправильно. Это можно исправить, выполнив adb shell "date 'date +%m%d%H%M%Y.%S%3N'". При использовании физического устройства требуется Root-доступ.

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

Если вы используете Expo CLI, это уже настроено для вас.

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

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

1
adb reverse tcp:8081 tcp:8081

В качестве альтернативы выберите "Settings" в меню Dev, затем обновите настройку "Debug server host for device", чтобы она соответствовала IP-адресу вашего компьютера.

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

Примечание

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

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

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

Отладчик получит список всех корней проекта, разделенных пробелом. Например, если вы установите 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-версии вашего приложения без необходимости включать "Debug JS Remotely".

  • На физическом устройстве перейдите в: Настройки → Safari → Дополнительно → Убедитесь, что "Веб-инспектор" включен (Этот шаг не требуется на симуляторе).
  • На вашем Mac включите меню Develop в Safari: Настройки... (или Preferences...) → Дополнительно → Выберите "Show Develop menu in menu bar".
  • Выберите JSContext вашего приложения: Develop → Simulator (или другое устройство) → JSContext.
  • Должен открыться веб-инспектор Safari с консолью и отладчиком.

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

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

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

Вы можете включить наложение производительности, чтобы помочь вам отладить проблемы производительности, выбрав "Perf Monitor" в меню Dev.

Комментарии