Как отладить их код React с помощью React Native, когда приложение работает в симуляторе приложения?
android
ios
react-native
debugging
МакДжи
источник
источник
Ответы:
Cmd+Dиз симулятора. Появится Chrome, и оттуда вы сможете использовать Инструменты разработчика.
Редактировать:
Это теперь связано в справочной документации .
источник
Cmd+M
на OS X и AndroidОтладка собственных приложений React
Для отладки JavaScript-кода вашего приложения реагирования сделайте следующее:
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 Обновить
Для активации Live Reload сделайте следующее:
Control + Command + Z
.Enable/Disable Live Reload
,Reload
иEnable/Disable Debugging
варианты.источник
Для приложения Android, если вы используете Genymotion, вы можете переключать меню, нажимая
CMD + m
, но вам, возможно, придется включить его в меню, выполнив это.CMD + m
нажав на отладку в Chromeисточник
debug in chrome
заменяется наstart debug remotely
.cmd + m
или илиctrl + m
, и выбратьstart debug remotely
из всплывающих окон в вашем симулятореВ дополнение к другим ответам. Вы можете отладить реагировать на натив, используя оператор отладчика
пример:
Ваши инструменты Chrome Dev должны быть открыты, чтобы это работало
источник
если вы хотите выполнить отладку с помощью устройства Android в Windows, просто откройте командную строку и введите (убедитесь, что ваш adb работает правильно)
это покажет экран как изображение
затем выберите
оно автоматически откроет новое окно. Затем откройте проверяющий элемент или нажмите F12 для консоли.
источник
Попробуйте эту программу: https://github.com/jhen0409/react-native-debugger
Работает на:
windows
,osx
иlinux
.Он поддерживает:
react native
иredux
Вы также можете проверить дерево виртуальных компонентов и изменить стили, которые отражены в приложении.
источник
console.log(url)
, но я не могу найти, где выход.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
источник
У меня недостаточно репутации, чтобы комментировать предыдущие ответы, и это здорово. :) Вот несколько способов отладки при разработке собственного приложения.
Живая перезагрузка
С помощью клавиш ⌘ + R реагирование на родную систему позволяет легко увидеть ваши изменения или даже просто включить прямую перезагрузку, и сторож « обновит » симулятор последними изменениями. Если вы получили ошибку, вы можете получить подсказку по номеру строки на этом красном экране. Несколько отмен вернут вас в рабочее состояние и начнут снова.
console.log('yeah, seriously.')
Я предпочитаю позволить программе запускаться и регистрировать некоторую информацию, а не добавлять
debugger
точку останова. (жесткий отладчик полезен при работе с внешними пакетами / библиотеками и поставляется с автозаполнением, поэтому вы знаете, какие другие методы вы можете использовать.)Enable Chrome Debugging
сdebugger;
точкой останова в вашей программе.Ну, это зависит от типа ошибок, с которыми вы столкнулись, и ваших предпочтений отладки. Для большинства
undefined is not an object (evaluating 'something.something')
метод 1 и 2 будет достаточно хорош для меня.В то время как работа с внешними библиотеками или пакетами, написанными другими разработчиками, потребует больше усилий для отладки, следовательно, хороший инструмент, такой как
Chrome Debugging
Иногда это исходит от самой платформы реакции-натива, так что поиск проблем с реакцией натива определенно поможет.
надеюсь, это поможет кому-то там.
источник
Вместо Cmd+M, для Android Эмулятор Нажмите F10в Windows. Эмулятор начинает показывать все опции отладки реагировать на ошибки.
источник
запустите это в терминале для журнала 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:
теперь это просто вопрос входа в ваш код. например:
console.tron.log('debug')
источник
Перейдите к источникам в верхнем меню и найдите файл класса js в проводнике файлов справа.
Вы можете установить точки останова в представлении и отладить код, как показано на рисунке.
источник
По умолчанию мой симулятор ios не улавливал нажатия клавиш, поэтому cmd-D не работал. Мне пришлось включить настройки клавиатуры с помощью меню симулятора:
Оборудование> Клавиатура> Подключить клавиатуру
Теперь cmd-D запускает отладку Chrome.
источник
Для приложения Android. Нажмите Ctrl + M, чтобы выбрать debug js удаленно, и откроется новое окно в chrome с URL http: // localhost: 8081 / debugger-ui . Теперь вы можете отлаживать приложение в браузере Chrome
источник
Наличие пробела в пути к файлу препятствует работе Cmd+ D. Я переместил свой проект в место без пробелов и, наконец, получил отладчик Chrome для работы. Похоже, ошибка .
источник
Если вы хотите включить отладку по умолчанию:
Чтобы заставить это работать на Android:
Ссылка: Запустите приложение React Native с «Отладкой JS Remote» по умолчанию.
источник
Очень просто всего две команды
источник
Предполагая, что вы хотите показать это меню на эмуляторе 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 и наслаждайтесь жизнью.
источник
Это альтернативный способ использования собственного приложения отладчика реагирования.
Вы можете скачать приложение, используя ссылку ниже, это очень хорошее приложение для управления магазином вместе с исходным кодом.
реагируют родной-отладчик
а теперь вы можете использовать ссылку ниже, чтобы помочь вам.
Хром-разработчик-инструменты
источник
Если вы используете эмулятор, используйте Ctrl+ M& simulator Cmd+D
Нажмите на - Отладка JS удаленно
Google Chrome перейти на консоль
источник
Существует также очень хорошее отладочное имя Reactotron. https://github.com/infinitered/reactotron
Вам не нужно находиться в режиме отладки, чтобы увидеть какое-то значение данных, и есть много вариантов.
иди посмотри, что действительно полезно. ;)
источник
В React-Native отладка намного проще.
источник
Шаг 1: Место,
debugger
где вы хотите остановить скрипт, например:Это приостановит отладчик, когда когда-нибудь контроль придет к этому блоку кода.
Шаг 2: Нажмите
Cmd+D
на эмуляторе ios иCmd+M
на симуляторе Android . Если у вас есть реальное устройство, встряхните устройство, чтобы открыть меню разработчика, если вы не хотите расшатывать устройство, следуйте этому блогуШаг 3: выберите
Enable Remote JS Debugging
, это откроет ChromeШаг 4: выберите
Developer Tools.
Шаг 5: Ваш отладчик находится на
Sources
вкладке, где бы вы ни писалиdebugger
в своем коде. Перейдите в консоль и введите любые параметры, которые вы хотите отладить (которые присутствуют в блоке кода), например: Чтобы снова перейти к следующей точке отладчика, перейдите в «Источники» -> нажмите кнопку «Возобновить выполнение сценария» (синяя кнопка в правом углу)Поместите отладчик, где вы хотите приостановить сценарий.
Наслаждайтесь отладкой!
источник
Вы можете использовать Safari для отладки версии вашего приложения для iOS, не включая «Удаленную отладку JS», просто выполните следующие шаги:
источник
Сначала в симуляторе 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 включает режим доступности и целевой режим.
Вы также можете увидеть необработанный сетевой запрос / ответ в вашем приложении.
источник