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

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

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

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

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

    Отладка React Native Apps

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

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

    Необязательный

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

    Live Reload

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

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

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

    • Показывать виджет
    • Включить его с помощью CMD + m нажмите на отладку в хроме

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

    пример:

     debugger; //breaks execution 

    Для этого вам должны быть открыты ваши инструменты chrome dev.

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

    Появится экран, который появляется:

    Изменить исходные параметры отладки

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

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

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

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

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

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

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

    adb shell input keyevent 82

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

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

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

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

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

    3. Enable Chrome Debugging с помощью debugger; точка прерывания в вашей программе.

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

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

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

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

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

     adb shell input keyevent 82 

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

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

     debug JS Remotely 

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

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

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

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

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

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

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

     adb logcat *:S ReactNative:V ReactNativeJS:V 

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

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

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

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

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

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

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

    Предполагая, что вы хотите показать это меню на эмуляторе 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 Сменить Send keyboard shortcuts to поле Send keyboard shortcuts to списком / выпадающим списком, затем выберите параметр « Emulator controls (default) .

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

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

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

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

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

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

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

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

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

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

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

    Для iOS: Cmd + D или Встряхните телефон, чтобы открыть меню

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

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

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

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

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

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

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

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

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

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

    2. Нажмите на – Debug js удаленно

    3. Google Chrome отправляется на консоль

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

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

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

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

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

    • Чтобы отладить использование IOS

    cmd + d

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

    • Отладка в android

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

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

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

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

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

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

    Если вы запустите приложение на реальных устройствах, которые подключены к ноутбуку, вы можете отлаживать его через терминал с помощью react-native log-ios react-native log-android или react-native log-android (он также работает для симуляторов)

    Давайте будем гением компьютера.