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


266

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



Помимо этих ответов, если вы работаете с VS Code и хотите отладить его, а не Chrome, то проверьте мой ответ
gprathour

Пожалуйста, следуйте этому блогу. medium.com/javascript-in-plain-english/...
Tunvir Рахман Tusher

Ответы:


159

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

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

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


8
Используя симулятор v8.2, Cmd + D, похоже, ничего не делает. Хром последний. Нужен ли какой-нибудь специальный плагин в Chrome или прокси?
МакГ

5
Получение «Отладчик Websocket недоступен. Вы забыли включить RCTWebSocketExecutor?». : /
Тайлер МакГиннис

1
У меня была следующая ошибка: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: ошибка сценария: ожидаемое имя класса, но найденное свойство. (-2741). Я обнаружил, что если я отключил общий доступ к приложениям Windows с Mac в Parallels, он начинает работать. См. Stackoverflow.com/questions/29310936/… .
Серж ван ден Овер

5
Это будет Cmd+Mна OS X и Android
слоеное

2
Обратите внимание, что Cmd + D ничего не сделает, если для вашей конфигурации сборки установлено значение «Release» - убедитесь, что она установлена ​​в «Debug».
Джвин

79

Отладка собственных приложений 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варианты.

Этот ответ в основном копирует документ, который является началом, но не особенно освещающим. Что означает «отладка как обычно» в этом контексте?
GreenAsJade

6
Важное примечание: React Developer Tools не работал с React Native в течение нескольких месяцев и остается исправленным. Более подробная информация здесь: github.com/facebook/react-devtools/issues/229
Lane Rettig

Кто сказал, что это на Mac?
Синдзоу

@shinzou подразумевается упоминанием симулятора (это симулятор для разработчиков iOS, эмулятор для разработчиков Android). Да, я знаю, что это было давно, но все же, просто FWIW
Конрад Моравски

58

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

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

5
Наконец-то нашел решение для Android, спасибо! И в последней версии, debug in chromeзаменяется на start debug remotely.
MewX

@MewX Не могли бы вы дать нам знать, как это сделать? 🤔
штат Миссури

@ Мухаммед Привет, вы можете просто следовать cmd + mили или ctrl + m, и выбрать start debug remotelyиз всплывающих окон в вашем симуляторе
MewX

31

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

пример:

debugger; //breaks execution

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


Фе! Это то, что мне было нужно! Спасибо друг!
I_am_learning_now

27

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

adb shell input keyevent 82

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

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

debug JS Remotely

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


есть ли iOS-эквивалент этой команды? Я только недавно начал с RN, и это очень поможет в будущем
Хуан Карлос Альпизар Шиншилла

26

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

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

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

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

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


Могу ли я просмотреть значение конкретной переменной через этот отладчик? Я пытался console.log(url), но я не могу найти, где выход.
Кварт

24

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

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

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

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


Я не вижу этих вариантов ... :(
Ноа

16

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

adb shell input keyevent 82


14

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

  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

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

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


12

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

образ



9

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

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


9

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

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

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

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

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

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


8

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


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

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

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

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

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

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


6

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

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

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



5

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


5

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

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


В каком месте я должен поставить эти 4 строки? В App.js или index.js?
Жюльен Ламарш

@JulienLamarche Поместите в App.js
Олкай Эрташ

это должно быть принято как ответ .... почему тоже верь в команды .....
Тушар Пандей

4

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

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

это способ, которым я делаю это!
Зак Кук

Это супер отличный способ увидеть, что происходит с вашим магазином
Daan

4

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

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


4

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

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

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

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

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


4

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

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

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

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

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



3

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

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

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


Спасибо! Мы использовали RN 0,59, который не был совместим с Flipper.
Чичилатте

3

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

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

cmd + d

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

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

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


1
Хорошее объяснение.
Нарендра Соланки

3

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

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

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


3

Вы можете использовать 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

3

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

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

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

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

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

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


2

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

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

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

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

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

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

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

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

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

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


Нужно ли вручную устанавливать Flipper? Или это как-то поставляется с React Native? Если так, как мы можем открыть это?
Charanor

@Charanor Я установил, используя стандартное руководство по обновлению при обновлении до 0.62
MJ Studio
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.