Introducción
Cada vez que nos llega a los desarrolladores un nuevo SDK, es un
momento especial con una mezcla de altísima curiosidad y ganas de probar
novedades. Entre las novedades principales siempre hay nuevas APIs,
controles y otros elementos para poder realizar Apps que antes no eran
posibles. Sin embargo, entre el conjunto de novedades siempre suelen
venir nuevas herramientas que facilitan ciertas tareas: obtener más
analíticas, mejores medidores de rendimiento, más opciones en
emuladores, etc.
Desde versiones anteriores de Visual Studio, una de las herramientas más demandadas son herramientas de depuración de UI XAML.
Nuevas herramientas
Con Visual Studio 2015 nos llegan nuevas herramientas entre las que
se incluyen herramientas que permiten inspeccionar el árbol de elementos
XAML asi como modificar todas las propiedades de cualquier elemento.
Esta nueva herramienta se llama Visual Tree Inspector.
Visual Tree Inspector
El Árbol visual dinámico es la primera de dos piezas fundamentales para depurar UI XAML.
Esta herramienta nos permite ver el árbol de controles de la App en
ejecución indicando el número de elementos hijos de cada elemento ideal
para entender la estructura visual de una vista compleja y entender
problemas de rendimiento. Además, haciendo sobre un elemento podemos ver
el archivo XAML donde esta definido quedando marcado.
Conociendo la estructura de la vista es fácil navegar por los
elementos del arbol. Son embargo, ¿que ocurre si la vista es compleja y
no conocemos la estructura?
La herramienta incluye una opción para poder seleccionar elementos visuales de forma muy sencilla con un simple clic de ratón.
Seleccionando la primera opción en la herramienta habilitaremos la selección de elementos de la App en ejecución.
Una vez habilitado, podemos seleccionar elementos en la App en
ejecución quedando marcadas también en el árbol de controles y mostrando
el código XAML de la definición.
El elemento seleccionado queda bordeado de rojo. También tenemos la
opción de ver adorners de diseño de la App en tiempo de ejecución.
Podemos activar esta opción con el segundo botón del conjunto de botones
disponible en la herramienta.
Veremos distintas marcas de diseño del elemento seleccionando
dándonos información relacionada con la posición y tamaño del elemento.
Live Property Explorer
La segunda pieza relacionada con las herramientas de depuración de UI XAML es el explorador de propiedades dinámico.
Esta herramienta nos permite ver todas las propiedades del elemento
seleccionado, incluso aquellas sobreescritas. Podemos ver si las
propiedades estan establecidas con valores directos, accediendo a
recursos, etc. Además, y la parte más interesante, permite cambiar los
valores de la App en ejecución directamente viendo los cambios de manera
inmediata.
Más información
- The Visual Studio Blog: Introducing the UI debugging tools for XAML