Compartir a través de

Elija el visor de árboles visual adecuado para la aplicación de Windows

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

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, la obtención y configuración del estado y la vinculación profunda con el código asociado.

En la tabla siguiente se identifican varias herramientas de visualización de la interfaz de usuario junto con 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/marco de interfaz de usuario Visual Studio: Árbol visual dinámico Espía++ Información de accesibilidad DevTools de la interfaz de usuario de Chromium
WinUI en el SDK para aplicaciones de Windows Soportado No está soportado Soportado No está soportado
WPF Soportado No está soportado Soportado No está soportado
React Native para escritorio Soportado No está soportado Soportado Soportado
.NET MAUI Soportado No está soportado Soportado No está soportado
WinForms Soportado Soportado Soportado No está soportado
WinUI 2 para UWP Soportado No está soportado Soportado No está soportado
Aplicaciones de Visual Basic clásico No está soportado Soportado No está soportado No está soportado
Aplicaciones de Win32 clásico No está soportado Soportado No está soportado No está soportado
Aplicaciones basadas en Chromium No está soportado No está soportado No está soportado Soportado

Visual Studio: Árbol visual dinámico

Las características Árbol visual dinámico y Explorador de propiedades dinámico se incluyen con Visual Studio y funcionan conjuntamente para proporcionar una vista interactiva en tiempo de ejecución de los elementos de la interfaz de usuario de la aplicación.

Cuándo se debe usar Árbol visual dinámico

Usa estas herramientas al compilar aplicaciones con WinUI en la SDK de Aplicaciones para Windows, WinUI 2 para UWP, WPF, .NET MAUI, WinForms o React Native para escritorio.

Nota:

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

Cómo se usa Árbol visual dinámico

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

Para comprobar si Recarga activa de XAML se ha habilitado, ejecute la aplicación con el depurador de Visual Studio asociado (F5 o Depurar -> Iniciar depuración). Al iniciar la aplicación, debería ver la barra de herramientas de la aplicación, lo que confirma que Recarga activa de XAML está disponible (como se muestra en la siguiente imagen).

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

Si no ve la barra de herramientas de la aplicación, seleccione Depurar > Opciones > Recarga activa 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.

Captura de pantalla del cuadro de diálogo Opciones de depuración de Visual Studio con la opción Activar recarga activa de XAML resaltada.

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

De forma predeterminada, está seleccionada la opción Solo mi XAML de Árbol visual dinámico. Esto proporciona una vista simplificada de la colección de elementos XAML de la aplicación y se puede activar o desactivar con el botón Mostrar solo mi XAML, como se puede ver en la siguiente imagen.

Captura de pantalla del árbol visual de Visual Studio Live con la opción Solo mi Xaml activada.

Funcionalidades de Árbol visual dinámico

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

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

    Captura de pantalla del árbol visual de Visual Studio Live con la opción Seleccionar elemento en la aplicación en ejecución activada.

  • 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, junto con un rectángulo que define sus márgenes.

    Captura de pantalla del árbol visual de Visual Studio Live con la opción Mostrar adornos de diseño en la aplicación en ejecución activada.

  • Vista previa de la selección. Con este modo activado, Visual Studio muestra el XAML en el que se ha declarado el elemento, siempre y cuando se tenga acceso al código fuente de la aplicación.

    Captura de pantalla del árbol visual de Visual Studio Live con la opción Previsualizar selección activada.

Spy++

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

Cuándo se debe usar Spy++

Use Spy++ al compilar una aplicación de Win32 clásico o una que use las API de Win32 para dibujar sus elementos de interfaz de usuario, como WinForms y las aplicaciones de Visual Basic clásico.

Nota:

En el caso de las aplicaciones de .NET Framework, Spy++ tiene una 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 se usa Spy++

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

Para iniciar Spy++ desde Visual Studio:

  • Confirme que la instalación de Visual Studio incluye el componente de características principales de escritorio para C++ de la carga de trabajo de Desarrollo para el escritorio con C++. (Se instala de manera predeterminada con Visual Studio 2022). Captura de pantalla del instalador de Visual Studio con la tarjeta Desarrollo de escritorio con C++ marcada 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:

  • Abra el menú Símbolo del sistema para desarrolladores de Visual Studio desde el menú Inicio de Windows. Captura de pantalla del menú Inicio de Windows con el símbolo del sistema para desarrolladores de 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, consulte 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 enumerados 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++, puede:

  • Buscar ventanas, subprocesos, procesos o mensajes específicos.
  • Ver las propiedades de las ventanas, los subprocesos, los procesos o los mensajes seleccionados.
  • Seleccionar una ventana, un subproceso, un proceso o un mensaje directamente en la vista de árbol.
  • Usar la herramienta de búsqueda para seleccionar una ventana con el puntero del mouse (Buscar -> Buscar ventana). Captura de pantalla del cuadro de diálogo Buscar ventana de Spy++.
  • Establecer una opción de mensaje con un parámetro complejo de selección de registro de mensajes.

Para obtener documentación sobre Spy++, consulte 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 compatibles con la 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 manteniendo el puntero sobre el elemento o estableciendo el foco del teclado en él.

Cuándo se debe 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 la SDK de Aplicaciones para Windows, WinUI 2 para UWP, WPF, .NET MAUI, WinForms o React Native for Desktop.

Cómo se usa Accessibility Insights: Live Inspect

Accessibility Insights se debe descargar e instalar 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 los 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 se enumeran según la jerarquía de ventanas estándar.

Con Live Inspect, puede:

  • Comprobar que un elemento de una aplicación tiene las propiedades adecuadas de automatización de la interfaz de usuario manteniendo el puntero sobre el elemento o estableciendo el foco del teclado en él.
  • Resaltar visualmente los elementos de la aplicación de destino.
  • Probar controles o patrones con comprobaciones manuales o automatizadas del 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 la automatización de la interfaz de usuario, consulte Información general sobre la automatización de la interfaz de usuario.

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

DevTools de la interfaz de usuario de Chromium para Windows

DevTools de la interfaz de usuario de Chromium para Windows es una herramienta de Google que permite inspeccionar el sistema de interfaz de usuario como una página web con el Inspector de DevTools de front-end.

Cuándo se debe usar DevTools de la interfaz de usuario de Chromium para Windows

Use DevTools de la interfaz de usuario de Chromium si está desarrollando un proyecto de 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 se usa DevTools de la interfaz de usuario de Chromium para Windows

La base de código de DevTools de la interfaz de usuario de Chromium para Windows se debe descargar de GitHub y se compila con Visual Studio. Para obtener más información, consulte la Información general sobre DevTools de la interfaz de usuario.

Funcionalidades de DevTools de la interfaz de usuario de Chromium para Windows

DevTools de la interfaz de usuario de Chromium 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 DevTools de la interfaz de usuario de Chromium para Windows, puede:

  • Usar un árbol jerárquico de elementos de interfaz de usuario para inspeccionar los elementos de la interfaz de usuario y sus propiedades.
  • Usar el modo de inspección, que resalta un elemento de la 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.
  • Usar el panel Elementos para abrir una barra de búsqueda y buscar un elemento en el árbol de elementos de la interfaz de usuario con las propiedades de nombre, etiqueta y estilo.
  • Usar el panel Orígenes para abrir el archivo de encabezado de clase en la búsqueda de código de Chromium y extraer el código de los archivos locales.

Contenido relacionado