Solución de problemas de errores de Ionic

A continuación se muestra una breve descripción general sobre cómo comenzar a solucionar errores en sus proyectos Ionic.
Introducción
Hay dos tipos principales de errores que ocurren al desarrollar en Ionic:
Errores web
El primer tipo son errores que se pueden reproducir en el navegador y que no están relacionados con la funcionalidad nativa de la aplicación. Estos errores de tecnología web se pueden solucionar como cualquier otro error en el desarrollo web: en el navegador, utilizando las herramientas de desarrollo del navegador. Esta es una gran ventaja del desarrollo móvil híbrido.
Insectos nativos
El otro tipo de error son los que solo aparecen en dispositivos Android o iOS. En este artículo se documentan los pasos para configurar las herramientas para desarrolladores y poder empezar a solucionarlos.
Nota sobre errores de compilación
Para que el alcance de este artículo sea breve, no abordaremos los errores de compilación ni de compilación. Un truco rápido que puedes probar es la reparación iónica, que elimina y vuelve a crear las dependencias de tu aplicación.
$ ionic repair
Pasos para depurar su aplicación Ionic
Paso 1: ¿El error se puede reproducir en iOS y Android?
Si se trata de iOS y Android, prefiero corregir el error en Android primero y confirmar que se haya solucionado en iOS después. De esta manera, puedo usar las herramientas para desarrolladores de Chrome para diagnosticar el error. Si solo se trata de iOS, salta al paso 4.
Paso 2: Cómo hacer que las herramientas de desarrollo remoto de Chrome funcionen en tu dispositivo.
Habilite el modo de desarrollador en su dispositivo Android:
- Vaya a configuración → acerca del teléfono.
- Busca el número de compilación y presiónalo 7 veces. Verás un mensaje que cuenta las últimas veces y luego te felicita por ser desarrollador. (¡Gracias, teléfono!)
- Ahora regresa a configuración, luego a preferencias del sistema.
- En la pantalla del sistema, presione el botónOpciones avanzadasagacharse.
- Seleccione Opciones de desarrollador.
- Desplácese hacia abajo bajo el encabezado de depuración y active la depuración USB.
- Ahora, suponiendo que el dispositivo esté conectado a la computadora, después de unos segundos aparecerá una ventana emergente que le preguntará si confía en esta máquina. Marque la casilla de verificación Permitir siempre y luego haga clic en Aceptar.
- Ahora, con la aplicación Ionic abierta en el dispositivo, abre las herramientas de desarrollo de Chrome en cualquier sitio. Selecciona las herramientas remotas como se ve en la captura de pantalla a continuación.
Luego seleccione su dispositivo de la lista de herramientas remotas.
Paso 4: Ahora que Chrome DevTools está abierto
Puedes ver los errores de consola que hayan aparecido. También puedes actualizar la aplicación en las herramientas de desarrollo de Chrome para cargarla nuevamente y ver los elementos que no detectaste mientras se cargaba. Ahora deberías ver un mensaje de error en tu consola y podrás depurar este error con las herramientas de desarrollo de Chrome.
Paso 5: depuración de iOS
Si el error solo ocurre en dispositivos iOS, debes habilitar las herramientas para desarrolladores en Safari en tu Mac y en tu teléfono:
- Abre Safari en tu Mac.
- Vaya al menú Safari y luego a preferencias.
- Vaya a la configuración avanzada en el ícono de engranaje.
- En la parte inferior, marca la casilla que dice “mostrar el menú del desarrollador en la barra de menú”.
- Ahora, con la aplicación abierta en su dispositivo iOS y con el dispositivo conectado a su Mac, haga clic en el menú desplegable Desarrollar en Safari.
- Seleccione su dispositivo en el menú Desarrollar y luego seleccione el host local.
- Las herramientas para desarrolladores de Safari deberían abrirse en una nueva ventana y podrás inspeccionar y depurar tu aplicación. También puedes actualizar la aplicación para detectar errores que se produzcan durante la carga.
Bono: conseguir que las herramientas para desarrolladores de Safari reconozcan tu dispositivo puede ser complicado. Prueba a desconectar y volver a conectar el dispositivo a la Mac. Si eso no funciona, puedes descargar Safari Technology Preview y repetir los pasos anteriores para habilitar las herramientas para desarrolladores.
Deja una respuesta