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


346

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


Спробуйте react-native-log-ios npm pkg, він працює поза коробкою без віддаленого налагодження JS.
бобі

Відповіді:


325

console.log працює.

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

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


47
А як надрукувати вхід консолі в Android, використовуючи atom для React Native?
піщаний

3
@sandy Дивіться цю відповідь . Це не спеціально для Atom, але він може використовуватися в розробці
XCode

21
Зауважте, що станом на React Native 0.29 і пізніших версій ви можете отримувати журнали, не запускаючи налагоджувач. Просто запустіть реакційну-природну log-ios або -реактивну-log-android у командному рядку всередині вашої папки проекту.
Мартін Конічек

1
І коли ви відкриєте віддалену налагодження JS, вам доведеться натиснути опцію + команда + i та перевірити консоль. Цілком необхідна інформація, якої бракувало, і мене заплутало.
судо

1
просто пам’ятайте console.log у виробничій версії вашого додатка може вивести з ладу ваш додаток в ios. тож переконайтесь, що ви перевіряєте, чи є середовище розвитком, ви можете знати це за глобальною змінною DEV в реальній реакції
Yash

347

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

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

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

2
Це дуже корисно, оскільки запуск налагоджувача робить анімації slooooow.
jcollum

13
Це не працює. Я отримую цей безлад, коли запускаю react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Повідомлення>: Сервіс працював лише 0 секунд. Відштовхування відштовхується на 10 секунд.
rptwsthi

@rptwsthi У мене така ж проблема. Ви змогли це вирішити?
Бен

2
@ Деніс Княжев Я не думаю, що є можливість лише помилок журналу, але ви можете відфільтрувати вихід. Якщо ви перебуваєте на Mac або Linux: реактивний log-android | grep "мій фільтр для помилок".
Мартін Конічек

1
console.warn допомогла мені перевірити певні проблеми.
Madhavi Jayasinghe

39

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 (), помилки, нотатки тощо і призводить до нульового сповільнення.


3
+1 для цього простого варіанта. Я закінчив з використанням злегка варіант команди (після того, як я прочитав Fine Manual) , щоб отримати тайминги також:adb logcat -v time -s ReactNativeJS
spechter

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

Я використовую React Native Debugger протягом місяців, і це найкращий варіант, щоб уникнути відставання Саббір: github.com/jhen0409/react-native-debugger
Fran Verona

36

Використовуйте 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

2
будь-який спосіб фільтрувати тільки з console.log?

Не працює для мене, я бачу лише загальні повідомлення журналу React Native, такі як Initializing React Xplat Bridge..
Philipp Ludwig

21

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

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

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


6
Чи можете ви детальніше розповісти про те, як VS Code може отримувати вихід з налагодження від реагуючої програми. Дякую!
mike123

Виберіть "Налагодження JS" у своєму додатку на пристрої та "Переключити конфігурацію налагодження (shift-command-y)" у меню перегляду VS Code. Вам потрібен github.com/Microsoft/vscode-react-native .
goodhyun

19

Тут ви знайдете Інструменти для розробників 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. Офіційна документація тут .


2
Це може уповільнити ефективність програми під час розробки.
Андрієн Печсон

17

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

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

6

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

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

або

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

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

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


Я використовую це замість за замовчуванням. startЦе відкриє налагоджувач, оскільки ви відладчик за замовчуванням замість Chrome, і -gпрапор не дозволить йому захопити фокус на перезавантаженнях. "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
лускатий

3

У мене була така ж проблема: консольні повідомлення не з’являються в області налагодження 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до локальної машині (я зробив!).



3

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

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

console.log('character', parameter)

console.warn('character', parameter)

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

adb logcat

adb -d logcat

Все відображається на ADB, за винятком console.logі console.warnтверджень.
Андрій Костер

Так @AndrewKoster Я згоден з вами, ми можемо переглядати всі журнали з ADB, але це дає вам журнали пристроїв, тут запит пов’язаний із реєстрацією веб-розробки. ADB дає вам журнали пристроїв, а також ви можете контролювати та перевіряти конфігурації пристроїв. Ви можете отримати інформацію з нижнього посилання команд ADB, що може допомогти вам під час розробки. androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744

2

Модуль 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');

2

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

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


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

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

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


2

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

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

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


2

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

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

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

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

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

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

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


2

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

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

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

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


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

В Android:

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

В IOS:

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

1

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


1

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


1

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

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);

1

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

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


1

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

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

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



1

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

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

1

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

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


0

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


0

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


0

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

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


0

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

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

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

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

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


0

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.