Herramientas de desarrollo para React Native

Conoce qué herramientas se pueden utilizar con React Native, tanto propias como de terceros, para optimizar el flujo de trabajo y encontrar posibles errores.

Warning

Vamos a comenzar con una aplicación de ejemplo, la cual tenemos inicializada con React Native CLI y sin realizar ningún cambio ni modificación previa.

Todo el que haya utilizado React Native habrá visto el típico aviso de warning que aparece en la parte inferior de nuestro terminal con el fondo naranja, que es un aviso sobre algo incorrecto, y que se puede desplegar y ver más información.

O una pantalla roja que ocupa toda la pantalla, y es un error aún más grave, por el cual la aplicación no puede continuar y nos está mostrando qué es lo que ha pasado.

Estos avisos también los podemos forzar si nos interesa, para mostrar nuestros propios mensajes o información adicional.

Vamos a provocar varios errores al crear el componente, utilizando el método componentDidMount, y para mostrar un mensaje de warning lo vamos a hacer a través del objeto console.warn, y vamos a escribir el mensaje “Warning de ejemplo”. Guardamos los cambios y refrescamos la aplicación y vemos como nos aparece ya este mensaje.

Podemos abrir este mensaje de warning y se despliega el stack trace, que podemos minimizarlo o cerrarlo, al igual que cualquier otro warning de React Native.

Error

Vamos ahora a probar con un mensaje de error. Para ello utilizamos el objeto console.error e introducimos el mensaje “Error de ejemplo”. Guardamos los cambios y refrescamos y se muestra directamente el mensaje de error y el stack trace, que también podemos ignorar o hacer que se actualice.

Log

Si queremos hacer que se guarde el log, tenemos que utilizar el objeto console.log, con el mensaje “Log de ejemplo”.

Si actualizamos podemos ver que no ocurre nada, la pantalla del emulador no cambia. Para verlo, tenemos que entrar en el panel de desarrollador, y activar la opción “Debug JS Remotely”.

Esto nos va a abrir una pestaña en nuestro navegador, en la cual es recomendable activar la opción “Mantain Priority”, para evitar que se desconecte de nuestra aplicación.

Si entramos a inspeccionar esta página con el inspector del navegador, en la pestaña Console podemos ver como tenemos nuestro log de ejemplo. De esta manera hemos conectado a la consola de Chrome con nuestro entorno de trabajo de nuestros dispositivos.

Esto funciona tanto en iOS como en Android, y podemos mostrar así cualquier mensaje de log.

Con la consola de desarrollador también podemos hacer debug de nuestras aplicaciones. Desde la pestaña Source y accediendo a debuggerWorker.js, vamos a tener nuestros ficheros en la carpeta de nuestro proyecto.

En el archivo App.js, dentro del que tenemos el console.log que habíamos creado, y en el que podemos añadir un breakpoint.

Cuando actualizamos podemos ver en el simulador que la aplicación se detiene en ese punto. La aplicación aún no ha terminado, y en este momento podemos analizar qué valor tienen las variables, ejecutar algo en línea de comandos y se ejecutaría en el terminal.

Una vez que hayamos acabado pulsamos en continuar y la aplicación se reanudaría al igual que lo haría tras un breakpoint normal en JavaScript.

Logs de la parte nativa

¿Qué pasa si el fallo que no está sucediendo ocurre en la parte nativa de Android e iOS? ¿Cómo podemos acceder a ese log de mensajes? Porque ese log no va a estar conectado con el log de Chrome en la consola.

Para ello, si nos vamos a la línea de comandos podemos ver esos logs simplemente con este comando:

react-native log-android

Así nos vamos a conectar con el log de Android, dónde vamos a ver cualquier cosa que esté ocurriendo en la aplicación. Si hubiese algún error algún o algún fallo, aparecería aquí por pantalla.

De la misma forma podemos hacer lo mismo para conectarnos a los logs de nuestro terminal iOS:

react-native log-ios

De esta manera, si tuviéramos que probar algo de nuestro código nativo podríamos ver que está pasando, un mensaje de error o cualquier evento.

React DevTools

Además de todo esto, podemos utilizar los React DevTools de Chrome, que nos permiten analizar qué está pasando en nuestros componentes React y demás.

No lo podemos hacer directamente desde los DevTools que tenemos en Chrome, pero lo podemos instalar por separado. Para ello, desde la consola vamos a ejecutar la siguiente línea:

npm install -g react-devtools

De esta forma lo instalamos de manera la global y lo podemos reutilizar en varias aplicaciones.

Una vez que finalice la instalación, vamos a iniciar las DevTools como standalone, así lo tendremos ejecutándose al mismo tiempo que tenemos el resto de nuestros elementos. Para ejecutarlo lo hacemos de esta forma:

react-devtools 

Se nos abre una ventana, como podemos ver en la imagen:

Esta ventana está esperando a conectarse a alguno de los nuestros elementos. Cuando refrescamos vemos que se conecta y que nos muestra las propiedades de nuestros componentes y qué estado tienen.

También podemos ver el JSX, con nuestra aplicación dentro del mismo.

Podemos incluso copiar elementos, ver otros códigos fuente, información de estilos como márgenes y demás. Podemos incluso cambiar ciertas cosas de esas propiedades o de estas fuente, y van a cambiar de forma automática.

Esto nos va a permitir probar de una manera más cómoda y más rápida cuando queramos hacer pequeños ajustes de tamaño o de color sin tener que ir continuamente de un lado de un lado a otro, o podrá encontrar cómo están formados nuestros componentes.