¿Necesitas más ayuda para buscar los errores de desarrollo? Usa el App Inspector

A través del tiempo la mayoría de los navegadores ha mejorado considerablemente. El soporte para HTML5 es ahora consistente en la mayoría de los navegadores actuales, el rendimiento de JavaScript es excelente y las herramientas para los desarrolladores son cada vez mejores.

Google Chrome es a menudo el navegador preferido por muchos desarrolladores, lo cual no es sorpresa pues sus herramientas para el desarrollo han estado un paso delante de las herramientas ofrecidas por otros navegadores, las herramientas de desarrollo de Google Chrome hacen un excelente trabajo mostrando los elementos DOM, reglas CSS, código fuente JavaScript y más, sin embargo hasta hace poco los desarrolladores Sencha tenían poca ayuda para depurar sus aplicaciones en tiempo de ejecución.

Apenas unos meses atrás el equipo de Servicios Profesionales Sencha (Sencha Profesional Services team), comenzó a explorar algunas ideas para la depuración de aplicaciones Sencha de forma más inteligente y de esta forma fue que surgió App Inspector for Sencha.

“El Equipo de Sencha tomo la decisión de compartir esta herramienta con la comunidad como parte de la fundación sin ánimo de lucro, Sencha Labs, de esta forma todo aquel que quiera contribuir lo puede hacer. App Inspector for Sencha 2.0 ofrece soporte tanto para Ext JS (4.x) como para Sencha Touch (2.x) y ya está disponible en Chrome web store”.


CARACTERISTICAS.
La parte más difícil de depurar aplicaciones Sencha, es que las herramientas para desarrollo de los navegadores no están preparadas para entender abstracciones de alto nivel como los Componentes (components), layouts, eventos (Observable events), entre otros.

Aunque existen otras herramientas de depuración para Sencha, como “Illuminations for developers”, “Ext JS page analyzer”, y “Sencha Fiddle” entre otros, ninguno de ellos cubría las necesidades del equipo de Servicios Profesionales de Sencha. App Inspector for Sencha no intenta reemplazar ninguna de esas herramientas ya existentes puesto que cada una tiene distintas características y casos de uso, por el contrario App Inspector for Sencha está pensado para ayudar a analizar y entender cualquier aplicación Ext JS y Sencha Touch con herramientas de fácil uso.

App Inspector for Sencha está disponible como una extensión gratuita para Chrome y es útil para depurar aplicaciones en los siguientes casos:

• Inspector de componentes: Se puede navegar de forma fácil y rápida por el árbol de componentes, resaltando los componentes en el DOM y viendo sus propiedades.
• Inspector de Store: Se pueden observar los datos que contiene un Store y explorar los registros (records) individualmente.
• Inspector de Perfiles de Layouts: Muestra los detalles de los layouts para identificar posibles problemas de rendimiento y visualización.
App Inspector for Sencha también detecta las versiones del framework que se esté utilizando en una aplicación, de esta forma es fácil identificar las especificaciones para aplicaciones individuales.



CONSTRUIDO CON SENCHA POR SENCHA.
Aunque App Inspector for Sencha es una extensión para Chrome, es importante señalar que esta construido usando tecnologías Sencha.

La arquitectura de una herramienta de desarrollo en Chrome involucra 2 partes:
• Background
• DeVTool

Estas dos partes interactúan una con la otra, sin embargo estas también interactúan con el inspector de la ventana de distintas maneras.

El background contiene código persistente que inicializa la extensión y supervisa la ventana actual para los eventos (por ejemplo, actualización de la página). El background entonces comunica la ventana actual con el DevTool través de la APIpostMessage .

El DeVTool contiene el código necesario para cada instancia de las herramientas de desarrollo de Chrome(es decir cada pestaña del navegador), toda la interfaz de la App Inspector for Sencha, se construyó con Sencha Architect y Ext JS, además de algunas otras clases con el objetivo de que el DeVTool se comunicara con la App Inspector for Sencha a través de la APIinspectedWindow.

Por ultimo pero no menos importante se utiliza Sencha cmd en combinación con Node.js para automatizar el proceso de construcción. El código construido primero debe pasar una validación JSHint, a continuación la aplicación ejecuta una construcción de producción y finalmente todos los recursos se agrupan para el paquete de depuración, e incluso se incluye una documentación interna usando JSDuck.

El objetivo de este proyecto fue mostrar que es fácil construir aplicaciones robustas y poderosas usando tecnologías de Sencha, así que dale una mirada al código y esperamos que puedas ofrecer tus propias contribuciones y hacer comentarios acerca de esta poderosa herramienta.


Porqué es importante aprender a programar? ...
El éxito de las estimaciones de recursos en el Software ...
La programación dirigida por eventos también es un paradigma de programación
Consideraciones a tomar para llamarlo el mejor

Danos tus comentarios

Escribe un comentario en el campo de abajo...