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

debugging react-native

112391 просмотра

30 ответа

1849 Репутация автора

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

Автор: McG Источник Размещён: 26.03.2015 09:33

Ответы (30)


129 плюса

5894 Репутация автора

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

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

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

Автор: xanadont Размещён: 26.03.2015 11:35

5 плюса

1849 Репутация автора

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

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

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

Автор: McG Размещён: 28.03.2015 01:54

5 плюса

83 Репутация автора

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

Автор: micksabox Размещён: 28.03.2015 04:16

69 плюса

823 Репутация автора

Отладка собственных приложений 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варианты.
Автор: Jiuhong Deng Размещён: 31.03.2015 09:38

21 плюса

839 Репутация автора

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

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

Реагировать на собственные варианты отладки

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

Автор: bigtex777 Размещён: 15.05.2015 04:55

22 плюса

1244 Репутация автора

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

пример:

debugger; //breaks execution

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

Автор: drikoda Размещён: 20.05.2015 02:28

13 плюса

1379 Репутация автора

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

  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

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

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

Автор: chinloong Размещён: 26.01.2016 01:46

44 плюса

1904 Репутация автора

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

  • Убрать виджет
  • Включите его, CMD + mнажав на отладку в Chrome
Автор: John Lim Размещён: 28.04.2016 03:31

9 плюса

104 Репутация автора

adb logcat *:S ReactNative:V ReactNativeJS:V

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

Автор: nagasundaram I Размещён: 15.06.2016 11:45

8 плюса

136 Репутация автора

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

Автор: Vinay Размещён: 01.02.2017 07:18

14 плюса

1096 Репутация автора

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

adb shell input keyevent 82

Автор: BdN3504 Размещён: 02.02.2017 02:47

22 плюса

3040 Репутация автора

введите описание изображения здесь

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

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

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

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

Автор: robertmylne Размещён: 09.03.2017 12:58

6 плюса

216 Репутация автора

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

Автор: Sujeesh Balan Размещён: 23.03.2017 09:53

0 плюса

1 Репутация автора

В Windows и с помощью эмулятора Android вы можете сделать следующее:

  1. После запуска эмулятора и запуска приложения нажмите кнопку « Меню» и выберите «Отладка JS удаленно» или «Отладка в Chrome» (это зависит от использования эмулятора). Вы можете увидеть следующее изображение в качестве ссылки: эмулятор с изображением шагов
  2. Появится новая вкладка Chrome. Вы должны нажать Ctrl + ⇧J, чтобы показать инструменты разработчика и начать отслеживать шаги отладки. Смотрите это изображение как ссылку

Кроме того, вы должны использовать эту console.log()функцию, чтобы сделать процесс отладки более информативным.

Автор: Jhonny Banegas Размещён: 23.03.2017 06:33

0 плюса

1 Репутация автора

Вы можете установить React Native Debugger из Brew. это удобнее использовать, чем отладчик в Chrome

Автор: Ainur Baizhumanova Размещён: 26.03.2017 09:09

4 плюса

2035 Репутация автора

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

For IOS $ react-native log-ios
For Android $ react-native log-android
Автор: Abhijit Chakra Размещён: 30.03.2017 05:29

8 плюса

2854 Репутация автора

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

введите описание изображения здесь

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

введите описание изображения здесь

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

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

Автор: Sameera Chathuranga Размещён: 04.04.2017 04:28

6 плюса

81 Репутация автора

Если вы используете Microsoft Visual Code, установите расширение React Native Tools. Затем вы можете добавить точки останова, просто нажав на нужный номер строки. Выполните следующие шаги для настройки и отладки приложения: НАСТРОИТЬ БЕЖАТЬ

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

Автор: radiance Размещён: 20.04.2017 11:56

0 плюса

261 Репутация автора

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

Автор: Jeff Размещён: 11.05.2017 08:28

5 плюса

111 Репутация автора

Предполагая, что вы хотите показать это меню на эмуляторе 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.

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

Автор: Nkokhelox Размещён: 22.06.2017 01:39

1 плюс

80 Репутация автора

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

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

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

Автор: Krishnendu Bhattacharyya Размещён: 25.07.2017 01:07

1 плюс

90 Репутация автора

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

Автор: S. Sinha Размещён: 09.08.2017 03:13

14 плюса

198 Репутация автора

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

adb shell input keyevent 82

это покажет экран как изображение введите описание изображения здесь

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

debug JS Remotely

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

Автор: bpsourav21 Размещён: 29.08.2017 08:41

1 плюс

141 Репутация автора

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

localhost: 8081 / debugger-ui в вашем браузере по умолчанию (chrome) и откройте инструменты разработчика для отладки вашего собственного встроенного приложения

Автор: André Abboud Размещён: 21.09.2017 04:13

1 плюс

39 Репутация автора

Если вы используете Nuclide в редакторе Atom для разработки приложений React Native, то вы также можете использовать «Инспектор элементов», который помогает наблюдать за изменениями реквизитов и состояний, когда приложение работает на устройстве на этапе разработки. Узнайте больше здесь - https://nuclide.io/docs/platforms/react-native/#element-inspector введите описание изображения здесь

Автор: bygirish Размещён: 26.09.2017 08:32

2 плюса

21 Репутация автора

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

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

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

Автор: Youcef EL KAMEL Размещён: 29.09.2017 02:06

4 плюса

432 Репутация автора

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

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

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

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

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

Автор: Nunchucks Размещён: 14.12.2017 12:49

1 плюс

167 Репутация автора

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

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

cmd + d

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

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

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

Автор: jatin.7744 Размещён: 29.03.2018 11:04

4 плюса

310 Репутация автора

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

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

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

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

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

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

Автор: Naveen Vignesh Размещён: 17.05.2018 05:19

5 плюса

111 Репутация автора

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

образ

Автор: priyanga Размещён: 25.07.2018 08:01
Вопросы из категории :
32x32