Debuggeando aplicaciones React Native con VSCode

Photo by Hannah Wei on Unsplash

En este artículo explicaré como debuggear aplicaciones desarrolladas en React Native utilizando el debugger de VS Code creando una aplicación de ejemplo y debuggeándola.

Nuestro objetivo será comprobar los valores de una variable y el flujo de nuestra app utilizando el debugger y así evitando plagar de console.log nuestro código.

Empezamos creando un nuevo proyecto en react native:

create-react-native-app debugger-example

A continuación nos colocamos en el directorio del proyecto y abrimos VSCode:

cd debugger-example && code .

Instalando la extension React Native Tools

En el lateral izquierdo de VSCode, acudimos a la sección de extensiones e instalamos React Native Tools. Reiniciamos VSCode para que cargue la nueva extensión.

Modificando la app para realizar la prueba

Vamos a modificar el código de nuestra aplicación para realizar un seguimiento de una variable, y ver como cambia cuando pulsamos un botón.

En nuestro componente principal App.js, definiremos en el estado del componente una variable llamada texto.

state = {
  texto: ''
}

Reutilizaremos uno de los componentes Text para mostrar el vvalor que esta en el state. Además, importaremos el componente Button desde react-native y crearemos dos botones, uno asociado a la función saludar y otro a la función despedirse.

import { StyleSheet, Text, View, Button } from 'react-native';
....
   <Text>{this.state.texto}</Text>
   <Button onPress={this.saludar}> Saludar </Button>
   <Button onPress={this.despedirse}>Despedirse </Button>

Nos vendría quedando un componente final así:

A continuación, vamos a hacer un eject del proyecto para evitar abrir la aplicación con Expo.
npm run eject

Elegimos: React Native: I’d like a regular React Native Project

Cuando nos pregunte por el nombre de la app, pondremos uno cualquiera ya que el propósito es testear. En este caso pondremos debugger-example.

Ejecutamos el proyecto (en mi caso lo arrancaré en el simulador de ios) y veremos la app:

react-native run-ios

Configurando el debugger

Para configurar el debugger pulsamos en el icono del debugger en el lateral izquierdo de VSCode:

Pulsamos en el icono de configuración (rueda dentada) y seleccionamos React Native. La opción React Native debe aparecerte al tener instalada la extensión. En caso de que no te aparezca, crea un archivo vacío llamado launch.json en la raíz de tu proyecto y debería aparecerte ahora.

Esto nos generará un launch.json con la configuración para depurar nuestra aplicación en un dispositivo android, un dispositivo IOS, directamente con el packager y con expo. Estas opciones estarán disponibles ahora en el debug, al lado del icono play verde:

Nosotros seleccionaremos la opción Attach to packager.

Debuggeando

Ahora vamos a debuggear el código. Para ello debes tener arrancado el proyecto:

react-native run-ios

Si ya tienes el proyecto desplegado en el emulador pero paraste el packager, simplemente arráncalo con:

npm start

Y pulsa Reload JS en tu simulador (en las opciones de abajo):

Ahora vamos a poner un breakpoint en el código para hacer que la ejecución se detenga al retornar la vista. Para ello, pulsamos a la izquierda del marcador de linea y se deberá iluminar un circulo rojo indicando que hay un breakpoint.

Procedemos a arrancar el debugger pulsando play.

Verás que detecta nuestro breakpoint:

El debugger establecerá la conexión con el packager y quedará a la espera de que activemos la depuración en el simulador (cmd+control + z):

Una vez hecho esto, el debugger estará listo y funcionando. Veremos que la parte de abajo del VSCode se pone en color naranja y aparecen los controles en la parte superior:

Es posible que los breakpoint se te desactiven y se pongan en negro si recargas el packager:

Simplemente quitándolos y volviéndolos a poner se vuelven a activar. Para que funcionen y nuestro código se pare, deben estar en rojo y no en negro.

Al pulsar en uno de los botones y modificar el estado de nuestra aplicación, se re-renderizará nuestro componente y nuestro código se parará en el return.

Aquí podemos ver que he pulsado el botón saludar, y antes de que se actualice la vista el estado se ha actualizado. De esta forma sé que el valor que se va a mostrar es “Hola, ¿cómo estas?” (puedes verlo a la izquierda).

Para continuar la ejecución del código le damos a play de nuevo y veremos que se actualiza el texto en la vista. Ahora pulsaré el botón Despedirse y la ejecución del código volverá a pararse en el return.

Y vemos que efectivamente el próximo valor que se mostrará será “¡Nos vemos!”

Con esta guía de configuración e introducción a la depuración del código en react native, espero que te sea mas sencillo depurar tus aplicaciones.

Un saludo,