¿Cómo iniciar sesión en React Native?

¿Cómo puedo registrar una variable en React Native, como usar console.logal desarrollar para web?

console.log trabajos.

Por defecto en iOS, se registra en el panel de depuración dentro de Xcode.

Desde el simulador IOS, presione ( ⌘+ D) y presione Remote JS Debugging . Esto abrirá un recurso, http: // localhost: 8081 / debugger-ui en localhost. Desde allí, use la consola de JavaScript de las herramientas de desarrollador de Chrome para verconsole.log

Uso console.log, console.warnetc.

A partir de React Native 0.29, simplemente puede ejecutar lo siguiente para ver los registros en la consola:

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

Pre React Native 0.29, ejecute esto en la consola:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, ejecute:

react-native log-ios

o

react-native log-android

Como Martin dijo en otra respuesta.

Esto muestra todo console.log (), errores, notas, etc. y provoca una ralentización cero.

Utilizar console.debug("text");

Verá los registros dentro de la terminal.

Pasos:

• Ejecuta la aplicación:

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

• Ejecute el registrador:

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

Visual Studio Code tiene una consola de depuración decente que puede mostrar su console.log.

VS Code es, en la mayoría de los casos, React Friendly friendly.

Aquí es donde Chrome Developer Tools es tu amigo.

Los siguientes pasos deberían llevarlo a las Herramientas para desarrolladores de Chrome, donde podrá ver sus console.logdeclaraciones.

Pasos

1. Instala Google Chrome , si aún no lo has hecho
2. Ejecute la aplicación usando react-native run-androidoreact-native run-ios
3. Abrir menú de desarrollador
   • Mac: ⌘+D para iOS o ⌘Mpara Android iOS
   • Windows / Linux: Agite el teléfono Android
4. Seleccione Debug JS Remotely
5. Esto debería iniciar el depurador en Chrome
6. En Chrome: Tools -> More Tools -> Developer Optionsy asegúrese de estar en la consolepestaña

Ahora, cada vez console.logque se ejecuta una declaración, debería aparecer en Chrome Dev Tools. La documentación oficial está aquí .

Hay 3 métodos que utilizo para depurar cuando desarrollo aplicaciones React Native:

1. console.log(): muestra en la consola
2. console.warn(): se muestra en el recuadro amarillo de la parte inferior de la aplicación
3. alert(): se muestra como un aviso al igual que en la web

Prefiero recomendarles que usen React Native Debugger. Puede descargarlo e instalarlo utilizando este comando.

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

o

Solo revise el siguiente enlace.

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

Happy Hacking!

Tuve el mismo problema: los mensajes de la consola no aparecían en el área de depuración de XCode. En mi aplicación hice cmd-d para abrir el menú de depuración, y recordé que había activado "Depurar en Safari".

Apagué esto, y algunos mensajes se imprimieron en el mensaje de salida, pero no los mensajes de mi consola. Sin embargo, uno de los mensajes de registro decía:

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

Esto se debió a que anteriormente había incluido mi proyecto para probar en un dispositivo real con el comando:

react-native bundle --minify

Esto incluido sin "dev-mode" en. Para permitir mensajes de desarrollo, incluya el indicador --dev:

react-native bundle --dev

¡Y los mensajes de console.log están de vuelta! Si no está empaquetando para un dispositivo real, no se olvide de volver a punto jsCodeLocationde AppDelegate.ma localhost (lo hice!).

Presione [comando + control + Z] en Xcode Simulator, elija Depurar JS de forma remota, luego presione [comando + opción + J] para abrir las herramientas de desarrollador de Chrome.

Xcode Simulator Img

consulte ：Depuración de React Native Apps

Es muy simple obtener registros en React-Native

Use console.log y console.warn

console.log('character', parameter)

console.warn('character', parameter)

Este registro se puede ver en la consola del navegador. Si desea verificar el registro del dispositivo o decir el registro de APK de producción, puede usar

adb logcat

adb -d logcat

El módulo react-native-xlog que puede ayudarlo es el Xlog de WeChat para react-native. Eso puede salir en la consola Xcode y el archivo de registro, los archivos de registro del Producto pueden ayudarlo a depurar.

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

Registro de tiempo de desarrollo

Para el registro del tiempo de desarrollo, puede usar console.log () . Una cosa importante, si desea deshabilitar el inicio de sesión en el modo de producción, luego en el archivo Root Js de la aplicación, simplemente asigne una función en blanco como esta: console.log = {} Deshabilitará la publicación completa de registros en toda la aplicación, lo que realmente se requiere en la producción modo como console.log consume tiempo.

Registro de tiempo de ejecución

En el modo de producción, también es necesario ver los registros cuando los usuarios reales usan su aplicación en tiempo real. Esto ayuda a comprender errores, uso y casos no deseados. Hay muchas herramientas de pago de terceros disponibles en el mercado para esto. Uno de ellos que he usado es por Logentries.

Lo bueno es que Logentries también tiene React Native Module . Por lo tanto, le llevará mucho menos tiempo habilitar el registro de tiempo de ejecución con su aplicación móvil.

Algo que salió hace aproximadamente un mes es "Create React Native App", una increíble plantilla que te permite (con un mínimo esfuerzo) mostrar cómo se ve tu aplicación en vivo en tu dispositivo móvil (CUALQUIERA con una cámara) usando la aplicación Expo . No solo tiene actualizaciones en vivo, sino que le permitirá ver los registros de la consola en su terminal al igual que cuando se desarrolla para la web , en lugar de tener que usar el navegador como lo hicimos con React Native antes.

Por supuesto, tendría que hacer un nuevo proyecto con esa plantilla repetitiva ... pero si necesita migrar sus archivos, eso no debería ser un problema. Dale un tiro.

Editar: en realidad, ni siquiera requiere una cámara. Lo dije para escanear un código QR, pero también puede escribir algo para sincronizarlo con su servidor, no solo un código QR.

Hay dos opciones para depurar u obtener la salida de su aplicación nativa de reacción al usar

Emulador o dispositivo real

Para el primer uso del emulador: use

react-native log-android o react-native log-ios

para obtener la salida del registro

en dispositivo real. agite su dispositivo

entonces el menú vendrá desde donde selecciona la depuración remota y abrirá esta pantalla en su navegador. para que pueda ver la salida de su registro en la pestaña de la consola.

Utilice el depurador nativo react para el registro y la tienda redux https://github.com/jhen0409/react-native-debugg

Simplemente descárguelo y ejecútelo como software, luego habilite el modo de depuración desde el simulador.

Es compatible con otras funciones de depuración, como el elemento en las herramientas de desarrollador de Chrome, lo que ayuda a ver el estilo proporcionado a cualquier componente.

Último soporte completo para herramientas de desarrollo redux

1. Pon console.log("My log text")tu código
2. ve a tus herramientas de línea de comandos
3. posicionarse en su carpeta de desarrollo

En Android:

• escribe este comando: React-native log-android

En iOS:

• escribe este comando: React-native log-ios

Puede usar la opción de depuración js remota desde su dispositivo o simplemente puede usar react-native log-android y react-native log-ios para ios.

console.log () es la manera fácil de depurar su código, pero debe usarse con la función de flecha o bind () mientras se muestra cualquier estado. Puede encontrar el enlace útil.

Puedes hacer esto en 2 métodos

1> mediante el uso de advertir

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

2> Al usar la alerta Esto no es bueno cada vez que llega a la alerta, entonces cada vez que se abra la ventana emergente, por lo que si hacer bucles significa que no es preferible usar esto

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

Usuarios con Windows y Android Studio:

Lo encontrarás en Logcat en Android Studio. Hay muchos mensajes de registro que aparecen aquí, por lo que puede ser más fácil para usted crear un filtro para "ReactNativeJS" que solo mostrará los mensajes de console.log que se crean dentro de su aplicación nativa de reacción.

Todos los desarrolladores que enfrentan este problema de depuración con el nativo de reacción, incluso yo también lo hice y me refiero a esto, y la solución es suficiente para mí en el nivel inicial, cubre algunas formas que nos ayudan a intentar usar lo que sea cómodo para nosotros.

1. Depuración con console.log
2. Código de depuración (lógica) con Nuclide
3. Código de depuración (lógica) con Chrome
4. Use Xcode para depurar GUI

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

También puede usar Reactotron, le dará mucha más funcionalidad que solo el registro. https://github.com/infinitered/reactotron

Hay varias formas de lograr esto, las enumero e incluyo contras al usarlas también. Puedes usar:

1. console.logy vea las declaraciones de inicio de sesión, sin optar por la opción de depuración remota de las herramientas de desarrollo, Android Studio y Xcode. o puede optar por la opción de depuración remota y ver el registro en las herramientas de desarrollo de Chrome o vscode o cualquier otro editor que admita la depuración, debe tener cuidado ya que esto ralentizará el proceso en su conjunto.
2. Puedes usar console.warn pero la pantalla de su teléfono móvil se inundaría con esos extraños cuadros amarillos que podrían o no ser factibles según su situación.
3. El método más efectivo que encontré es usar una herramienta de terceros, Reactotron . Una herramienta simple y fácil de configurar que le permite ver cada declaración de registro de diferentes niveles (error, depuración, advertencia, etc.). Le proporciona la herramienta GUI que muestra todos los registros de su aplicación sin ralentizar el rendimiento.

Utiliza lo mismo que se usa para la web normal. El consolecomando también funciona en este caso. Por ejemplo, se puede utilizar console.log(), console.warn(), console.clear() etc.

Puede usar Chrome Developer para usar el consolecomando cuando inicie sesión mientras ejecuta su aplicación React Native.

console.log() es la mejor y más simple manera de ver su consola de inicio de sesión cuando usa el depurador js remoto desde su menú de desarrollador

Chrome Devtool es la mejor y más fácil forma de iniciar sesión y depurar.

Si está en osx y usa un emulador, puede ver su console.log directamente en el inspector web de safari.

Safari => Desarrollo => Simulador - [su versión del simulador aquí] => JSContext

Normalmente hay dos escenarios en los que necesitamos depurar.

1. Cuando nos enfrentamos a problemas relacionados con los datos y queremos verificar nuestros datos y depuración relacionados con los datos en ese caso console.log('data::',data)

   y depurar js de forma remota es la mejor opción.

2. Otro caso es la UI y los problemas relacionados con los estilos, donde necesitamos verificar el estilo del componente, en ese caso react-dev-tools es la mejor opción.

   Ambos métodos se mencionan aquí.

console.log se puede usar para cualquier proyecto JS. Si ejecuta la aplicación en localhost, entonces obviamente es similar a cualquier proyecto de JavaScript. Pero mientras usa el simulador o cualquier dispositivo, conecte ese simulador a nuestro host local y podemos verlo en la consola.