Trucos – SAPUI5 – Debug y análisis de la aplicación en ejecución
Introducción
Esta vez el titulo casi es mas largo que el post. Y es que hoy os traigo un truco para activar el sistema de anàlisis de aplicaciones en SAPUI5 una vez hemos accedido a la aplicación. Esto nos darà mucha información extra y nos permitirá añadir breakpoints directamente a los controladores sin tener que buscar el código en consola.
Si más, vamos a ver estos trucos.
Verificar la version delas librerías de SAPUI5 y Asistente de soporte
El primer truco nos permite saber de manera rápida la version de librerías de SAPUI5. Esto, que puede parecer un tema menor, nos permite saber que componentes podemos utilizar o si estos estan descatalogados.
Para acceder a esta información pulsaremos las siguientes teclas:
Ctrl + Alt + Shift + P
Acto seguido nos aparecerá la información de las librerías.
Lo siguiente que podemos hacer es activar el asistente de soporte. El botón Azul que vemos, pero ojo, eso nos recargara la página.
En esta primera vista, podemos ver las reglas de validación que el asistente aplicará. Al seleccionar una de las reglas, en el panel derecho nos aparecerá información relacionada con esa regla y consejos en caso de error.
Para analizar pulsaremos el botón «Analyze»:
El resultado del análisis se muestra en 3 paneles.
- El panel de la derecha contiene todo el árbol de objetos de la página que estamos visualizando. Al pulsar sobre los elementos en amarillo, veremos en la aplicación como se marca en verde el componente seleccionado.
- El panel de la izquierda nos muestra los errores detectados para esos tags y los cataloga según su criticidad.
- El panel central nos muestra para cada elemento del panel de la izquierda una explicación del problema y algunas referencias a la documentación para solventar el error.
Recuerda que puedes minimizar los errores en tiempo de desarrollo utilizando eslint, te enseño mas detalles en esta entrada:
Herramienta de diagnostico
La herramienta de diagnostico de SAPUI5 nos facilita el anàlisis de nuestra aplicación cuando se esta ejecutando, para acceder como en el caso anterior utilizaremos la siguiente combinación de teclas:
CTRL + ALT + shift + S
Esto abrirá una nueva ventana en el navegador tipo popup, vamos a ver en detalle algunas de sus características
La primera opción que encontramos es «Technical Information» con la información de las librerías. Lo mas interesante de esta sección es la posibilidad de activar el modo debug.
Este modo puede ser pesado de cargar, sobre todo si accedemos des de un launchpad, por lo que mi recomendación es activarlo y desactivarlo estando en la aplicación que queremos visualizar. Al activar este modo, no cargaremos el component preload o las librerías comprimidas, sino que obtenemos todos los ficheros originales. Esto nos puede ayudar a ver el código y comentarios igual que lo vemos mientras desarrollamos.
La siguiente sección es «Control Tree». Esta sección os sonara del plugin de SAPUI5 para analizar la aplicación y sus bindings. Básicamente el plugin hace lo mismo pero sin tener que utlizar el plugin. Muy útil si por ejemplo utilizas explorer (edge) o firefox. Y por si no sabes de que plugin estoy hablando, aquí te dejo todo el detalle añade ui5 inspector a chrome acelerando el debug de sapui5
La siguiente sección es la de Debugging. Esta sección nos permite añadir breackpoints en los distintos métodos de un componente estándar a fin de entender su funcionamiento o encontrar un error en nuestra aplicación:
La última sección que voy a destacar es la de «Performance». Las otras secciones mes las he saltado ya que en condiciones normales no funcionan. Para poder ver su funcionamiento hay que deshabilitar la seguridad del navegador, algo muy poco recomendable, pero que si quieres probar puedes hacerlo abriendo chrome con el siguiente comando:
chrome.exe» —disable-web-security –user-data-dir=»C:/ChromeDevSession
Volvamos a la última sección, esta nos permite analizar la carga de los distintos componentes que utiliza la aplicación. Es tan fácil como pulsar el botón «Start recording» y empezar a jugar con la aplicación. Esto nos permitirá analizar que componente provoca mas lentitud a fin de cambiarlo o emprender mejoras de rendimiento sobre el.
Hasta aquí las herramientas ocultas de SAPUI5, este post es un resumen de la documentación estándar, si queréis ver todo el detalle podéis acceder a la guia oficial de SAPUI5
https://sapui5.hana.ondemand.com/#/topic/615d9e4aaa34447fbd4aa5f19dfde9b8
Como siempre suscribete, dale a la campanita de notificaciones y comparte en redes para estar a la última.
