Añade UI5 Inspector a Chrome, acelerando el debug de SAPUI5

Introducción

Herramientas que nos facilitan la vida a los desarrolladores UI5 en caso de errores

Cuantas veces nos ha pasado al programar un binding que los datos no se muestran correctamente. O ese elemento que teníamos puesto en un punto de la pantalla no lo encontramos. En la entrada de hoy veremos como depurar nuestra aplicación ui5.

Pero antes de entrar en materia, ¿Porqué nos puede interesar UI5 Inspector para chrome?

Este complemento de chrome nos permite verificar los distintos componentes que hemos añadido a nuestra aplicación creada en SAPUI5, así como validar su binding. También nos da información de la aplicación que extrae del metadata de una manera amigable.

---

Manos a la obra con este fantástico complemento:

Lo primero y esencial, necesitamos Google chrome.

Instalando el plugin:

La manera mas fácil de instalarlo es acceder directamente a la pagina de plugin:

https://chrome.google.com/webstore/detail/ui5-inspector/bebecogbafbighhaildooiibipcnbngo?hl=es

Una vez en la página, pulsamos el boto «Añadir a Chrome» y en el Pop-up pulsamos «Añadir extensión».

Ya tenemos nuestro pluguin integrado. No requiere ninguna configuración extra.

Funcionamiento y primeros pasos

Esta extensión se añade en las herramientas de desarrollo de Chrome. Al cargar una pagina HTML inyecta el script de anàlisi «detectUI5.js».

(Opcional) Es por esa razón que puede ser interesante cambiar la configuración por defecto de la extensión para que solo se cargue cuando lo necesitamos. Para ello seguiremos estos pasos

• Pulsamos sobre el complemento con el botón derecho en la barra de navegación del navegador. Y seleccionamos «Al hacer clic en la extensión»

De esta manera solo realizará la carga cuando necesitamos. Es decir, para usarlo, deberemos pulsar el icono.

Como acceder a la extensión para inspeccionar una aplicación UI5

Llegados aquí, solo nos queda ver lo fácil que es usar esta extensión. Accederemos des de la consola de desarrollo.

• Pulsamos «F12» y posteriormente vamos a la pestaña «UI5«.

Utilizando la extensión

Al acceder a la pestaña des de la consola de desarrollo podemos ver 2 pestañas. Una es el «Control inspector» que nos permite ver en formato XML nuestra aplicación UI5, La otra pestaña «Application information» nos informa de datos de la aplicación.

La verificación la haremos sobre la página de SAPUI5 SDK en vez de utilizar una webapp a medida para mostrar lo fácil que es de usar.

• Accedemos a la página de ejemplos de un componente lista:
  https://sapui5.hana.ondemand.com/#/entity/sap.m.List/sample/sap.m.sample.ListCounter
• Pulsamos el boton F12 para acceder a la extensión. (En caso de haber cambiado la configuración para que no se cargue siempre por defecto, pulsaremos el icono de extensión UI5 en la barra de dirección)
• Seguidamente, pulsamos sobre el componente de lista con el botón derecho del ratón (justo encima del texto «Products») y seleccionamos «inspect UI5 control».

• Esto nos ubicará en el componente UI5 que hemos seleccionado dentro del árbol XML. En este caso vemos que es un componente tipo «List» y podemos ver:
  1. Id asignado al generar el dom HTML «#__list14»
  2. Todos los elementos que contiene el componente
     «StandardListItem«
  3. Información del binding
  4. Propiedades del componente

• Entramos en un poco mas de detalle del punto 3, veremos los datos del binding y que tipo de modelo se esta utilizando

• En la pestaña binding tenemos la información del Path utilizado (el del modelo).
• Al seleccionar en «Path» o «model», podemos ver el «Model Information» Con los datos cargados por el modelo.

• Por otro lado, si seleccionamos un elemento dentro de la lista, podremos ver los datos referentes a esa fila, en este caso vemos que el path es «/ProductCollection» y la posición 2. Este componente usa a su vez dos datos: como contador «Quantity» y como titulo «Name» con sus respectivos valores.
• También es interesante ver que estos 2 valores estan dentro del contexto del componente «__(Context)» y estan ligados con el modelo.

Hasta aquí esta magnifica herramienta, solo como curiosidad, podemos ver la diferencia entre la vista XML que nos brinda la extensión y el DOM que a su vez es la parte que podemos programar. Tomaremos como ejemplo el id «__item763-list14-2»:

---

Alternativa sin necesidad de instalación

Si no quieres o no puedes instalar la extensión, las librerías UI5 incorporan una funcionalidad parecida pero un poco mas limitada. Para acceder a la consola pulsaremos las techas «ctrl» + «alt» + «shift» + «S». Esta combinación abrirá el UI5 Diagnostics.

• En la opción «Control Tree» podremos acceder al árbol. Al seleccionar cualquier componente, podremos ver como este se indica durante 1 segundo en la aplicación ui5 en verde.

• Esta funcionalidad también nos brinda las opciones de información de binding pero de una manera menos completa.
• Un punto interesante de esta herramienta es el debug. Podemos añadir breakpoints de manera fácil en los distintos eventos de un control des de la pestaña «Breakpoints». Al seleccionar un evento y añadir «Add breakpoint» nos informará de que el breakpoint ha sido añadido.

---

Hasta aquí este par de herramientas que a mi me facilitan bastante la vida.

No olvides ver mi post sobre utilidades de desarrollo basadas en SAP WebIde, bastante relacionada con este tema. Accede desde aquí

Os dejo un vídeo con muchas mas utilidades.