Escolha o visualizador de árvore visual certo para a sua aplicação Windows

Um visualizador de árvore visual, também conhecido como visualizador de interface, é uma ferramenta utilizada para inspecionar e interagir com componentes de interface de utilizador numa aplicação Windows em execução.

Isto pode ser útil para prototipagem, melhoria da experiência do utilizador e depuração de questões de interface através de capacidades como visualização e percorrência da hierarquia de componentes, realçamento de componentes, obtenção e definição de estado, e ligação profunda ao código associado.

A tabela seguinte identifica várias ferramentas de visualização de UI e os frameworks de UI e plataformas de Windows app que suportam. Um resumo de cada ferramenta pode ser encontrado após a tabela.

Plataforma ou framework de Interface do Utilizador Visual Studio - Árvore Visual Ativa Spy++ Perspetivas sobre Acessibilidade Chromium UI DevTools
WinUI no Windows App SDK Supported Não suportado Supported Não suportado
WPF Supported Não suportado Supported Não suportado
React Native para Desktop Supported Não suportado Supported Supported
.NET MAUI Supported Não suportado Supported Não suportado
WinForms Supported Supported Supported Não suportado
WinUI para UWP para UWP Supported Não suportado Supported Não suportado
Aplicações clássicas do Visual Basic Não suportado Supported Não suportado Não suportado
Aplicações clássicas Win32 Não suportado Supported Não suportado Não suportado
Aplicações baseadas em Chromium Não suportado Não suportado Não suportado Supported

Visual Studio - Árvore Visual ao Vivo

As funcionalidades Live Visual Tree e Live Property Explorer vêm com o Visual Studio e trabalham em conjunto para fornecer uma vista interativa em tempo de execução dos elementos da interface da sua aplicação.

Quando usar a Árvore Visual ao Vivo

Use estas ferramentas ao construir aplicações com WinUI 3 nos Windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms, ou React Native para ambiente de trabalho.

Observação

O Visualizador de Árvore WPF é uma funcionalidade legada e não está em desenvolvimento ativo. Pode usar o visualizador da Árvore WPF para explorar a árvore visual de um objeto WPF e para visualizar as propriedades de dependência do WPF para os objetos contidos nessa árvore.

Como usar a Live Visual Tree

XAML Hot Reload deve estar ativado para visualizar a Árvore Visual Dinâmica (esta funcionalidade está ativada por defeito no Visual Studio 2019 e posteriores).

Para verificar se o Hot Reload XAML está ativado, execute a sua aplicação com o depurador Visual Studio ligado (F5 ou Debug -> Start Debugging). Quando a aplicação inicia, deverá ver a barra de ferramentas dentro da aplicação, que confirma que o XAML Hot Reload está disponível (como mostrado na imagem seguinte).

Captura de ecrã da barra de ferramentas de depuração do Visual Studio na aplicação.

Se não vires a barra de ferramentas dentro da aplicação, seleciona Debug > Options > XAML Hot Reload na barra de menu Visual Studio. Na caixa de diálogo Opções, certifique-se de que a opção Habilitar XAML Hot Reload está selecionada.

Captura de ecrã da caixa de diálogo Opções de Depuração do Visual Studio com Ativação do XAML Hot Reload destacado.

Quando a sua aplicação estiver a correr em configuração de depuração (com o depurador ligado), navegue até à barra de menu Visual Studio (Debug > Windows > Live Visual Tree). Isto abre o painel Live Visual Tree com uma vista em tempo real do seu código XAML.

Por padrão, a opção Just My XAML para a Árvore Visual ao Vivo está selecionada. Isto proporciona uma visão simplificada da coleção de elementos XAML na sua aplicação e pode ser ativado ou desativado através do botão Show Just My XAML , como mostrado na imagem seguinte.

Captura de ecrã da Visual Studio Live Visual Tree com a opção Just My Xaml ativada.

Capacidades da Árvore Visual Viva

A barra de ferramentas Live Visual Tree oferece várias opções para selecionar elementos a examinar através da interface da sua aplicação em tempo de execução.

  • Selecione o elemento na aplicação em execução. Com este modo ativado, quando selecionas um elemento de interface na aplicação, a Árvore Visual ao Vivo atualiza-se automaticamente para mostrar o nó e as suas propriedades na árvore correspondente a esse elemento.

    Captura de ecrã da Visual Studio Live Visual Tree com a opção Selecionar Elemento na Aplicação em Execução ativada.

  • Adornadores de layout de ecrã na aplicação em execução. Com este modo ativado, a janela de aplicação mostra linhas horizontais e verticais ao longo dos limites de um objeto selecionado e um retângulo que delimita as suas margens.

    Captura de ecrã da Árvore Visual Dinâmica do Visual Studio com os Realçadores de Layout de Exibição na opção de Aplicação em Execução ativa.

  • Seleção de pré-visualização. Com este modo ativado, o Visual Studio mostra o XAML onde o elemento é declarado (se tiver acesso ao código-fonte da aplicação).

    Captura de ecrã da Visual Studio Live Visual Tree com a opção de seleção de Pré-visualização ativada.

Espião ++

O Spy++ (SPYXX.EXE) é uma ferramenta baseada em Win32 que vem com Visual Studio e fornece uma vista gráfica dos processos, threads, janelas e mensagens de janelas do sistema.

Quando usar o Spy++

Use o Spy++ ao construir uma aplicação clássica do Win32 ou uma que utilize APIs Win32 para desenhar elementos da interface, como o WinForms e Classic Visual Basic apps.

Observação

Para aplicações de framework .NET, o Spy++ tem utilidade limitada, pois as mensagens e classes de janela intercetadas pelo Spy++ não correspondem a eventos geridos, nem a valores de propriedades.

Como usar o Spy++

O Spy++ pode ser iniciado tanto no Visual Studio como no Developer Command Prompt para o Visual Studio.

Para começar o Spy++ a partir do Visual Studio:

  • Confirme que a sua instalação do Visual Studio inclui o componente funcionalidades principais de C++ para desktop do conjunto de ferramentas Desktop development with C++. (Isto está instalado por defeito com o Visual Studio 2026.) Captura de ecrã do Visual Studio Installer com o desenvolvimento do ambiente de trabalho com cartão C++ assinalado e o estado da instalação das funcionalidades principais do desktop em C++ destacado.
  • Quando instalado, o Spy++ está disponível no menu de Ferramentas .
  • O Spy++ corre independentemente do Visual Studio, que pode ser encerrado se já não for necessário.

Para iniciar o Spy++ a partir do Prompt de Comando do Desenvolvedor para o Visual Studio, siga estas etapas:

  • Abra o Developer Command Prompt para Visual Studio a partir do menu Windows Iniciar. Captura de ecrã do menu Iniciar do Windows com o Prompt de Comando do Desenvolvedor para VS 2022 destacado.
  • No prompt de comandos, introduza spyxx.exe (ou spyxx_amd64.exe para a versão de 64 bits) e pressione Enter.

Para informações mais específicas sobre como usar o Spy++ a partir de Visual Studio, consulte Spy++ Toolbar.

Capacidades do Spy++

O Spy++ apresenta uma árvore gráfica de relações entre objetos do sistema, com a janela atual do ambiente de trabalho no topo da árvore e os nós filhos a representarem todas as outras janelas listadas de acordo com a hierarquia padrão de janelas. Pode fornecer informações valiosas sobre o comportamento de uma aplicação que não está disponível através do depurador Visual C++.

Captura de ecrã da janela da aplicação Spy++.

Com o Spy++ podes:

  • Procure janelas, threads, processos ou mensagens específicas.
  • Veja as propriedades de threads, processos ou mensagens selecionados.
  • Selecione uma janela, thread, processo ou mensagem diretamente na vista de árvore.
  • Use a ferramenta Finder para selecionar uma janela usando o ponteiro do rato (Pesquisa -> Janela de Procurar). Captura de ecrã do diálogo Spy++ Find Window.
  • Defina uma opção de mensagem usando um parâmetro complexo de seleção de registo de mensagens.

Para documentação do Spy++, consulte a Ajuda do Spy++.

Insights de Acessibilidade para Windows - Live Inspect

Accessibility Insights for Windows - Live Inspect é uma aplicação Microsoft descarregável que pode ajudar os programadores a encontrar e corrigir problemas de acessibilidade em aplicações Windows que suportam UI Automation. Ajuda os programadores a verificar se um elemento numa aplicação tem as propriedades corretas de UI Automation, simplesmente passando o rato sobre o elemento ou definindo o foco do teclado para ele.

Quando usar o Accessibility Insights - Inspeção em Tempo Real

O Live Inspect é normalmente usado em conjunto com o Live Visual Tree, Spy++ e outras ferramentas ao construir aplicações com WinUI nos Windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms, ou React Native for Desktop.

Como usar o Insights de Acessibilidade - Inspeção em Tempo Real

O Accessibility Insights deve ser descarregado e instalado através do Download Accessibility Insights.

Funcionalidades da Ferramenta de Análise de Acessibilidade - Inspeção ao Vivo

O Live Inspect apresenta uma árvore gráfica de relações entre objetos do sistema com painéis de detalhe que contêm as propriedades e padrões do UI Automation correspondentes ao elemento selecionado. A janela atual do ambiente de trabalho é exibida no topo da árvore e dos nós filhos representando todas as outras janelas listadas de acordo com a hierarquia padrão das janelas.

Com o Live Inspect pode:

  • Verifica se um elemento numa aplicação tem as propriedades corretas de UI Automation, simplesmente passando o rato por cima do elemento ou definindo o foco do teclado nele.
  • Destaca visualmente elementos na aplicação alvo.
  • Controlos ou padrões de teste com verificações manuais ou automatizadas para conformidade com inúmeras regras e diretrizes de acessibilidade.

Captura de ecrã da ferramenta Accessibility Insights ao lado de uma aplicação básica de alvo.

Para saber mais sobre UI Automation, consulte UI Automation Overview.

Para saber mais sobre Insights de Acessibilidade, consulte Insights de Acessibilidade para Windows

Chromium UI DevTools para Windows

O Chromium UI DevTools para Windows é uma ferramenta da Google que permite inspecionar o sistema de interface como uma página web, usando o Inspetor de Ferramentas de Interface (frontend DevTools).

Quando usar o Chromium UI DevTools para Windows

Use o Google Chrome DevTools se estiver a desenvolver um projeto Chromium, incluindo aplicações web progressivas ou aplicações desktop Electron. Para mais informações sobre o Electron, consulte a extensão DevTools no GitHub.

Como usar o Chromium UI DevTools para Windows

A base de código do Chromium UI DevTools para Windows deve ser descarregada do GitHub e construída com o Visual Studio. Para mais informações, consulte a Visão Geral das Ferramentas de DevTools da UI.

Capacidades do Chromium UI DevTools para Windows

O Chromium UI DevTools para Windows utiliza uma interface de página web para mostrar e percorrer vistas, janelas e outros elementos da interface.

Com o Chromium UI DevTools para Windows podes:

  • Use uma árvore hierárquica de elementos de UI para inspecionar os elementos da UI e as suas propriedades.
  • Use o modo Inspecionar, que destaca um elemento da interface quando passa o rato por cima dele e revela os nós do elemento na árvore de elementos da interface.
  • Use o painel Elementos para abrir uma barra de pesquisa e encontrar um elemento na árvore de elementos da interface usando as propriedades de nome, etiqueta e estilo.
  • Utilize o painel Fontes para abrir o ficheiro de cabeçalho de classe no repositório de código do Chromium e importe o código dos ficheiros locais.

Conteúdo relacionado

  • Last updated on