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


Respuestas:


325

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


47
¿Y cómo imprimir el registro de la consola en Android usando atom para React Native?
arenoso

3
@sandy Ver esta respuesta . No es específicamente para Atom, pero se puede usar en desarrollo que no sea XCode (también conocido como no macOS)
alexdriedger

21
Tenga en cuenta que a partir de React Native 0.29 y posterior, puede obtener registros sin ejecutar el depurador. Simplemente ejecute react-native log-ios o react-native log-android en la línea de comandos dentro de la carpeta de su proyecto.
Martin Konicek

1
Y cuando abre la depuración JS remota, debe presionar la opción + comando + i y verificar la consola. Información totalmente necesaria que faltaba y me confundió.
sudo

1
solo recuerde que console.log en la versión de producción de su aplicación puede bloquear su aplicación en ios. así que asegúrese de verificar si el entorno es de desarrollo, puede saberlo por la variable global DEV en react native.
Yash Ojha

347

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

2
Esto es muy útil ya que iniciar el depurador hace que las animaciones sean muy lentas.
jcollum

13
Esto no está funcionando. Recibo este mensaje cuando ejecuto react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Notice>: El servicio solo se ejecutó durante 0 segundos. Empujando reaparecer por 10 segundos.
rptwsthi el

@rptwsthi Tengo el mismo problema. ¿Pudiste resolver esto?
Ben

2
@Denis Kniazhev No creo que haya una opción para registrar solo errores, pero puede filtrar la salida. Si estás en Mac o Linux: react-native log-android | grep "mi filtro de errores".
Martin Konicek

1
console.warn me ayudó a verificar ciertas preocupaciones.
Madhavi Jayasinghe

39

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.


3
+1 para esta opción simple. Terminé usando un comando ligeramente variante (después de leer The Fine Manual) para obtener tiempos también:adb logcat -v time -s ReactNativeJS
spechter

Mantener la pestaña de depuración en segundo plano produce un retraso. La solución es mantener la pestaña en primer plano o abrirla en una nueva ventana.
Sabbir el

He estado usando React Native Debugger durante meses y es la mejor opción para evitar el retraso que Sabbir dijo: github.com/jhen0409/react-native-debugger
Fran Verona

36

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

2
alguna forma de filtrar solo desde console.log?

No me funciona, solo veo mensajes de registro genéricos React Native, como Initializing React Xplat Bridge..
Philipp Ludwig el

21

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

ingrese la descripción de la imagen aquí

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


66
¿Puede elaborar más sobre cómo VS Code puede recibir resultados de depuración de react-native? ¡Gracias!
mike123

Seleccione 'Debug JS' desde su aplicación en el dispositivo, y 'Toggle debug console (shift-command-y)' desde su menú de visualización en VS Code. Sin embargo, necesita github.com/Microsoft/vscode-react-native .
goodhyun

19

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


2
Esto puede ralentizar el rendimiento de la aplicación durante el desarrollo.
Andrien Pecson el

17

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

6

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!


Estoy usando esto en lugar del predeterminado startEsto abrirá Debugger como tu depurador predeterminado en lugar de Chrome y la -gbandera evitará que se centre en las recargas. "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"
escamoso

3

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!).



3

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

Todo aparece en ADB excepto las declaraciones console.logy console.warn.
Andrew Koster

Sí @AndrewKoster Estoy de acuerdo con usted, podemos ver todos los registros con ADB, pero esto le proporciona registros del dispositivo aquí, la consulta está relacionada con el registro de un desarrollo web. ADB le proporciona registros de dispositivos y también puede controlar y verificar las configuraciones de los dispositivos. Puede recopilar información desde el siguiente enlace de comandos ADB que puede ayudarlo durante el desarrollo. androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744

2

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

2

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.


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


2

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.ingrese la descripción de la imagen aquí


2

ingrese la descripción de la imagen aquí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


2
  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

1

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.


1

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.


1

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

1

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.


1

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



1

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.

1

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.


0

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


0

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


0

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


0

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


0

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.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.