Depuración nativa de React

La depuración es muy importante para crear aplicaciones y eliminar errores. Un buen conocimiento de las técnicas de depuración permite un desarrollo de software más rápido y eficiente.

Aquí vamos a discutir algunas técnicas de depuración en React Native. Usaremos expo-cli para desarrollar, ejecutar y depurar nuestras aplicaciones, que es una de las formas más simples y rápidas de crear una aplicación React Native.

Las siguientes son las técnicas de depuración generalmente utilizadas en React Native:

1. Inicio sesión
2. Depuración en el navegador Chrome
3. Depuración en Visual Studio Code

Inicio sesión:
 

Es una técnica muy rápida y sencilla para depurar su aplicación en fase de desarrollo. Es una de las técnicas más sencillas para obtener una idea del funcionamiento de la aplicación. Para realizar el registro, simplemente usamos las instrucciones console.log() para registrar la información o los indicadores requeridos. Sin embargo, siempre debemos recordar eliminar estas declaraciones de console.log() antes de llevar nuestro producto a la fase de desarrollo, ya que estas declaraciones simplemente crearán una sobrecarga allí.

Ejemplo: 

import React from 'react';
import { StyleSheet, Text, View} from 'react-native';
import {useDimensions, useDeviceOrientation} from
        '@react-native-community/hooks';
 
export default function App() {
   
  console.log("App executed");
 
  return (
    <View style = {styles.container}>
      <Text>
        Hello World
      </Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Salida: Veremos la siguiente salida en la consola.

Depuración en el navegador Chrome:

Podemos habilitar la depuración remota en nuestra aplicación, lo que permitirá que el código React Native se ejecute en una pestaña del navegador Chrome, donde podemos depurarlo de manera similar a como depuramos aplicaciones web con las herramientas de desarrollo de Chrome.

Pasos involucrados:

Paso 1: Ejecute npm start en la terminal para ejecutar su aplicación.

Paso 2: una vez que su aplicación se haya compilado y se esté ejecutando. De acuerdo con el dispositivo que esté utilizando, use el comando apropiado:

• Dispositivo virtual Android: Presione cmd+M en Mac o ctrl+M en PC para abrir el menú de desarrollador.
• Simulador de IOS: presione cmd+D o ctrl+D y luego cmd+D para abrir el menú del desarrollador.
• Tu teléfono: agítalo para que aparezca el menú de desarrollador.

El desarrollador debería verse así.

Paso 3: Haga clic en Depurar JS remoto para habilitar la depuración remota. Esto abrirá una pestaña en el navegador Chrome que tendrá la URL http://localhost:19000/debugger-ui/

Paso 4: Ahora presiona ctrl+Shift+I para abrir las herramientas de desarrollo de Chrome. El panel de navegación se verá así:

Aquí, en la pestaña Consola, podemos ver los errores en nuestras aplicaciones, así como los registros creados por nuestra aplicación. En la pestaña Fuentes, debemos habilitar las excepciones capturadas para identificar la línea en la que ocurrió el error. Además, podemos ejecutar el código línea por línea y pasar a las funciones para obtener una vista más detallada de la ejecución del programa.

Una vez que hayamos terminado con nuestra sesión de depuración, debemos desactivar la depuración remota haciendo clic en la opción Detener depuración remota en las herramientas de desarrollo de su aplicación. Esto evitará que su aplicación sea lenta, ya que la depuración remota reduce significativamente la velocidad de la aplicación.

Depuración en Visual Studio Code:

Podemos usar React Native Tools , que es una extensión disponible en VS Code, y se usa para depurar aplicaciones React Native. Después de instalar la extensión, simplemente cree un nuevo archivo llamado Launch.json que se usa para depurar la creación del archivo de configuración. Por último, tenemos que habilitar Debug JS Remotely y habilitar Live Reload. Ahora podemos comenzar a depurar en VS Code.

Referencia: https://reactnative.dev/docs/debugging