Как сделать вход в React Native?

Как я могу зарегистрировать переменную в React Native, например, при использовании console.logдля веб-разработки?

console.log работает.

По умолчанию на iOS это регистрирует к панели отладки в XCode.

В симуляторе IOS нажмите ( ⌘+ D) и нажмите Remote JS Debugging . Откроется ресурс http: // localhost: 8081 / debugger-ui на локальном хосте. Оттуда используйте консоль инструментов разработчика 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, чаще всего, React Native дружественный.

Вот где Chrome Developer Tools - ваш друг.

Следующие шаги приведут вас к Chrome Developer Tools, где вы сможете увидеть свои 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. Официальная документация здесь .

Есть 3 метода, которые я использую для отладки при разработке приложений 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, включите флаг --dev:

react-native bundle --dev

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

Нажмите [command + control + Z] в Xcode Simulator, выберите Debug JS Remote, затем нажмите [command + option + J], чтобы открыть инструменты разработчика Chrome.

Xcode Simulator Img

см .: отладка собственных приложений React

Это так просто, чтобы получить логи в React-Native

Используйте console.log и console.warn

console.log('character', parameter)

console.warn('character', parameter)

Этот журнал вы можете просмотреть в консоли браузера. Если вы хотите проверить журнал устройства или сказать журнал APK производства, вы можете использовать

adb logcat

adb -d logcat

Модуль response-native-xlog, который может вам помочь, - это журнал WeChat Xlog для реагирования на натив. Это может выводить в консоль Xcode и файл журнала, файлы журнала продукта могут помочь вам отладки.

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 . Таким образом, вам потребуется гораздо меньше времени, чтобы включить ведение журнала времени в вашем мобильном приложении.

Что-то, что только что вышло около месяца назад, это «Create React Native App», потрясающий шаблон, который позволяет вам (с минимальными усилиями) показать, как ваше приложение выглядит вживую на вашем мобильном устройстве (ЛЮБОМ с камерой) с помощью приложения Expo , Он не только имеет живые обновления, но и позволит вам видеть журналы консоли в вашем терминале, как при разработке для Интернета. , а не использовать браузер, как мы это делали ранее с React Native.

Вы, конечно, должны будете создать новый проект с этим образцом ... но если вам нужно перенести файлы поверх, это не должно быть проблемой. Дать ему шанс.

Изменить: На самом деле это даже не требует камеры. Я сказал, что для сканирования QR-кода, но вы также можете напечатать что-то для синхронизации с вашим сервером, а не только QR-код.

Существует два варианта отладки или получения вывода вашего собственного собственного приложения при использовании

Эмулятор или реальное устройство

Для первого использования эмулятора: используйте

реактивный лог-андроид или реактивный лог-иос

чтобы получить вывод журнала

на реальном устройстве. встряхните ваше устройство

поэтому откроется меню, в котором вы выбираете удаленную отладку, и откроется этот экран в вашем браузере. так что вы можете увидеть свой вывод журнала на вкладке консоли.

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

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

Он поддерживает другую функцию отладки, такую ​​же как элемент в инструментах разработчика Chrome, которая помогает увидеть стили, предоставленные для любого компонента.

Последняя полная поддержка инструментов редукционного разработчика

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

В Android:

• написать эту команду: React-родной лог-андроид

В IOS:

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

Вы можете использовать удаленную опцию js debugly со своего устройства или вы можете просто использовать реактивный лог-андроид и реактивный лог-лог для ios.

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

Вы можете сделать это в 2 метода

1> с помощью предупреждения

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

2> С помощью Alert. Это не хорошо каждый раз, когда он достигает предупреждения, тогда каждый раз будет открываться pop, поэтому, если делать зацикливание означает, что не желательно использовать это

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. или вы можете выбрать опцию удаленной отладки и просмотреть логи в инструментах chrome dev или в vscode или любом другом редакторе, который поддерживает отладку, вы должны быть осторожны, так как это замедлит процесс в целом.
2. Ты можешь использовать console.warn но тогда ваш мобильный экран будет заполнен теми странными желтыми квадратами, которые могут или не могут быть осуществимы в зависимости от вашей ситуации.
3. Самый эффективный метод, с которым я столкнулся, - это использование стороннего инструмента Reactotron . Простой и удобный в настройке инструмент, позволяющий просматривать каждый оператор ведения журнала разных уровней (ошибка, отладка, предупреждение и т. Д.). Он предоставляет вам инструмент с графическим интерфейсом, который показывает все журналы вашего приложения без снижения производительности.

Вы используете то же самое, что используется для обычной сети. Команда consoleтакже работает в этом случае. Например, вы можете использовать console.log(), console.warn(), и console.clear()т.д.

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

console.log() это лучший и простой способ увидеть ваш лог на консоли, когда вы используете удаленный отладчик js из меню разработчика

Chrome Devtool - лучший и самый простой способ регистрации и отладки.

Если вы используете osx и используете эмулятор, вы можете просмотреть свои документы console.logпрямо в веб-инспекторе Safari .

Safari => Разработка => Симулятор - [ваша версия симулятора здесь] => JSContext

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

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

   и отладка JS удаленно является лучшим вариантом.

2. Другой случай - это проблемы, связанные с пользовательским интерфейсом и стилями, где мы должны проверить стилизацию компонента, в этом случае оптимальным вариантом является response-dev-tools.

   оба метода упоминаются здесь.

console.log можно использовать для любого проекта JS. Если вы запускаете приложение в localhost, то, очевидно, оно похоже на любой проект javascript. Но при использовании симулятора или любого устройства подключите этот симулятор к нашему локальному хосту, и мы увидим в консоли.