Как вы отлаживаете React Native?

Как отладить их код React с помощью React Native, когда приложение работает в симуляторе приложения?

Ответы

Ответ 1

Cmd+D из симулятора. Он выведет Chrome и оттуда вы сможете использовать Инструменты разработчика.

Edit:

Теперь это связано с справочными документами.

Ответ 2

Отладка React Native Apps

Чтобы отладить код javascript вашего приложения для реагирования, выполните следующие действия:

Запустите приложение в симуляторе iOS.
Нажмите Command + D, и веб-страница должна открыться в http://localhost:8081/debugger-ui. (Только Chrome) или используйте Shake Gesture
Включить Пауза на выведенных исключениях для лучшего опыта отладки.
Нажмите Command + Option + I, чтобы открыть инструменты разработчика Chrome, или откройте его с помощью View → Developer → Developer Tools.
Теперь вы сможете отлаживать, как обычно.

Дополнительно

Установите расширение React Developer Tools для Google Chrome. Это позволит вам перемещаться по иерархии представлений, если вы выберете вкладку React, когда инструменты разработчика открыты.

Live Reload

Чтобы активировать Live Reload, выполните следующие действия:

Запустите приложение в симуляторе iOS.
Нажмите Control + Command + Z.
Теперь вы увидите параметры Enable/Disable Live Reload, Reload и Enable/Disable Debugging.

Ответ 3

Для приложения Android, если вы используете Genymotion, вы можете переключать меню, нажимая CMD + m, но вам, возможно, придется включить его в меню, выполнив это.

Убрать виджет
Включить его с помощью CMD + m нажмите на отладку в Chrome

Ответ 4

В дополнение к другим ответам. Вы можете отлаживать реакцию-native с помощью инструкции отладчика

Пример:

debugger; //breaks execution

Для этого вам нужно открыть свои инструменты для создания хрома.

Ответ 5

Попробуйте эту программу: https://github.com/jhen0409/react-native-debugger

Работает на: windows, osx и linux.

Он поддерживает: react native и redux

Вы также можете проверить дерево виртуальных компонентов и изменить стили, которые отражены в приложении.

Ответ 6

cmd ⌘ + D как ни странно, у меня не получилось. Нажатие ctrl + cmd ⌘ + Z в симуляторе iOS открыло для меня окно браузера отладки.

Это экран, который выскакивает:

Подробнее здесь.

Ответ 7

если вы хотите выполнить отладку с помощью устройства Android в Windows, просто откройте командную строку и введите (убедитесь, что ваш adb работает правильно)

adb shell input keyevent 82

появится экран, похожий на изображение

затем выберите

debug JS Remotely

оно автоматически откроет новое окно. Затем откройте проверяющий элемент или нажмите F12 для консоли.

Ответ 8

У меня недостаточно репутации, чтобы прокомментировать предыдущие ответы, которые замечательны.:) Вот некоторые из способов, как я отлаживаю при разработке адаптивного приложения.

Живая перезагрузка

response-native упрощает просмотр ваших изменений с помощью клавиш ⌘ + R или даже позволяет включить "живую" перезагрузку, и сторож "обновит" симулятор с последними изменениями. Если вы получите сообщение об ошибке, вы можете получить ключ от номера строки с этого красного экрана. Пара отмены приведет вас в рабочее состояние и начнется снова.
console.log('yeah, seriously.')

Я предпочитаю, чтобы программа запускала и регистрировала некоторую информацию, чем добавляла точку прерывания debugger. (жесткий отладчик полезен при попытке работать с внешними пакетами/библиотеками, и он поставляется с автозаполнением, поэтому вы знаете, какие другие методы вы можете использовать.)
Enable Chrome Debugging с точкой debugger; в вашей программе.

Ну, это зависит от типа ошибок, с которыми вы столкнулись, и от ваших предпочтений отладки. Для большей части undefined is not an object (evaluating 'something.something') метод 1 и 2 будет для меня достаточно хорош.

В то время как работа с внешними библиотеками или пакетами, написанными другими разработчиками, потребует больше усилий для отладки, поэтому хороший инструмент, например Chrome Debugging

Иногда это происходит из самой реакционной платформы, поэтому поисковая система для реагирования на собственные проблемы определенно поможет.

надеюсь, что это поможет кому-то там.

Ответ 9

Отладка response-native 0.40.0 в Debian 8 (Jessie) можно выполнить, перейдя по адресу http://localhost: 8081/debugger-ui в Chromium или Firebug, когда ваше приложение работает в симуляторе Android. Чтобы получить доступ к меню разработчика в приложении, выполните следующую команду в другом окне терминала, как указано здесь:

adb shell input keyevent 82

Ответ 10

adb logcat *:S ReactNative:V ReactNativeJS:V

запустите это в терминале для журнала андроида.

Ответ 11

Вместо Cmd+M для эмулятора Android Нажмите F10 в Windows. Эмулятор начинает показывать все варианты реакции отладки.

Ответ 12

Для меня лучшим способом отладки React-Native является использование "Reactotron" .

Установите Reactotron, затем добавьте их в свой пакет package.json:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",

теперь, это просто вопрос регистрации в вашем коде. например: console.tron.log('debug')

Ответ 13

Запустите приложение в симуляторе - run-ios для реагирования
Нажмите ctrl + d и нажмите "Отладка JS удаленно"

веб-страница должна открыться в http://localhost:8081/debugger-ui, если не введите URL-адрес и перейдите по этой ссылке в Chrome
Щелкните правой кнопкой мыши на странице и нажмите "Осмотреть", и он должен открыть инструменты разработчика для хрома.

Перейдите к источникам в верхнем меню и найдите свой файл класса js в проводнике файлов правой руки
Вы можете поместить точки останова в представление и отладить код там, как вы можете видеть на изображении.

Ответ 14

Если вы используете Microsoft Visual Code, установите расширение React Native Tools. Затем вы можете добавить точки останова, просто нажав на нужный номер строки. Для настройки и отладки приложения выполните следующие шаги:

Не забудьте включить Debug JS Remote в эмуляторе, если вы его используете.

Ответ 15

Для приложения android. Нажмите Ctrl + M, чтобы отладить js удаленно, он откроет новое окно в chrome с url http://localhost:8081/debugger-ui. Теперь вы можете отлаживать приложение в браузере Chrome

Ответ 16

Для Android: Ctrl + M (эмулятор) или встряхнуть телефон (в устройстве), чтобы открыть меню.

Для iOS: Cmd + D или Shake the Phone, чтобы открыть меню

Убедитесь, что у вас есть хром.

В появившемся меню выберите "Отладка JS Remotely Option".

Chrome будет автоматически открыт по адресу localhost: 8081/debugger-ui. Вы также можете вручную перейти к отладчику по этой ссылке.

Там откройте консоль, и вы сможете увидеть заметки логов.

Ответ 17

По умолчанию мой симулятор ios не собирал нажатия клавиш, поэтому cmd-D не работал. Мне пришлось включить настройки клавиатуры, используя меню симулятора:

Оборудование > Клавиатурa > Подключить клавиатуру

Теперь cmd-D запускает хром-отладку.

Ответ 18

Наличие пробела в пути файла предотвращает работу Cmd + D. Я переместил проект на место без места, и, наконец, я отработал отладчик Chrome. Похоже на ошибка.

Ответ 19

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

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

реагируют родной-отладчик

а теперь вы можете использовать ссылку ниже, чтобы помочь вам.

хром-разработчик-инструменты

Ответ 20

Очень просто две команды

For IOS $ react-native log-ios
For Android $ react-native log-android

Ответ 21

Предполагая, что вы хотите показать это меню в эмуляторе Android

Затем попробуйте ⌘+m открыть этот диалог настроек dev на эмуляторе Android на Mac.
Если он не отображается, перейдите к AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.
И затем повторите попытку ⌘+m.
Если он еще не отображается, перейдите к настройкам запущенного эмулятора и в раскрывающемся списке Send keyboard shortcuts to combobox/, затем выберите параметр Emulator controls (default).

И затем повторите попытку ⌘+m.
Я надеюсь, что это поможет, это сработало для меня.

Ответ 22

Если вы используете Redux, я настоятельно рекомендую React Native Debugger. Он включает в себя Chrome devtools, но также имеет Redux devtools и React devtools.

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

Реагировать на Devtools: Это позволяет вам проверять определенный компонент, а именно все его свойства и состояние компонента. Если у вас есть фрагмент состояния компонента, который является логическим, он позволяет щелкнуть по нему, чтобы переключить его и посмотреть, как ваше приложение реагирует на его изменения. Отличная особенность.

Chrome Devtools Позволяет просматривать все выходные данные консоли, использовать точки останова, приостанавливать работу отладчика; и т.д. Стандартные функции отладки. Если вы щелкнете правой кнопкой мыши по области, где ваши действия перечислены в Redux Devtools, и выберите "Разрешить проверку сети", вы сможете проверить вызовы API на вкладке сети Chrome Devtools, что приятно.

В заключение, иметь все это в одном месте - это фантастика! Если вам не нужен один из них, вы можете включить или выключить его. Получите React Native Debugger и наслаждайтесь жизнью.

Ответ 23

Существует также очень хорошее имя отладчика Reactotron. https://github.com/infinitered/reactotron

Вам не обязательно находиться в режиме отладки, чтобы увидеть какое-то значение данных, и есть много вариантов.

go имеют вид, который действительно полезен.;)

Ответ 24

В React-Native отладка намного проще.

Для отладки в IOS используйте

cmd + d

ctrl + cmd + z (для симулятора)

Отлаживать в андроиде

Встряхните устройство с помощью прикосновения (убедитесь, что опция разработчика включена)

Ответ 25

Шаг 1: Разместите debugger там, где вы хотите остановить скрипт, например:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

Это приостановит отладчик, когда когда-нибудь контроль придет к этому блоку кода.

Шаг 2: Нажмите Cmd+D на эмуляторе ios и Cmd+M на симуляторе Android. Если у вас есть реальное устройство, встряхните устройство, чтобы открыть меню разработчика, если вы не хотите расшатывать устройство, следуйте этому блогу

Шаг 3: Выберите " Enable Remote JS Debugging, откроется Chrome

Шаг 4: Выберите Developer Tools.

Шаг 5: Ваш отладчик приостанавливается на вкладке Sources где бы вы ни написали debugger в своем коде. Перейдите в консоль и введите любые параметры, которые вы хотите отладить (которые присутствуют в блоке кода), например: Чтобы перейти к следующей точке отладчика, снова перейдите к "Источникам" → нажмите кнопку "Возобновить выполнение сценария" (синяя кнопка в правом углу)

Поместите отладчик, где вы хотите приостановить сценарий.

Наслаждайтесь отладкой!

Ответ 26

Вы можете использовать Safari для отладки версии вашего приложения для iOS без необходимости включать "Отладку JS удаленно". Просто выполните следующие действия:

1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari Web Inspector should open which has a Console and a Debugger

Ответ 27

Если вы хотите включить отладку по умолчанию:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

Чтобы заставить это работать на Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Ссылка: Запустите приложение React Native с включенной по умолчанию функцией "Отладка JS Remote".

Ответ 28

Если вы используете эмулятор, используйте Ctrl + M и симулятор Cmd + D
Нажмите кнопку "Отладка js удаленно"
Google Chrome перейдите в консоль

Ответ 29

Это на самом деле довольно просто. Просто нажмите cmd D (если на mac), и симулятор создаст всплывающее меню. Оттуда просто нажмите "Отладка JS удаленно" или что-то в этом роде. Помните, что запуск отладчика при выполнении кода, связанного с определенными пакетами, как известно, создает проблемы с людьми. У меня возникла проблема с адаптивными картами и отладчиком. Но это было исправлено. По большей части вы должны быть в порядке.

Ответ 30

чтобы отладить ваше собственное родное приложение, просто перейдите по следующему адресу:

локальный: 8081/отладчик-щ в браузере по умолчанию (хром) и открыть инструменты для разработчиков, чтобы отлаживать собственное интерактивное приложение