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

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

Редактировать:

Это теперь связано в справочной документации .

Отладка собственных приложений React

Для отладки JavaScript-кода вашего приложения реагирования сделайте следующее:

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

По желанию

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

Live Обновить

Для активации Live Reload сделайте следующее:

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

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

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

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

пример:

debugger; //breaks execution

Ваши инструменты Chrome Dev должны быть открыты, чтобы это работало

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

adb shell input keyevent 82

это покажет экран как изображение

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

debug JS Remotely

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

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

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

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

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

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

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

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

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

adb shell input keyevent 82

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

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

   С помощью клавиш ⌘ + R реагирование на родную систему позволяет легко увидеть ваши изменения или даже просто включить прямую перезагрузку, и сторож « обновит » симулятор последними изменениями. Если вы получили ошибку, вы можете получить подсказку по номеру строки на этом красном экране. Несколько отмен вернут вас в рабочее состояние и начнут снова.

2. console.log('yeah, seriously.')

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

3. Enable Chrome Debuggingс debugger;точкой останова в вашей программе.

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

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

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

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

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

adb logcat *:S ReactNative:V ReactNativeJS:V

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

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

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

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

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

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

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

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

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

Для меня лучший способ отладки на 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')

1. Запустите ваше приложение в симуляторе - response-native run-ios
2. Нажмите Ctrl + D и нажмите Отладка JS Удаленно

1. веб-страница должна открыться по адресу http: // localhost: 8081 / debugger-ui , если нет, введите URL и перейдите по этой ссылке в Chrome
2. Щелкните правой кнопкой мыши на странице и выберите «Проверить», после чего откроются инструменты разработчика для Chrome.

3. Перейдите к источникам в верхнем меню и найдите файл класса js в проводнике файлов справа.

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

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

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

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

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

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

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

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» по умолчанию.

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

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

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

• Затем попробуйте ⌘+mоткрыть это диалоговое окно настроек разработчика на эмуляторе Android на Mac.

• Если это не показывает, тогда иди AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.

• А затем повторите попытку ⌘+m.

• Если он не отображается, перейдите к настройкам запущенного эмулятора и в Send keyboard shortcuts toвыпадающем меню / выпадающем меню выберите Emulator controls (default)опцию.

• А затем повторите попытку ⌘+m.

• Надеюсь, это поможет, это сработало для меня.

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

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

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

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

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

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

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

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

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

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

1. Если вы используете эмулятор, используйте Ctrl+ M& simulator Cmd+D

2. Нажмите на - Отладка JS удаленно

3. Google Chrome перейти на консоль

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

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

иди посмотри, что действительно полезно. ;)

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

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

cmd + d

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

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

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

Шаг 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в своем коде. Перейдите в консоль и введите любые параметры, которые вы хотите отладить (которые присутствуют в блоке кода), например: Чтобы снова перейти к следующей точке отладчика, перейдите в «Источники» -> нажмите кнопку «Возобновить выполнение сценария» (синяя кнопка в правом углу)

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

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

Вы можете использовать Safari для отладки версии вашего приложения для iOS, не включая «Удаленную отладку JS», просто выполните следующие шаги:

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

Сначала в симуляторе ios, если вы нажмете клавишу [command + D], вы увидите этот экран.

Затем нажмите кнопку Отладка JS удаленно.

После того, как вы увидите страницу React Native Debugger, как это.

А затем откройте свой инспектор [f12] и перейдите на вкладку консоли, отладьте его! :)

React Native 0.62 выпущен - Официальное решение - Flipper 🚀

Flipper - это инструменты отладки для Android и iOS Mobile без использования режима отладки в реагировать на нативные.

Начиная с 0,62 RN (см. Эту ссылку ), Flipper инициализируется с проектом по умолчанию.

У Flipper есть несколько плагинов для отладки. Плагины включают в себя Layout, Network,Shared preferences

Большим преимуществом Flipper является также не много плагинов, но вы также можете легко увидеть отладку консоли устройства Android / iOS.

Flipper также предупреждает вас о сбое или отклонении сети.

Плагин Layout включает режим доступности и целевой режим.

Вы также можете увидеть необработанный сетевой запрос / ответ в вашем приложении.