[Windows 10] Nuevas herramientas, Visual Tree Inspector

Tools - 02Introducció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.

Visual Tree Inspector

Visual Tree Inspector

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.

Opciones de la herramienta

Opciones de la herramienta

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.

Seleccionando elementos visuales

Seleccionando elementos visuales

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.

Adorners de diseño

Adorners de diseño

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.

Live Property Explorer

Live Property Explorer

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.

Cambiando propiedades de la App en ejecución

Cambiando propiedades de la App en ejecución

Más información

2 pensamientos en “[Windows 10] Nuevas herramientas, Visual Tree Inspector

  1. Pingback: [Windows 10] Novedades XAML: x:DeferLoadStrategy | Javier Suárez | Blog

  2. Pingback: [Windows 10] Novedades XAML: x:DeferLoadStrategy - Javier Suárez

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s