Elegir el visor de árbol visual adecuado para la aplicación de Windows

Un visor de árboles visuales, también conocido como visualizador de interfaz de usuario, es una herramienta que se usa para inspeccionar e interactuar con los componentes de la interfaz de usuario en una aplicación de Windows en tiempo de ejecución.

Esto puede resultar útil para crear prototipos, mejorar las experiencias del usuario y depurar problemas de la interfaz de usuario a través de funcionalidades como la visualización y el recorrido de la jerarquía de componentes, el resaltado de componentes, el estado de obtención y configuración, y la vinculación profunda al código asociado.

Herramientas recomendadas

En la tabla siguiente se identifican varias herramientas de visualización de la interfaz de usuario y los marcos de interfaz de usuario y las plataformas de aplicaciones de Windows que admiten. Se puede encontrar un resumen de cada herramienta después de la tabla.

Plataforma o marco de interfaz de usuario	Visual Studio: árbol visual dinámico	Spy++	Información de accesibilidad	Herramientas de Desarrollo de la Interfaz de Usuario de Chromium
WinUI en el SDK de aplicaciones de Windows	Supported	No está soportado	Supported	No está soportado
WPF	Supported	No está soportado	Supported	No está soportado
React Native para escritorio	Supported	No está soportado	Supported	Supported
.NET MAUI	Supported	No está soportado	Supported	No está soportado
WinForms	Supported	Supported	Supported	No está soportado
WinUI para UWP para UWP	Supported	No está soportado	Supported	No está soportado
Aplicaciones clásicas de Visual Basic	No está soportado	Supported	No está soportado	No está soportado
Aplicaciones Win32 clásicas	No está soportado	Supported	No está soportado	No está soportado
Aplicaciones basadas en Chromium	No está soportado	No está soportado	No está soportado	Supported

Visual Studio: árbol visual dinámico

Las características Live Visual Tree y Live Property Explorer se incluyen con Visual Studio y funcionan conjuntamente para proporcionar una vista en tiempo de ejecución interactiva de los elementos de la interfaz de usuario de la aplicación.

Cuándo usar árbol visual dinámico

Usa estas herramientas al compilar aplicaciones con WinUI en windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms o React Native para escritorio.

• Para obtener más información sobre WinUI en Windows App SDK, WinUI para UWP y WPF, consulta Inspeccionar propiedades XAML durante la depuración.
• Para obtener más información sobre .NET MAUI, consulte Inspección del árbol visual de una aplicación MAUI de .NET.

Nota:

El visualizador de árboles de WPF es una característica heredada y no está en desarrollo activo. Puede usar el visualizador de árbol de WPF para explorar el árbol visual de un objeto WPF y para ver las propiedades de dependencia de WPF para los objetos contenidos en ese árbol.

Uso del árbol visual dinámico

La recarga activa de XAML debe estar habilitada para ver el árbol visual dinámico (esta característica está habilitada de forma predeterminada en Visual Studio 2019 y versiones posteriores).

Para comprobar si la recarga activa de XAML está habilitada, ejecute la aplicación con el depurador de Visual Studio asociado (F5 o Depurar-> Iniciar depuración). Cuando se inicia la aplicación, deberías ver la barra de herramientas integrada, que confirma que XAML Hot Reload está disponible (como se muestra en la siguiente imagen).

Si no ves la barra de herramientas dentro de la aplicación, selecciona Depurar > Opciones > Recarga dinámica de XAML en la barra de menús de Visual Studio. En el cuadro de diálogo Opciones , asegúrese de que la opción Habilitar recarga activa de XAML está seleccionada.

Una vez que la aplicación se ejecuta en la configuración de depuración (con el depurador asociado), vaya a la barra de menús de Visual Studio (Depurar > árbol visual de Windows > Live). Se abre el panel Árbol visual dinámico con una vista en tiempo real del código XAML.

De forma predeterminada, se selecciona la opción Just My XAML (Solo mi XAML ) del árbol visual activo. Esto proporciona una vista simplificada de la colección de elementos XAML en la aplicación y se puede activar o desactivar mediante el botón Mostrar solo mi XAML , como se muestra en la siguiente imagen.

Funcionalidades del árbol visual dinámico

La barra de herramientas Árbol visual dinámico proporciona varias opciones para seleccionar elementos que se van a examinar a través de la interfaz de usuario de la aplicación en tiempo de ejecución.

• Seleccione Elemento en la aplicación en ejecución. Con este modo activado, al seleccionar un elemento de interfaz de usuario en la aplicación, el árbol visual dinámico se actualiza automáticamente para mostrar el nodo y sus propiedades en el árbol correspondiente a ese elemento.

  

• Mostrar adornos de diseño en la aplicación en ejecución. Con este modo activado, la ventana de la aplicación muestra líneas horizontales y verticales a lo largo de los límites de un objeto seleccionado y un rectángulo que describe sus márgenes.

  

• Vista previa de la selección. Con este modo activado, Visual Studio muestra el XAML donde se declara el elemento (si tiene acceso al código fuente de la aplicación).

  

Spy++

Spy++ (SPYXX.EXE) es una utilidad basada en Win32 que se incluye con Visual Studio y proporciona una vista gráfica de los procesos, subprocesos, ventanas y mensajes de ventana del sistema.

Cuándo usar Spy++

Usa Spy++ al compilar una aplicación win32 clásica o una que usa las API de Win32 para dibujar sus elementos de interfaz de usuario, como WinForms y aplicaciones clásicas de Visual Basic.

Nota:

En el caso de las aplicaciones de .NET Framework, Spy++ es de utilidad limitada, ya que los mensajes de ventana y las clases interceptadas por Spy++ no se corresponden con los eventos administrados y los valores de propiedad.

Cómo usar Spy++

Spy++ se puede iniciar desde Visual Studio o desde el símbolo del sistema para desarrolladores para Visual Studio.

Para iniciar Spy++ desde Visual Studio:

• Confirme que la instalación de Visual Studio incluye el componente características principales del escritorio de C++ de la carga de trabajo de Desarrollo de escritorio con C++. (Se instala de forma predeterminada con Visual Studio 2022).
• Cuando se instala, Spy++ está disponible en el menú Herramientas .
• Spy++ se ejecuta independientemente de Visual Studio, que se puede cerrar si ya no es necesario.

Para iniciar Spy++ desde el símbolo del sistema de desarrolladores de Visual Studio:

• Lance el Símbolo del sistema para desarrolladores de Visual Studio desde el menú Inicio de Windows.
• En el símbolo del sistema, escriba spyxx.exe (o spyxx_amd64.exe para la versión de 64 bits) y presione Entrar.

Para obtener información más específica sobre cómo usar Spy++ desde Visual Studio, vea Barra de herramientas de Spy++.

Funcionalidades de Spy++

Spy++ muestra un árbol gráfico de relaciones entre objetos del sistema, con la ventana de escritorio actual en la parte superior del árbol y los nodos secundarios que representan todas las demás ventanas enumeradas según la jerarquía de ventanas estándar. Puede proporcionar información valiosa sobre el comportamiento de una aplicación que no está disponible a través del depurador de Visual C++.

Con Spy++ puedes:

• Busque ventanas, subprocesos, procesos o mensajes específicos.
• Vea las propiedades de los subprocesos, procesos o mensajes seleccionados.
• Seleccione una ventana, un subproceso, un proceso o un mensaje directamente en la vista de árbol.
• Use la herramienta Finder para seleccionar una ventana con el puntero del mouse (Buscar ventana>).
• Establezca una opción de mensaje mediante un parámetro complejo de selección del registro de mensajes.

Para obtener documentación de Spy++, consulta Ayuda de Spy++.

Accessibility Insights para Windows: Live Inspect

Accessibility Insights para Windows: Live Inspect es una aplicación descargable de Microsoft que puede ayudar a los desarrolladores a encontrar y corregir problemas de accesibilidad en aplicaciones de Windows que admiten automatización de la interfaz de usuario. Ayuda a los desarrolladores a comprobar que un elemento de una aplicación tiene las propiedades correctas de automatización de la interfaz de usuario simplemente al mantener el puntero sobre el elemento o establecer el foco del teclado en ella.

Cuándo usar Accessibility Insights- Live Inspect

Live Inspect se usa normalmente junto con live Visual Tree, Spy++, y otras herramientas al compilar aplicaciones con WinUI en windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms o React Native for Desktop.

Cómo usar Accessibility Insights: Inspección en Vivo

Accessibility Insights debe descargarse e instalarse desde Descargar Accessibility Insights.

Funcionalidades de Accessibility Insights: Live Inspect

Live Inspect muestra un árbol gráfico de relaciones entre objetos del sistema con paneles detallados que contienen las propiedades y patrones de automatización de la interfaz de usuario correspondientes al elemento seleccionado. La ventana de escritorio actual se muestra en la parte superior del árbol y los nodos secundarios que representan todas las demás ventanas enumeradas según la jerarquía de ventanas estándar.

Con Live Inspect puede hacer lo siguiente:

• Compruebe que un elemento de una aplicación tiene las propiedades adecuadas de automatización de la interfaz de usuario simplemente al mantener el puntero sobre el elemento o establecer el foco del teclado en ella.
• Resalta visualmente los elementos de la aplicación de destino.
• Pruebe controles o patrones con comprobaciones manuales o automatizadas para el cumplimiento de numerosas reglas y directrices de accesibilidad.

Para más información sobre la automatización de la interfaz de usuario, consulte Información general sobre automatización de la interfaz de usuario.

Para más información sobre Accessibility Insights, consulte Accessibility Insights para Windows.

Chromium UI DevTools para Windows

Chromium UI DevTools for Windows es una herramienta de Google que le permite inspeccionar el sistema de interfaz de usuario como una página web mediante el Inspector de DevTools de front-end.

Cuándo usar Chromium UI DevTools para Windows

Utilice Chrome UI DevTools si está desarrollando un proyecto Chromium, incluidas las aplicaciones web progresivas o las aplicaciones de escritorio Electron. Para obtener más información sobre Electron, consulte la extensión DevTools en GitHub.

Cómo usar Chromium UI DevTools para Windows

La interfaz de usuario de Chromium DevTools para Windows debe descargarse de GitHub y compilarse con Visual Studio. Para obtener más información, consulte el Resumen de DevTools de la interfaz de usuario.

Funcionalidades de Chromium UI DevTools para Windows

Chromium UI DevTools para Windows usa un front-end de página web para mostrar y recorrer vistas, ventanas y otros elementos de la interfaz de usuario.

Con Chromium UI DevTools para Windows puede hacer lo siguiente:

• Use un árbol jerárquico de elementos de interfaz de usuario para inspeccionar los elementos de la interfaz de usuario y sus propiedades.
• Use el modo Inspeccionar, que resalta un elemento de interfaz de usuario al mantener el puntero sobre él y revela los nodos del elemento en el árbol de elementos de la interfaz de usuario.
• Use el panel Elementos para abrir una barra de búsqueda y buscar un elemento en el árbol de elementos de la interfaz de usuario mediante propiedades de nombre, etiqueta y estilo.
• Use el panel Orígenes para abrir el archivo de encabezado de clase en la búsqueda de código Chromium y extraer el código de los archivos locales.

Contenido relacionado