Wybierz odpowiednią przeglądarkę drzewa wizualnego dla aplikacji Windows

Podgląd drzewa wizualnego, znany również jako wizualizator interfejsu użytkownika, to narzędzie służące do inspekcji składników interfejsu użytkownika i ich interakcji w aplikacji Windows w czasie wykonywania.

Może to być przydatne w przypadku tworzenia prototypów, ulepszania środowiska użytkownika i debugowania problemów z interfejsem użytkownika za pośrednictwem funkcji, takich jak wyświetlanie i przechodzenie hierarchii składników, wyróżnianie składników, uzyskiwanie i ustawianie stanu oraz głębokie łączenie ze skojarzonym kodem.

Zalecane narzędzia

W poniższej tabeli przedstawiono kilka narzędzi do wizualizacji interfejsu użytkownika oraz platform interfejsu użytkownika i platform Windows app, które obsługują. Podsumowanie każdego narzędzia można znaleźć po tabeli.

Visual Studio — dynamiczne drzewo wizualne

Funkcje Live Visual Tree i Live Property Explorer są dostarczane z Visual Studio i działają razem, aby zapewnić interaktywny widok środowiska uruchomieniowego elementów interfejsu użytkownika w aplikacji.

Kiedy używać dynamicznego drzewa wizualnego

Użyj tych narzędzi podczas tworzenia aplikacji z WinUI 3 w Windows App SDK, WinUI dla platformy UWP dla UWP, WPF, .NET MAUI, WinForms, lub React Native for Desktop.

• Aby uzyskać więcej informacji na temat winUI i WPF, zobacz Inspekcja właściwości XAML podczas debugowania.

Jak używać dynamicznego drzewa wizualnego

XAML Hot Reload należy włączyć wyświetlanie dynamicznego drzewa wizualnego (ta funkcja jest domyślnie włączona w Visual Studio 2019 i nowszych).

Aby sprawdzić, czy Hot Reload XAML jest włączona, uruchom aplikację przy użyciu dołączonego debugera Visual Studio (F5 lub Debug -> Rozpocznij debugowanie). Po uruchomieniu aplikacji powinien zostać wyświetlony pasek narzędzi w aplikacji, który potwierdza dostępność Hot Reload XAML (jak pokazano na poniższej ilustracji).

Jeśli nie widzisz paska narzędzi w aplikacji, wybierz pozycję Debug > Opcje > XAML Hot Reload na pasku menu Visual Studio. W oknie dialogowym Options upewnij się, że wybrano opcję Enable XAML Hot Reload.

Po uruchomieniu aplikacji w konfiguracji debugowania (z dołączonym debugerem) przejdź do paska menu Visual Studio (Debug > Windows > Live Visual Tree). Spowoduje to otwarcie okienka Live Visual Tree z widokiem w czasie rzeczywistym kodu XAML.

Domyślnie jest zaznaczona opcja Just My XAML (Tylko mój kod XAML ) dla dynamicznego drzewa wizualnego. Zapewnia to uproszczony widok kolekcji elementów XAML w aplikacji i można go włączyć lub wyłączyć za pomocą przycisku Pokaż tylko mój kod XAML , jak pokazano na poniższej ilustracji.

Możliwości dynamicznego drzewa wizualnego

Pasek narzędzi Live Visual Tree (Dynamiczne Drzewo Wizualne) zawiera kilka opcji wybierania elementów do zbadania w interfejsie użytkownika aplikacji podczas działania.

• Wybierz element w uruchomionej aplikacji. W przypadku włączenia tego trybu po wybraniu elementu interfejsu użytkownika w aplikacji dynamiczne drzewo wizualne jest automatycznie aktualizowane w celu wyświetlenia węzła i jego właściwości w drzewie odpowiadającym temu elementowi.

  

• Wyświetl adornery układu w działającej aplikacji. W przypadku tego trybu w oknie aplikacji są wyświetlane linie poziome i pionowe wzdłuż granic wybranego obiektu oraz prostokąt przedstawiający jego marginesy.

  

• Podgląd zaznaczenia. W tym trybie Visual Studio pokazuje kod XAML, w którym zadeklarowany jest element (jeśli masz access do kodu źródłowego aplikacji).

  

Spy++

Spy++ (SPYXX.EXE) to narzędzie oparte na systemie Win32, które jest dostarczane z Visual Studio i zapewnia graficzny widok procesów, wątków, okien i komunikatów okien systemu.

Kiedy używać programu Spy++

Użyj programu Spy++ podczas tworzenia klasycznej aplikacji Win32 lub aplikacji korzystającej z interfejsów API Win32 do rysowania elementów interfejsu użytkownika, takich jak WinForms i klasyczne aplikacje Visual Basic.

Jak używać programu Spy++

Program Spy++ można uruchomić z Visual Studio lub wiersza polecenia dewelopera dla Visual Studio.

Aby uruchomić program Spy++ z Visual Studio:

• Upewnij się, że instalacja Visual Studio zawiera składnik podstawowe funkcje pulpitu C++ z obciążeniem Programowanie aplikacji komputerowych z użyciem C++. (Ta opcja jest instalowana domyślnie w programie Visual Studio 2026).
• Po zainstalowaniu program Spy++ jest dostępny z menu Narzędzia .
• Program Spy++ działa niezależnie od Visual Studio, co można zamknąć, jeśli nie jest już wymagane.

Aby uruchomić program Spy++ z poziomu wiersza polecenia dewelopera dla Visual Studio:

• Uruchom wiersz polecenia Developer dla Visual Studio z menu Windows Start.
• W wierszu polecenia wprowadź spyxx.exe (lub spyxx_amd64.exe dla wersji 64-bitowej) i naciśnij Enter.

Aby uzyskać bardziej szczegółowe informacje na temat używania programu Spy++ z Visual Studio, zobacz Spy++ Toolbar.

Możliwości programu Spy++

Program Spy++ wyświetla graficzne drzewo relacji między obiektami systemowymi z bieżącym oknem pulpitu w górnej części drzewa i węzłów podrzędnych reprezentujących wszystkie inne okna wymienione zgodnie ze standardową hierarchią okien. Może ona zapewnić cenny wgląd w zachowanie aplikacji, które nie jest dostępne za pośrednictwem debugera Visual C++.

Za pomocą programu Spy++ można wykonywać następujące czynności:

• Wyszukaj określone okna, wątki, procesy lub komunikaty.
• Wyświetlanie właściwości wybranych wątków procesów lub komunikatów.
• Wybierz okno, wątek, proces lub komunikat bezpośrednio w widoku drzewa.
• Użyj narzędzia wyszukiwania , aby wybrać okno za pomocą wskaźnika myszy (Wyszukiwanie —> okno wyszukiwania).
• Ustaw opcję komunikatu przy użyciu złożonego parametru wyboru dziennika komunikatów.

Aby uzyskać dokumentację programu Spy++, zobacz Spy++ Help (Pomoc dla programu Spy++).

Accessibility Insights for Windows — inspekcja na żywo

Accessibility Insights for Windows — Live Inspect to pobieralna aplikacja firmy Microsoft, która może ułatwić deweloperom znajdowanie i rozwiązywanie problemów z ułatwieniami dostępu w aplikacjach systemu Windows obsługujących UI Automation. Pomaga to deweloperom sprawdzić, czy element w aplikacji ma poprawne właściwości UI Automation po prostu po umieszczeniu kursora na elemenie lub ustawieniu fokusu klawiatury.

Kiedy używać Accessibility Insights – Live Inspect

Funkcja Live Inspect jest zwykle używana w połączeniu z dynamicznym drzewem wizualnym, programem Spy++i innymi narzędziami podczas tworzenia aplikacji z WinUI w Windows App SDK, WinUI for UWP for UWP, WPF, .NET MAUI, WinForms lub React Native for Desktop.

Jak używać Accessibility Insights: inspekcja na żywo

Szczegółowe informacje o ułatwieniach dostępu należy pobrać i zainstalować z sekcji Pobieranie szczegółowych informacji o ułatwieniach dostępu.

Możliwości szczegółowych informacji o ułatwieniach dostępu — inspekcja na żywo

Funkcja Live Inspect wyświetla graficzne drzewo relacji między obiektami systemowymi z okienkami szczegółów zawierającymi właściwości i wzorce UI Automation odpowiadające wybranemu elementowi. Bieżące okno pulpitu jest wyświetlane w górnej części drzewa, a węzły podrzędne reprezentują wszystkie inne okna, wymienione zgodnie ze standardową hierarchią okien.

Funkcja Live Inspect umożliwia:

• Sprawdź, czy element w aplikacji ma odpowiednie właściwości UI Automation po prostu umieszczając kursor na elemecie lub ustawiając na nim fokus klawiatury.
• Wizualnie wyróżnia elementy w aplikacji docelowej.
• Testowanie kontrolek lub wzorców przy użyciu ręcznych lub zautomatyzowanych kontroli zgodności z wieloma regułami i wytycznymi dotyczącymi ułatwień dostępu.

Aby dowiedzieć się więcej na temat UI Automation, zobacz UI Automation Overview (Omówienie

Aby dowiedzieć się więcej na temat szczegółowych informacji o ułatwieniach dostępu, zobacz Accessibility Insights for Windows (Szczegółowe informacje o ułatwieniach dostępu dla systemu Windows)

Narzędzia programistyczne interfejsu użytkownika Chromium dla Windows

Chromium UI DevTools for Windows to narzędzie Google, które umożliwia inspekcję systemu interfejsu użytkownika, podobnie jak stronę internetową, za pomocą narzędzia DevTools Inspector dla frontend.

Kiedy należy używać narzędzi DevTools interfejsu użytkownika Chromium dla systemu Windows

Użyj Chrome DevTools, jeśli opracowujesz projekt Chromium, w tym progresywne aplikacje internetowe lub aplikacje desktopowe Electron. Aby uzyskać więcej informacji na temat elektronów, zobacz rozszerzenie DevTools w GitHub.

Jak używać DevTools dla interfejsu użytkownika Chromium w systemie Windows

Narzędzie Chromium UI DevTools dla bazy kodu Chromium dla Windows musi zostać pobrane z GitHub i skompilowane za pomocą Visual Studio. Aby uzyskać więcej informacji, zobacz Omówienie DevTools UI.

Możliwości narzędzi DevTools interfejsu użytkownika Chromium dla systemu Windows

Interfejs użytkownika Chromium UI DevTools dla systemu Windows używa frontonu strony internetowej do wyświetlania i przechodzenia widoków, okien i innych elementów interfejsu użytkownika.

Za pomocą DevTools interfejsu użytkownika Chromium dla Windows można wykonywać następujące czynności:

• Użyj hierarchicznego drzewa elementów interfejsu użytkownika, aby sprawdzić elementy interfejsu użytkownika i ich właściwości.
• Użyj trybu Inspekcja, który wyróżnia element interfejsu użytkownika po umieszczeniu na nim wskaźnika myszy i wyświetla węzły elementu w drzewie elementów interfejsu użytkownika.
• Użyj panelu Elementy, aby otworzyć pasek wyszukiwania i znaleźć element w drzewie elementów interfejsu użytkownika przy użyciu właściwości nazwy, tagu i stylu.
• Użyj panelu Źródła, aby otworzyć plik nagłówka klasy w wyszukiwaniu kodu Chromium i ściągnąć kod z plików lokalnych.

Treści powiązane