Compartir a través de

Elija el visor de árbol visual adecuado para la Windows app

Un visor de árbol visual, 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 un Windows app 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.

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 Windows app que admiten. Se puede encontrar un resumen de cada herramienta después de la tabla.

Plataforma o marco de interfaz de usuario Visual Studio: Live Visual Tree Spy++ Información de accesibilidad Herramientas de Desarrollo de la Interfaz de Usuario de Chromium
WinUI en el Windows App SDK 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 de Visual Basic classic 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 3 en el Windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms, o React Native for Desktop.

Nota:

El visualizador de árboles 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

XAML Hot Reload debe estar habilitado para ver el árbol visual activo (esta característica está habilitada de forma predeterminada en Visual Studio 2019 y versiones posteriores).

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

Captura de pantalla de la barra de herramientas de depuración dentro de la aplicación Visual Studio.

Si no ves la barra de herramientas en la aplicación, selecciona Debug > Options > XAML Hot Reload en la barra de menús de Visual Studio. En el cuadro de diálogo Options, asegúrese de que está seleccionada la opción Enable XAML Hot Reload.

Captura de pantalla del cuadro de diálogo Opciones de depuración de Visual Studio con Habilitar XAML Hot Reload resaltado.

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 Visual Studio (Debug > Windows > Live Visual Tree). 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.

Captura de pantalla del árbol visual dinámico de Visual Studio con la opción Just My Xaml enabled.

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.

    Captura de pantalla del árbol visual dinámico de Visual Studio con el elemento Select en la opción Aplicación en ejecución habilitada.

  • 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.

    Captura de pantalla del árbol visual dinámico de Visual Studio con los adornos de diseño para mostrar en la opción Aplicación en ejecución habilitada.

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

    Captura de pantalla del Árbol Visual en Vivo de Visual Studio con la opción de selección de Vista previa habilitada.

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:

Para .NET aplicaciones de marco, Spy++ es de utilidad limitada, ya que los mensajes y clases de ventana interceptados por Spy++ no corresponden a 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 centrales de escritorio de C++ del conjunto de herramientas desarrollo de escritorio con C++. (Eso se instala de forma predeterminada con Visual Studio 2022.) Captura de pantalla del instalador de Visual Studio con la tarjeta Desarrollo de escritorio con C++ seleccionada y el estado de instalación de las características principales de escritorio de C++ resaltado.
  • 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 para desarrolladores de Visual Studio:

  • Inicie Símbolo del sistema para desarrolladores de Visual Studio desde el menú Windows Inicio. Captura de pantalla del menú Inicio de Windows con el símbolo del sistema para desarrolladores para VS 2022 resaltado.
  • 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, consulta Spy++ Toolbar.

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++.

Captura de pantalla de la ventana de la aplicación Spy++.

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>). Captura de pantalla del cuadro de diálogo Buscar ventana en Spy++.
  • 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 de Microsoft descargable que puede ayudar a los desarrolladores a encontrar y corregir problemas de accesibilidad en aplicaciones de Windows que admiten UI Automation. Ayuda a los desarrolladores a comprobar que un elemento de una aplicación tiene las propiedades UI Automation correctas 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 el 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 de detalles que contienen las propiedades y patrones de UI Automation 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 de UI Automation correctas simplemente al mantener el puntero sobre el elemento o establecer el foco del teclado en él.
  • 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.

Captura de pantalla de la herramienta Accessibility Insights junto a una aplicación de destino básica.

Para obtener más información sobre UI Automation, consulte UI Automation Información general.

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

Utiliza Chrome UI DevTools si estás desarrollando un proyecto Chromium, incluidas las aplicaciones web progresivas o las aplicaciones de escritorio de 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

  • Last updated on