Arrancar la aplicación 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 función calcularIMC.
Al dar clic 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 dirígete 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.
