Як я можу зареєструвати змінну в React Native, як використовувати console.log
при розробці для Інтернету?
Як я можу зареєструвати змінну в 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
react-native log-ios
evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Повідомлення>: Сервіс працював лише 0 секунд. Відштовхування відштовхується на 10 секунд.
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 (), помилки, нотатки тощо і призводить до нульового сповільнення.
adb logcat -v time -s ReactNativeJS
Використовуйте 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
Initializing React Xplat Bridge.
.
Visual Studio Code має гідну консоль налагодження, яка може показувати ваш console.log.
Код VS, частіше за все, - це дружнє реагування на рідну реальність.
Тут ви знайдете Інструменти для розробників Chrome .
Наступні кроки мають перейти до Інструментів для розробників Chrome, де ви зможете побачити свої console.log
заяви.
react-native run-android
абоreact-native run-ios
⌘+D
для iOS або ⌘M
для Android iOSDebug JS Remotely
Tools -> More Tools -> Developer Options
і переконайтеся, що перебуваєте на console
вкладціТепер, коли console.log
оператор виконується, він повинен з’являтися в Chrome Dev Tools. Офіційна документація тут .
Є три методи, які використовую для налагодження під час розробки програм React Native:
console.log()
: показує в консоліconsole.warn()
: показано в жовтому полі в нижній частині програмиalert()
: показує як підказку, як це робиться в ІнтернетіЯ вважаю за краще рекомендувати вам, хлопці, які використовують 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"
У мене була така ж проблема: консольні повідомлення не з’являються в області налагодження 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.
Це так просто отримати журнали в React-Native
Використовуйте console.log і console.warn
console.log('character', parameter)
console.warn('character', parameter)
Цей журнал ви можете переглянути в консолі браузера. Якщо ви хочете перевірити журнал пристроїв або сказати, що ви хочете створити журнал APK виробництва, ви можете використовувати
adb logcat
adb -d logcat
console.log
і console.warn
тверджень.
Модуль 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
console.log("My log text")
свій кодВ Android:
В 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, створені всередині вашої рідної програми реагування.
Кожен розробник стикається з проблемою налагодження з рідною реакцією, навіть я зіткнувся з цим, і я вважаю це рішення для мене достатнім на початковому рівні, він охоплює кілька способів, які допомагають нам спробувати і використати все, що нам зручно.
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Ви також можете використовувати Reactotron, це дасть вам набагато більше функціональних можливостей, ніж просто ведення журналу. https://github.com/infinitered/reactotron
Існує кілька способів цього досягти, я перераховую їх, включаючи і мінуси їх використання. Ви можете використовувати:
console.log
і переглядати записи журналів на, не виключаючи можливість віддаленої налагодження з інструментів розробників, Android Studio та Xcode. або ви можете вимкнути параметр віддаленої налагодження і переглянути журнал на інструментах хромованого розробника або vscode чи будь-якому іншому редакторі, що підтримує налагодження, вам слід бути обережними, оскільки це уповільнить процес у цілому.console.warn
але тоді ваш мобільний екран буде залитий тими дивними жовтими полями, які можуть бути, або можуть бути неможливими відповідно до вашої ситуації.Ви використовуєте те саме, що використовується для звичайного Інтернету. console
Команда також працює в цьому випадку. Наприклад, ви можете використовувати console.log()
, console.warn()
і
console.clear()
т.д.
Ви можете використовувати Chrome Developer, щоб використовувати console
команду під час входу в систему під час роботи програми React Native.
console.log()
- це найкращий і простий спосіб побачити ваш журнал на консолі, коли ви використовуєте віддалений налагоджувач js з меню розробника
Chrome Devtool - найкращий та найпростіший спосіб для ведення журналів та налагодження.
Якщо ви перебуваєте на OSX та використовуєте емулятор, ви можете переглядати свої дані console.log
безпосередньо в веб-інспекторі сафарі.
Safari => Development => Simulator - [ваша версія тренажера тут] => JSContext
Зазвичай існує два сценарії, коли нам потрібна налагодження.
Коли ми стикаємося з проблемами, пов’язаними з даними, і ми хочемо перевірити наші дані та налагодження, пов’язані з даними у цьому випадку
console.log('data::',data)
і налагодження js віддалено - найкращий варіант.
Інший випадок - це проблеми з інтерфейсом користувача та стилями, у яких нам потрібно перевірити стилізацію компонента. У цьому випадку найкращим варіантом є react-dev-tools.
console.log може використовуватися для будь-якого проекту JS. Якщо ви запускаєте додаток у localhost, то, очевидно, він схожий на будь-який проект JavaScript. Але використовуючи тренажер або будь-який пристрій, підключіть цей тренажер до нашого локального господаря, і ми можемо побачити на консолі.