馃 Manejo de errores en Ionic

Vamos a regresar a nuestra aplicaci贸n y la ejecutamos como normalmente ejecutamos una aplicaci贸n en Ionic.

$ ionic serve

馃嵖 驴Qu茅 son los errores en tiempo de ejecuci贸n?

Si bien TypeScript nos permite prevenir algunos de los posibles errores al introducir tipado, existen escenarios en los que los errores de todas formas se pueden presentar. A este tipo de errores le llamamos errores en tiempo de ejecuci贸n.

Una de las cosas que deseamos prevenir es que nuestra aplicaci贸n se cuelgue debido a un error, que es algo que pudiera suceder en tiempo de ejecuci贸n.

Si un error en tiempo de ejecuci贸n se presenta, la primera recomendaci贸n es revisar la consola del navegador. Si bien esta nos brinda algo de informaci贸n, para poder hacer depuraci贸n del c贸digo requerimos poder regresar de la versi贸n transpilada de JavaScript a su original en TypeScript.

馃嵖 驴C贸mo depurar aplicaciones Ionic con Google Chrome?

Primero antes que nada borramos el directorio build.

$ rm -rf build

Con el proyecto abierto abrimos la barra de developer de Google Chrome (Ctrl+Shift+I).

Vamos a la pesta帽a Sources y dentro de esta podremos ver en la parte derecha el proyecto en el cual estamos trabajando y su estructura de directorios.

Navegamos hasta el directorio src y aqu铆 podremos ver el archivo App.tsx que es con el cual hemos estado trabajando.

Ionic se encarga de generar todos los archivos de mapeo, de forma que el navegador pueda enlazar los archivos procesados por el navegador y los archivos originales antes de ser transpilados.

Ahora creamos un breakpoint dentro de la funcion calcularIMC.

Al dar click sobre el bot贸n calcular nos vamos a topar con que la ejecuci贸n del c贸digo se detiene sobre el breakpoint que hemos a帽adido. Ademas si posicionamos el cursor sobre diferentes variables como peso, podemos ver cual es el valor que tienen dichas variables en ese momento.

Es posible a帽adir m煤ltiples breakpoints a lo largo de toda la aplicaci贸n.

馃嵖 驴C贸mo explorar los componentes React mediante el Developer Tools de Google Chrome?

Cuando utilizamos el inspector de Google Chrome podemos ir viendo las etiquetas html anidadas. Estas son las que genera React a partir de JSX y convierte a HTML com煤n y corriente.

Si deseamos navegar esta estructura dentro de Chrome podemos hacer uso del React Developer Tools, que es una extensi贸n de Google Chrome que nos permite navegar a trav茅s de los componentes React.

Despu茅s de instalar la extensi贸n abre el Developer Tools y dirigete a la pesta帽a Components. Al entrar en esta pesta帽a podr谩s ver la estructura de componentes anidados de React, sus refs, props y estados.

馃嵖 驴C贸mo depurar aplicaciones Ionic en Android Studio?

Dentro de Android Studio los errores de una aplicaci贸n Ionic aparecen en la pesta帽a Run. Sin embargo depurar en este ambiente resulta tedioso ya que no podemos depender de estar recompilando el proyecto cada que un error aparece, por lo cual se recomienda corregir los errores en modo web (dentro de Google Chrome) antes de volver a recompilar.

Crear aplicaciones nativas con Capacitor Personalizar apariencia de los temas de Ionic
comments powered by Disqus