Compartilhar via

Escolha o visualizador de árvore visual correto para seu Windows app

Um visualizador de árvore visual, também conhecido como visualizador de interface do usuário, é uma ferramenta usada para inspecionar e interagir com componentes da interface do usuário em um Windows app em tempo de execução.

Isso pode ser útil para criação de protótipos, melhoria de experiências do usuário e depuração de problemas de interface do usuário por meio de recursos como exibição e passagem de hierarquia de componentes, realce de componentes, obtenção e definição de estado e vinculação profunda ao código associado.

A tabela a seguir identifica várias ferramentas de visualização de interface do usuário, as estruturas de interface do usuário e as plataformas de aplicativos do Windows que são compatíveis. Um resumo de cada ferramenta pode ser encontrado após a tabela.

Plataforma/estrutura da interface do usuário Visual Studio - Live Visual Tree Spy++ Percepções de Acessibilidade Chromium UI DevTools
WinUI no Windows App SDK Supported Sem suporte Supported Sem suporte
WPF Supported Sem suporte Supported Sem suporte
React Native para desktop Supported Sem suporte Supported Supported
.NET MAUI Supported Sem suporte Supported Sem suporte
WinForms Supported Supported Supported Sem suporte
WinUI para UWP para UWP Supported Sem suporte Supported Sem suporte
Aplicativos Visual Basic Clássicos Sem suporte Supported Sem suporte Sem suporte
Aplicativos Win32 clássicos Sem suporte Supported Sem suporte Sem suporte
Aplicativos baseados em Chromium Sem suporte Sem suporte Sem suporte Supported

Visual Studio – Árvore Visual Dinâmica

Os recursos Live Visual Tree e Live Property Explorer são fornecidos com Visual Studio e funcionam em conjunto para fornecer uma exibição interativa de runtime dos elementos da interface do usuário em seu aplicativo.

Quando usar a Live Visual Tree

Use essas ferramentas ao criar aplicativos com WinUI 3 no Windows App SDK, WinUI para UWP para UWP, WPF, .NET MAUI, WinForms, ou React Native for Desktop.

Observação

O WPF Tree Visualizer é um recurso herdado e não está em desenvolvimento ativo. Você pode usar o visualizador WPF Tree para explorar a árvore visual de um objeto WPF e exibir as propriedades de dependência WPF para os objetos contidos nessa árvore.

Como usar a Árvore Visual Dinâmica

XAML Hot Reload deve estar habilitado para exibir a Árvore Visual Dinâmica (esse recurso é habilitado por padrão no Visual Studio 2019 e posterior).

Para verificar se o Hot Reload XAML está habilitado, execute seu aplicativo com o depurador Visual Studio anexado (F5 ou Debug -> Iniciar Depuração). Quando o aplicativo for iniciado, você deverá ver a barra de ferramentas no aplicativo, que confirma que o Hot Reload XAML está disponível (conforme mostrado na imagem a seguir).

Screenshot da barra de ferramentas de depuração dentro do aplicativo Visual Studio.

Se você não vir a barra de ferramentas no aplicativo, selecione Debug > Options > XAML Hot Reload na barra de menus Visual Studio. Na caixa de diálogo Options, verifique se a opção Enable XAML Hot Reload está selecionada.

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

Depois que o aplicativo estiver em execução na configuração de depuração (com o depurador anexado), navegue até a barra de menus Visual Studio (Debug > Windows > Live Visual Tree). Isso abre o painel Árvore Visual Dinâmica com uma exibição em tempo real do código XAML.

Por padrão, a opção Just My XAML para a Árvore Visual Dinâmica está selecionada. Isso fornece uma exibição simplificada da coleção de elementos XAML em seu aplicativo e pode ser ativada ou desativada por meio do botão Mostrar Apenas Meu XAML , conforme mostrado na imagem a seguir.

Screenshot da árvore visual dinâmica Visual Studio com a opção Just My Xaml habilitada.

Funcionalidades da Árvore Visual Dinâmica

A barra de ferramentas Live Visual Tree fornece várias opções para selecionar elementos para examinar por meio da interface do usuário do seu aplicativo em tempo de execução.

  • Selecione elemento no aplicativo em execução. Com esse modo ativado, quando você seleciona um elemento de interface do usuário no aplicativo, a Árvore Visual Dinâmica é atualizada automaticamente para mostrar o nó e suas propriedades na árvore correspondentes a esse elemento.

    Screenshot da árvore visual ao vivo do Visual Studio com a opção Selecionar Elemento no Aplicativo em Execução habilitada.

  • Exibir adornos de layout no aplicativo em execução. Com esse modo ativado, a janela do aplicativo mostra linhas horizontais e verticais ao longo dos limites de um objeto selecionado e um retângulo delineando suas margens.

    Screenshot da Árvore Visual ao Vivo do Visual Studio com os Adornos de Layout de Exibição na opção Aplicação em Execução habilitada.

  • Seleção de visualização. Com esse modo ativado, Visual Studio mostra o XAML em que o elemento é declarado (se você tiver access ao código-fonte do aplicativo).

    Captura de tela da Árvore Visual Dinâmica do Visual Studio com a opção de seleção de visualização habilitada.

Spy++

Spy++ (SPYXX.EXE) é um utilitário baseado em Win32 que é fornecido com Visual Studio e fornece uma exibição gráfica dos processos, threads, janelas e mensagens de janela do sistema.

Quando usar o Spy++

Use o Spy++ ao criar um aplicativo Win32 clássico ou um que use APIs Win32 para desenhar seus elementos de interface do usuário, como WinForms e Classic Visual Basic apps.

Observação

Para aplicativos de estrutura .NET, o Spy++ tem utilidade limitada, pois as mensagens de janela e as classes interceptadas pelo Spy++ não correspondem a eventos e valores de propriedade gerenciados.

Como usar o Spy++

O Spy++ pode ser iniciado a partir de Visual Studio ou do Developer Command Prompt for Visual Studio.

Para iniciar o Spy++ de Visual Studio:

  • Confirme se a instalação do Visual Studio inclui os recursos principais de área de trabalho do C++ do desenvolvimento para área de trabalho com C++. (Isso é instalado por padrão com Visual Studio 2022.) Captura de tela do instalador do Visual Studio com a opção de desenvolvimento para desktop com C++ marcada e o status de instalação dos recursos principais do desktop C++ destacado.
  • Quando instalado, o Spy++ está disponível no menu Ferramentas .
  • O Spy++ é executado independentemente de Visual Studio, que pode ser fechado se não for mais necessário.

Para iniciar o Spy++ no Prompt de Comando do Desenvolvedor do Visual Studio:

  • Inicie Developer Command Prompt for Visual Studio do menu Windows Start. Captura de tela do menu Iniciar do Windows com o Prompt de Comando do Desenvolvedor do VS 2022 realçado.
  • No prompt de comando, insira spyxx.exe (ou spyxx_amd64.exe para a versão de 64 bits) e pressione Enter.

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

Funcionalidades do Spy++

O Spy++ exibe uma árvore gráfica de relações entre objetos do sistema, com a janela da área de trabalho atual na parte superior da árvore e os nós filho representando todas as outras janelas listadas de acordo com a hierarquia de janela padrão. Ele pode fornecer informações valiosas sobre o comportamento de um aplicativo que não está disponível por meio do depurador do Visual C++.

Captura de tela da janela do aplicativo Spy++.

Com o Spy++ você pode:

  • Pesquise janelas, threads, processos ou mensagens específicos.
  • Exiba as propriedades de processos ou mensagens de threads selecionados.
  • Selecione uma janela, thread, processo ou mensagem diretamente no modo de exibição de árvore.
  • Use a Ferramenta Finder para selecionar uma janela usando o ponteiro do mouse (Pesquisar –> Localizar Janela). Captura de tela da caixa de diálogo Encontrar Janela do Spy++.
  • Defina uma opção de mensagem usando um parâmetro de seleção de log de mensagens complexo.

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

Insights de acessibilidade para Windows – Inspeção dinâmica

Accessibility Insights for Windows – Live Inspect é um aplicativo da Microsoft para download que pode ajudar os desenvolvedores a encontrar e corrigir problemas de acessibilidade em aplicativos do Windows que dão suporte a UI Automation. Ele ajuda os desenvolvedores a verificar se um elemento em um aplicativo tem as propriedades corretas UI Automation simplesmente passando o mouse sobre o elemento ou definindo o foco do teclado para ele.

Quando usar o Accessibility Insights – Inspeção ao Vivo

A Inspeção Dinâmica normalmente é usada em conjunto com a Live Visual Tree, Spy++e outras ferramentas ao criar aplicativos com WinUI no Windows App SDKWinUI para UWP para UWP, WPF, .NET MAUI, WinForms ou React Native for Desktop.

Como usar o Accessibility Insights – Inspeção ao Vivo

O Accessibility Insights deve ser baixado e instalado no Download do Accessibility Insights.

Funcionalidades do Accessibility Insights – Inspeção ao Vivo

A ferramenta Live Inspect exibe uma árvore gráfica de relações entre objetos do sistema, com painéis de detalhes que contêm as propriedades e padrões de Automação de Interface do Usuário (UI Automation) correspondentes ao elemento selecionado. A janela da área de trabalho atual é exibida na parte superior da árvore e nós filho que representam todas as outras janelas listadas de acordo com a hierarquia de janela padrão.

Com a Inspeção Dinâmica, você pode:

  • Verifique se um elemento em um aplicativo tem as propriedades corretas UI Automation simplesmente passando o mouse sobre o elemento ou definindo o foco do teclado nele.
  • Realça visualmente os elementos no aplicativo de destino.
  • Teste controles ou padrões com verificações manuais ou automatizadas para conformidade com várias regras e diretrizes de acessibilidade.

Captura de tela da ferramenta Insights de Acessibilidade ao lado de um aplicativo de destino básico.

Para saber mais sobre UI Automation, consulte UI Automation Visão geral.

Para saber mais sobre o Accessibility Insights, consulte Accessibility Insights para Windows

Chromium UI DevTools para Windows

O Chromium UI DevTools para Windows é uma ferramenta do Google que permite inspecionar o sistema de interface do usuário como uma página da Web usando o Inspetor de DevTools de front-end.

Quando usar o Chromium UI DevTools para Windows

Use as ferramentas de desenvolvimento do Chrome UI se você estiver desenvolvendo um projeto do Chromium, incluindo aplicativos progressivos da Web ou aplicativos desktop do Electron. Para obter mais informações sobre o Electron, consulte a extensão DevTools em GitHub.

Como usar o Chromium UI DevTools para Windows

O Chromium UI DevTools para Windows codebase deve ser baixado de GitHub e criado com Visual Studio. Para mais informações, consulte a Visão Geral do DevTools UI.

Funcionalidades do Chromium UI DevTools para Windows

O Chromium UI DevTools para Windows usa uma interface de página web para exibir e percorrer exibições, janelas e outros elementos da interface do usuário.

Com o Chromium UI DevTools para Windows, você pode:

  • Use uma árvore de elementos de interface do usuário hierárquica para inspecionar os elementos da interface do usuário e suas propriedades.
  • Use o modo Inspeção, que realça um elemento de interface do usuário quando você passa o mouse sobre ele e revela os nós do elemento na árvore de elementos da interface do usuário.
  • Use o painel Elementos para abrir uma barra de pesquisa e encontrar um elemento na árvore de elementos da interface do usuário usando propriedades de nome, marca e estilo.
  • Use o painel Fontes para abrir o arquivo de cabeçalho de classe na pesquisa de código do Chromium e importar o código de arquivos locais.

Conteúdo relacionado

  • Last updated on