Як можна налагоджувати код 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 для 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натиснувши на налагодження в хромі

Окрім інших відповідей. Ви можете налагоджувати натиснуту реакцію за допомогою оператора налагодження

приклад:

debugger; //breaks execution

Ваші хромовані інструменти для розробників повинні бути відкритими для цього

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

   react-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

Іноді це відбувається від самої платформи, що реагує на реагування, тож гуглінг щодо проблем, що реалізуються, напевно допоможе.

сподіваюся, що це допоможе комусь там.

Замість цього Cmd+Mдля Android Emulator Натисніть F10у Windows. Емулятор починає показувати всі параметри налагодження реакції.

adb logcat *:S ReactNative:V ReactNativeJS:V

запустіть це в терміналі для андроїд-журналу.

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

Не забудьте включити налагодження JS віддалено в емуляторі, якщо ви його використовуєте.

Для Android: Ctrl + M (емулятор) або Shake the Phone (In Device), щоб відкрити меню.

Для iOS: Cmd + D або Shake the Phone, щоб відкрити меню

Переконайтеся, що у вас є хром.

У розкритому меню виберіть Debug JS Remote 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. Запустіть свою програму в тренажері - натискання на рідну реакцію
2. Натисніть ctrl + d і натисніть кнопку Debug JS Remote

1. веб-сторінка повинна відкриватися за адресою http: // localhost: 8081 / debugger-ui , якщо не введіть URL-адресу та перейдіть за цим посиланням у Chrome
2. Клацніть правою кнопкою миші на сторінці та натисніть «Оглянути», і вона має відкрити інструменти для розробників хрому

3. Перейдіть до джерел у верхньому меню та знайдіть файл класу js у правій програмі провідника файлів

4. Ви можете поставити точки перерви на вигляд і налагодити код там, як ви бачите на зображенні.

За замовчуванням мій ios-симулятор не збирав натискання клавіш, тому cmd-D не працював. Мені довелося ввімкнути настройки клавіатури за допомогою меню симулятора:

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

Тепер cmd-D запускає хромову налагодження.

Для програми для Android. Натисніть Ctrl + M виберіть налагодження js віддалено, воно відкриє нове вікно в хромі з URL-адресою http: // localhost: 8081 / debugger-ui . Тепер ви можете налагоджувати програму в хромованому браузері

Маючи простір в шляху до файлу НЕ дозволяє на 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"

Дуже просто всього дві команди

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 : це дозволяє переглядати ваші дії та крокувати вперед та назад через них. Він також дозволяє переглядати ваш магазин редукцій і має функцію автоматичного розмежування попереднього стану з оновленим станом для кожної дії, так що ви можете бачити це, коли ви крокуєте вперед і назад через низку дій.

React Devtools : це дозволяє перевірити певний компонент, а саме всі його реквізити, а також стан компонентів. Якщо у вас є фрагмент стану компонента, який є булевим, він дозволяє вам клацнути по ньому, щоб переключити його та побачити, як реагує ваш додаток, коли він змінюється. Відмінна особливість.

Chrome Devtools Дозволяє переглядати всі консольні виходи, використовувати точки перерви, паузу на відладчику; тощо. Стандартні функції налагодження. Якщо ви клацніть правою кнопкою миші область, де ваші дії вказані у програмі Redux Devtools, і виберіть "Дозволити перевірку мережі", ви можете перевірити свої дзвінки API на вкладці мережі Chrome Devtools, яка є приємною.

На закінчення мати все це в одному місці - це фантастично! Якщо вам не потрібен один із них, ви можете вмикати та вимикати його. Отримайте реактивний налагоджувач і насолоджуйтесь життям.

Це альтернативний спосіб використання нативної програми налагодження реагування.

Ви можете завантажити додаток за посиланням нижче. Це дуже хороший додаток для управління магазином redux разом із вихідним кодом.

react-native-debugger

а також зараз днів, які ви можете безпосередньо використовувати нижче за посиланням, щоб допомогти вам вийти.

chrome-developer-tools

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 (для тренажера)

• Для налагодження в Android

Потискуйте пристрій з дотиком (переконайтеся, що ввімкнено параметр розробника)

Крок 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, якщо натиснути клавішу [команда + D], ви зможете побачити цей екран.

Потім натисніть кнопку Налагодити JS віддалено.

Після того, як ви побачите сторінку React Native Debugger на зразок цієї.

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

Випущено React Native 0.62 - Офіційне рішення - Flipper 🚀

Flipper - це інструменти для налагодження Android та iOS Mobile, не використовуючи режим налагодження у реальній реакції.

Оскільки RN 0,62 (див. Це посилання ), Flipper ініціалізується з проектом за замовчуванням.

Flipper має кілька плагінів для налагодження. Модулі включають в себе Layout, Network,Shared preferences

Найбільшою перевагою Flipper є також не багато плагінів, але ви також можете легко бачити налагодження консолі пристрою Android / iOS.

Flipper також попереджає про збій або відмову від мережі.

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

Ви також можете бачити необроблений мережевий запит / відповідь у своїй програмі.