logging - react native console log

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

Question

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

Answer 1

1. Ponga console.log("My log text") en su 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

Answer 2

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 como cuando se desarrolla para la web , en lugar de tener que usar el navegador como lo hicimos antes con React Native.

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.

Answer 3

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 declaraciones de console.log .

Pasos

1. Instala Google Chrome , si aún no lo has hecho
2. Ejecute la aplicación usando react-native run-android o react-native run-ios
3. Abrir menú de desarrollador
   • Mac: ⌘+D para iOS o ⌘M para 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 Options y asegúrese de estar en la pestaña de la console

Ahora, siempre que se ejecute una instrucción console.log , debería aparecer en Chrome Dev Tools. La documentación oficial está here .

Answer 4

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

Answer 5

Es muy simple obtener registros en React-Native

Use console.log y console.warn

adb logcat
adb -d logcat

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

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

Answer 6

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

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

Answer 7

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á de donde selecciona la depuración remota y abrirá esta pantalla en su navegador. para que pueda ver su salida de registro en la pestaña de la consola

Answer 8

Lo tengo trabajando en Windows como ...

• Descargue React Native Debugger desde la página de release .
• Después de ejecutar la aplicación en el emulador, presione ctrl + m (en Windows), obtendrá una lista de opciones de las opciones de desarrollador, seleccione iniciar depuración desde allí. (todas las demás posturas de depuración deben cerrarse antes)

Answer 9

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í.

Answer 10

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 hace que la ralentización sea cero.

Answer 11

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.

github.com/jhen0409/react-native-debugger

Happy Hacking!

Answer 12

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

Answer 13

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.

Answer 14

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

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

Answer 15

Solo console.log (''depuración'');

Y ejecútelo, puede ver el registro en el indicador de terminal / cd.

Answer 16

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

Answer 17

Todos los desarrolladores que se enfrentan a este problema de depuración con el nativo de reacción, incluso yo me enfrenté también, 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

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

Answer 18

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 olvide volver a apuntar jsCodeLocation en AppDelegate.m a localhost (¡lo hice!).

Answer 19

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.

Answer 20

Utilice console.debug("text");

Verá los registros dentro de la terminal.

Pasos:

• Ejecute 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

Answer 21

Utilice console.log , console.warn , etc.

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

Answer 22

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.

Answer 23

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 link útil.

Answer 24

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.

Answer 25

react-native-xlog 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.

console.log(''character'', parameter)
console.warn(''character'', parameter)

Answer 26

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

Answer 27

console.log funciona.

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

Desde el simulador IOS, presione ( ⌘ + D ) y presione Depuración remota de JS . 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 ver

Answer 28

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 bucle significa que no es preferible usar

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

Answer 29

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.

Answer 30

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