Як зробити вхід в React Native?

Як я можу зареєструвати змінну в React Native, як використовувати console.logпри розробці для Інтернету?

console.log працює.

За замовчуванням на iOS він входить у область налагодження всередині Xcode.

У тренажері IOS натисніть ( ⌘+ D) і натисніть Віддалене налагодження JS . Це відкриє ресурс, http: // localhost: 8081 / debugger-ui на localhost. Звідти використовуйте інструменти для розробників Chrome для переглядуconsole.log

Використання console.log, і console.warnт.д.

Станом на React Native 0.29 ви можете просто виконати наступне, щоб побачити журнали в консолі:

$ react-native log-ios
$ react-native log-android

Pre React Native 0.29, запустіть це в консолі:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, запустіть:

react-native log-ios

або

react-native log-android

Як сказав Мартин в іншій відповіді.

Це показує всі console.log (), помилки, нотатки тощо і призводить до нульового сповільнення.

Використовуйте console.debug("text");

Ви побачите журнали всередині терміналу.

Кроки:

• Запустіть програму:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Запустіть реєстратор:

react-native log-ios        # For iOS
react-native log-android    # For Android

Visual Studio Code має гідну консоль налагодження, яка може показувати ваш console.log.

Код VS, частіше за все, - це дружнє реагування на рідну реальність.

Тут ви знайдете Інструменти для розробників Chrome .

Наступні кроки мають перейти до Інструментів для розробників Chrome, де ви зможете побачити свої console.logзаяви.

Кроки

1. Встановіть Google Chrome , якщо ви ще цього не зробили
2. Запустити додаток за допомогою react-native run-androidабоreact-native run-ios
3. Відкрити меню розробника
   • Mac: ⌘+D для iOS або ⌘Mдля Android iOS
   • Windows / Linux: похитнути телефон Android
4. Виберіть Debug JS Remotely
5. Це має запустити налагоджувач у Chrome
6. У Chrome: Tools -> More Tools -> Developer Optionsі переконайтеся, що перебуваєте на consoleвкладці

Тепер, коли console.logоператор виконується, він повинен з’являтися в Chrome Dev Tools. Офіційна документація тут .

Є три методи, які використовую для налагодження під час розробки програм React Native:

1. console.log(): показує в консолі
2. console.warn(): показано в жовтому полі в нижній частині програми
3. alert(): показує як підказку, як це робиться в Інтернеті

Я вважаю за краще рекомендувати вам, хлопці, які використовують React Native Debugger. Ви можете завантажити та встановити його за допомогою цієї команди.

brew update && brew cask install react-native-debugger

або

Просто перевірте посилання нижче.

https://github.com/jhen0409/react-native-debugger

Щасливий злом!

У мене була така ж проблема: консольні повідомлення не з’являються в області налагодження XCode. У своєму додатку я зробив cmd-d, щоб відкрити меню налагодження, і згадав, що встановив "Налагодження в Safari".

Я вимкнув це, і деякі повідомлення були надруковані на вихідне повідомлення, але не на мої консольні повідомлення. Однак в одному з повідомлень журналу сказано:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

Це було тому, що я раніше поєднав мій проект для тестування на реальному пристрої з командою:

react-native bundle --minify

Це в комплекті без "dev-mode". Щоб дозволити повідомлення розробників, включіть прапор --dev:

react-native bundle --dev

І повідомлення console.log повернулися! Якщо ви не пакетування для реального пристрою, не забудьте повторно точки jsCodeLocationв AppDelegate.mдо локальної машині (я зробив!).

Натисніть [команда + контроль + Z] у Xcode Simulator, виберіть Debug JS Remote, а потім натисніть [command + option + J], щоб відкрити інструменти для розробників Chrome.

Xcode Simulator Img

див .: Налагодження React Native Apps

Це так просто отримати журнали в React-Native

Використовуйте console.log і console.warn

console.log('character', parameter)

console.warn('character', parameter)

Цей журнал ви можете переглянути в консолі браузера. Якщо ви хочете перевірити журнал пристроїв або сказати, що ви хочете створити журнал APK виробництва, ви можете використовувати

adb logcat

adb -d logcat

Модуль reakct-native-xlog, який може вам допомогти, це Xlog для реакції-нативної WeChat . Це може виводити в консоль Xcode та файл журналу, а файли журналу Product можуть допомогти вам налагодити.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');

Час розробки журналу

Для ведення журналу часу розробки можна використовувати console.log () . Одне важливе, якщо ви хочете відключити ведення журналу у виробничому режимі, то у файлі програми Root Js просто призначте порожню функцію, як ця - console.log = {} Це дозволить взагалі відключити публікацію всього журналу в додатку, що фактично потрібно у виробництві режим як console.log витрачає час.

Запуск журналу часу

У режимі виробництва також потрібно бачити журнали, коли реальні користувачі використовують ваш додаток у режимі реального часу. Це допомагає зрозуміти помилки, використання та небажані випадки. Для цього існує багато платних інструментів сторонніх виробників. Один з них, який я використовував, - це Logentries

Хороша річ, що Logentries також має React Native Module . Отже, вам знадобиться дуже менше часу, щоб увімкнути журнал запуску за допомогою мобільного додатка.

Щось, що вийшло близько місяця тому, - це "Створити реактивну програму", дивовижна панель котлів, яка дозволяє (з мінімальними зусиллями) показувати, як виглядає ваш додаток на мобільному пристрої (будь-яке з камерою) за допомогою програми Expo . Він не тільки має оновлення в реальному часі, але і дозволить вам бачити журнали консолі у своєму терміналі так само, як під час розробки для Інтернету , а не використовувати браузер, як ми це робили з React Native раніше.

Звичайно, вам доведеться зробити новий проект із цією панеллю ... але якщо вам потрібно перенести свої файли, це не повинно бути проблемою. Дай постріл.

Редагувати: насправді для цього навіть не потрібна камера. Я сказав, що для сканування QR-коду, але ви також можете ввести щось, щоб синхронізувати його зі своїм сервером, а не лише QR-кодом.

Існує два варіанти налагодження або отримання результатів нашої реактивної програми під час використання

Емулятор або реальний пристрій

Для першого використання емулятора: використовуйте

react-native log-android або reak-native log-ios

щоб отримати висновок журналу

на реальному пристрої.потисніть свій пристрій

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

Використовуйте нативний налагоджувач для реакції для зберігання журналів і резервного зберігання https://github.com/jhen0409/react-native-debugg

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

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

Остання повна підтримка інструментів redux dev

1. Введіть console.log("My log text")свій код
2. перейдіть до інструментів командного рядка
3. розташуйте себе в папці свого розвитку

В Android:

• написати цю команду: React-native log-android

В IOS:

• написати цю команду: React-native log-ios

Ви можете використовувати віддалені JS debugly варіант з вашого пристрою або ви можете просто використовувати реагувати рідної лог-андроїд і реагувати рідної лог-ІОС для ІОС.

console.log () - це простий спосіб налагодження коду, але його потрібно використовувати з функцією стрілки або bind () під час відображення будь-якого стану. Ви можете знайти посилання корисним.

Це можна зробити двома методами

1> за допомогою попередження

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Використовуючи сповіщення Це не добре щоразу, якщо воно надходить на сповіщення, то кожного разу поп буде відкриватися, тому якщо робити циклічні засоби - це не бажано використовувати це

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);

Користувачі з Windows та Android Studio:

Ви знайдете його під Logcat в Android Studio. Тут відображається велика кількість повідомлень про реєстрацію, тому вам може бути простіше створити фільтр для "ReactNativeJS", який відображатиме лише ваші повідомлення console.log, створені всередині вашої рідної програми реагування.

Кожен розробник стикається з проблемою налагодження з рідною реакцією, навіть я зіткнувся з цим, і я вважаю це рішення для мене достатнім на початковому рівні, він охоплює кілька способів, які допомагають нам спробувати і використати все, що нам зручно.

1. Налагодження за допомогою console.log
2. Налагодження коду (логіки) за допомогою Nuclide
3. Код налагодження (логіка) в Chrome
4. Використовуйте Xcode для налагодження графічного інтерфейсу

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Ви також можете використовувати Reactotron, це дасть вам набагато більше функціональних можливостей, ніж просто ведення журналу. https://github.com/infinitered/reactotron

Існує кілька способів цього досягти, я перераховую їх, включаючи і мінуси їх використання. Ви можете використовувати:

1. console.logі переглядати записи журналів на, не виключаючи можливість віддаленої налагодження з інструментів розробників, Android Studio та Xcode. або ви можете вимкнути параметр віддаленої налагодження і переглянути журнал на інструментах хромованого розробника або vscode чи будь-якому іншому редакторі, що підтримує налагодження, вам слід бути обережними, оскільки це уповільнить процес у цілому.
2. Ви можете використовувати, console.warnале тоді ваш мобільний екран буде залитий тими дивними жовтими полями, які можуть бути, або можуть бути неможливими відповідно до вашої ситуації.
3. Найефективніший метод, який я натрапив - це використання стороннього інструменту, Reactotron . Простий та простий у налаштуванні інструмент, який дає змогу переглядати кожний оператор журналу різного рівня (помилка, налагодження, попередження тощо). Він надає вам інструмент GUI, який показує весь журнал вашої програми без уповільнення продуктивності.

Ви використовуєте те саме, що використовується для звичайного Інтернету. consoleКоманда також працює в цьому випадку. Наприклад, ви можете використовувати console.log(), console.warn()і console.clear()т.д.

Ви можете використовувати Chrome Developer, щоб використовувати consoleкоманду під час входу в систему під час роботи програми React Native.

console.log() - це найкращий і простий спосіб побачити ваш журнал на консолі, коли ви використовуєте віддалений налагоджувач js з меню розробника

Chrome Devtool - найкращий та найпростіший спосіб для ведення журналів та налагодження.

Якщо ви перебуваєте на OSX та використовуєте емулятор, ви можете переглядати свої дані console.logбезпосередньо в веб-інспекторі сафарі.

Safari => Development => Simulator - [ваша версія тренажера тут] => JSContext

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

1. Коли ми стикаємося з проблемами, пов’язаними з даними, і ми хочемо перевірити наші дані та налагодження, пов’язані з даними у цьому випадку console.log('data::',data)

   і налагодження js віддалено - найкращий варіант.

2. Інший випадок - це проблеми з інтерфейсом користувача та стилями, у яких нам потрібно перевірити стилізацію компонента. У цьому випадку найкращим варіантом є react-dev-tools.

   обидва методи тут згадуються.

console.log може використовуватися для будь-якого проекту JS. Якщо ви запускаєте додаток у localhost, то, очевидно, він схожий на будь-який проект JavaScript. Але використовуючи тренажер або будь-який пристрій, підключіть цей тренажер до нашого локального господаря, і ми можемо побачити на консолі.