¡Las mejores herramientas y prácticas para depurar aplicaciones nativas de React!

La depuración es una de las actividades cruciales durante el desarrollo de software. Se refiere al proceso de identificar un error en una aplicación de software que causa problemas de rendimiento, luego analizar el problema y finalmente resolverlo. La depuración le permite validar su código y solucionar problemas antes de llevar una aplicación de software a la etapa de producción. Sin embargo, es probable que surjan problemas de depuración durante varias fases: desarrollo, prueba e incluso producción/postimplementación. Además, la implementación de las herramientas y metodologías de depuración adecuadas acelerará el desarrollo y mejorará la eficiencia del producto final.

Llegando a la depuración de React Native; el marco se compone de diferentes entornos, siendo los más destacados Android e iOS. Como resultado, se vuelve un desafío depurar aplicaciones debido a las múltiples plataformas involucradas. Además, React Native ofrece una gran variedad de herramientas para la depuración, lo que parece confuso para muchos, especialmente para los novatos. Esta publicación lo guía a través de algunas prácticas efectivas y útiles herramientas de depuración de React Native y React que lo ayudarán a identificar problemas y solucionarlos como un experto.

Metodologías y mejores prácticas de depuración de React Native

Identificación y tratamiento de errores, advertencias y registros de la consola

Los errores y advertencias de la consola son visibles en forma de notificaciones en pantalla con una insignia roja o amarilla.

errores

Los errores se mostrarán dentro de un RedBox con el comando console.error(). Este RedBox contiene una descripción del error y también una sugerencia sobre cómo resolver el error. Echale un vistazo a éste ejemplo. Si escribe una propiedad de estilo que el marco React Native no admite, o si escribe una propiedad destinada a ser utilizada para un elemento en particular (como una backroundImage debe configurarse para la Vista del elemento), entonces RedBox muestra un error junto con la lista de propiedades de estilo admitidas que se pueden aplicar a la Vista.

Advertencias

Las advertencias se mostrarán dentro de un YellowBox con el comando console.warn() Tales advertencias incluyen información sobre problemas relacionados con el rendimiento y código obsoleto. La mayoría de estas advertencias indican alguna mala práctica dentro de su código. Los ejemplos de advertencias incluyen una notificación sobre la presencia de un eventListener que no se elimina, la presencia de funciones y dependencias obsoletas, etc.

Registros

Para emitir registros, use el comando react-native log-android o use la consola de Chrome con el comando console.log(string str)

Los desarrolladores de React Native pueden ocultar las notificaciones sobre errores y advertencias con el comando LogBox.ignoreAllLogs() cuando sea necesario, como durante las demostraciones de productos. También puede ocultar las notificaciones por registro con el comando LogBox.ignoreLogs(). Este método funciona en escenarios en los que una advertencia ruidosa no se puede resolver como las de una dependencia de terceros. Pero, cada vez que ignore los registros, asegúrese de crear una tarea para corregir esos registros ignorados más adelante.

Depuración con el modo de depuración integrado de React Native

Vea cómo utilizar el modo de depuración incorporado que ofrece el ecosistema React Native que emplea navegadores como Safari o Chrome.

Depuración con Chrome

Instale estas herramientas de desarrollo de reacción para admitir React Native: Yarn y NPM. Luego use el modo de desarrollo para abrir el menú de desarrollador en la aplicación; aquí se inicia el proceso de depuración activando la opción de depuración.

En el Menú del desarrollador, seleccione la opción Depurar JS de forma remota. Esta acción abre un canal a un depurador JS. Se abre una nueva pestaña; aquí, desde el menú de Chrome, seleccione Herramientas – Herramientas para desarrolladores; para abrir las devtools.

Las otras opciones más destacadas para utilizar en el menú de desarrollador de la aplicación para depurar aplicaciones son:

Enable Live Reload: para recargar automáticamente la aplicación, Enable Hot Reloading: para identificar las modificaciones que dan como resultado un archivo modificado, y Start Systrace inicia la herramienta de creación de perfiles basada en marcadores de Android. La opción Toggle Inspector ayuda a alternar una interfaz de inspector. De esta forma, los desarrolladores pueden inspeccionar los elementos de la interfaz de usuario presentes en la pantalla y examinar sus propiedades. Luego se presenta una interfaz; esta interfaz contiene otras pestañas, como redes para mostrar las llamadas HTTP, así como una pestaña relacionada con el rendimiento. La opción Mostrar monitor de rendimiento realiza un seguimiento del rendimiento de su aplicación.

Depuración con Safari

La versión de iOS de su aplicación se puede depurar usando Safari, y aquí, no tiene que habilitar "Depurar JS de forma remota". Simplemente abra Preferencias y luego seleccione las siguientes opciones:

• preferencias
• Avanzado
• Mostrar el menú Desarrollar en la barra de menú

A continuación, elija el JSContext de su aplicación:

Desarrollar – Simulador – JSContext

Ahora, el inspector web de Safari se abrirá y podrá ver un depurador y una consola. Y, cada vez que vuelva a cargar la aplicación, ya sea manualmente o mediante la actualización rápida (recarga en vivo), se creará un nuevo JSContext. Recuerde seleccionar la opción Mostrar automáticamente inspectores web para JSContexts; de lo contrario, el último JSContext se seleccionará manualmente.

Destacadas herramientas de depuración de React/React Native

Herramientas de desarrollo de React

Este conjunto de herramientas de React se emplea para depurar la jerarquía de componentes de React y funciona bien para las operaciones de front-end. Con este conjunto de herramientas, puede ver lo que hay en lo profundo de su árbol de componentes: seleccione el estado de las opciones del componente y edite las propiedades actuales.

React Developer Tools es la extensión de los navegadores Firefox y Chrome. Sin embargo, para depurar aplicaciones creadas en React Native, debe usar una versión autónoma de React DevTools y ejecutar este comando en su terminal: npm install –g react-devtools. Luego inicie la aplicación ejecutando el comando react-devtools; seleccione la opción Mostrar Inspector en el menú del desarrollador de la aplicación para examinar los elementos de la interfaz de usuario de la aplicación.

Si se usa Redux, entonces debe usar React DevTools junto con ReduxDev Tools para comprender completamente el estado de su componente. Para esto, Redux DevTools debe instalarse por separado y aquí, la herramienta React Native Debugger también resulta bastante útil.

Reaccionar depurador nativo

El depurador React Native es inmensamente beneficioso si se usa Redux durante el desarrollo de la aplicación React Native. Esta es una herramienta independiente que funciona en Linux, Windows y macOS. Esta herramienta se utiliza para registrar o eliminar contenido de almacenamiento asíncrono, detectar y diagnosticar problemas de rendimiento y examinar las solicitudes de red.

La mejor parte es que integra React DevTools y Redux DevTools en una sola aplicación, por lo que no es necesario usar dos aplicaciones separadas para depurar aplicaciones para los entornos React y Redux. La herramienta ofrece interfaces donde puede examinar y depurar elementos de React y también ver registros de Redux y las acciones relacionadas.

El depurador de React Native eclipsa a Chrome DevTools al emplear el inspector de alternancia para inspeccionar elementos de React Native. Además, el depurador React Native proporciona la funcionalidad para editar estilos; esta característica no está presente en Chrome DevTools.

Aleta

Flipper es una herramienta multiplataforma que se utiliza para depurar aplicaciones de JavaScript, así como los registros del dispositivo y JS. Lanza simuladores para administrar dispositivos, puede conectarse con varios dispositivos simultáneamente para depurar aplicaciones en múltiples plataformas e implica un proceso de depuración de un solo paso que incluye puntos de observación y puntos de interrupción.

Flipper edita los componentes sobre la marcha, luego refleja esas ediciones en tiempo real dentro de la aplicación y se integra con el Inspector de diseño de la aplicación. Su capacidad de gestión de lanzamiento integrada permite a los desarrolladores definir configuraciones y emplearlas para pruebas unitarias, sin tener que replicar configuraciones en varios lugares. Además, viene con una arquitectura basada en complementos y una miríada de funciones útiles; Se esperan más funciones en los próximos años.

Con Flipper, puede ver, inspeccionar y controlar sus aplicaciones mediante una sencilla interfaz de escritorio. Flipper se puede usar tal cual o se puede ampliar empleando la API del complemento.

¡Consulte este blog para obtener más información sobre otras herramientas importantes para depurar aplicaciones React Native!

Línea de fondo

Las herramientas y metodologías mencionadas anteriormente le permiten depurar aplicaciones de manera más eficiente y perfecta, como un profesional. Estas herramientas y prácticas recomendadas hacen maravillas para acelerar el desarrollo, mejorar la productividad de los desarrolladores y mejorar el rendimiento del producto final.

¿Le gustaría formar un equipo con desarrolladores de aplicaciones calificados que comprendan el funcionamiento de sus aplicaciones React Native, identifiquen problemas de inmediato y corrijan errores al instante? En caso afirmativo, vale la pena probar Biz4Solutions, una distinguida empresa de desarrollo de software de subcontratación. Nos especializamos en ofrecer servicios de desarrollo React Native competentes y nos encargamos de todo el ciclo de vida del producto, desde la ideación de la aplicación hasta el mantenimiento posterior a la implementación.

Para obtener más información sobre nuestras otras tecnologías principales, consulte los siguientes enlaces:

Desarrollo de aplicaciones rápidas
Desarrollo de aplicaciones .Net
Desarrollo de aplicaciones Java