Wybieranie odpowiedniej przeglądarki drzewa wizualnego dla aplikacji systemu Windows

Przeglądarka drzewa wizualnego, znana również jako wizualizator interfejsu użytkownika, to narzędzie służące do sprawdzania składników interfejsu użytkownika i interakcji z nimi w aplikacji systemu Windows w czasie wykonywania.

Może to być przydatne do tworzenia prototypów, ulepszania środowiska użytkownika i debugowania problemów z interfejsem użytkownika za pomocą funkcji, takich jak wyświetlanie i przechodzenie przez hierarchię składników, wyróżnianie składników, pobieranie i ustawianie stanu oraz głębokie linkowanie do skojarzonego kodu.

Zalecane narzędzia

W poniższej tabeli przedstawiono kilka narzędzi do wizualizacji interfejsu użytkownika oraz obsługiwane przez nie struktury interfejsu użytkownika i platformy aplikacji systemu Windows. Podsumowanie każdego narzędzia można znaleźć po tabeli.

Platforma/struktura interfejsu użytkownika	Visual Studio — dynamiczne drzewo wizualne	Spy++	Statystyki ułatwień dostępu	Chromium UI DevTools
WinUI w zestawie SDK aplikacji systemu Windows	Wspierane	Niewspierane	Wspierane	Niewspierane
WPF	Wspierane	Niewspierane	Wspierane	Niewspierane
React Native dla komputerów stacjonarnych	Wspierane	Niewspierane	Wspierane	Wspierane
.NET MAUI	Wspierane	Niewspierane	Wspierane	Niewspierane
Windows Forms	Wspierane	Wspierane	Wspierane	Niewspierane
WinUI 2 dla platformy UWP	Wspierane	Niewspierane	Wspierane	Niewspierane
Klasyczne aplikacje Visual Basic	Niewspierane	Wspierane	Niewspierane	Niewspierane
Klasyczne aplikacje Win32	Niewspierane	Wspierane	Niewspierane	Niewspierane
Aplikacje oparte na Chromium	Niewspierane	Niewspierane	Niewspierane	Wspierane

Visual Studio — dynamiczne drzewo wizualne

Funkcje Live Visual Tree i Live Property Explorer są dostarczane z programem Visual Studio i współpracują ze sobą, 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 za pomocą interfejsu WinUI w zestawie SDK aplikacji systemu Windows, WinUI 2 dla platformy UWP, WPF, .NET MAUI,WinForms lub React Native dla komputerów stacjonarnych.

• Aby uzyskać więcej informacji na temat interfejsu WinUI w zestawie SDK aplikacji systemu Windows, WinUI 2 dla platformy UWP i WPF, zobacz Sprawdzanie właściwości XAML podczas debugowania.
• Aby uzyskać więcej informacji na temat programu .NET MAUI, zobacz Sprawdzanie drzewa wizualnego aplikacji MAUI platformy .NET.

Uwaga / Notatka

Wizualizator drzewa WPF jest starszą funkcją i nie jest aktywnie rozwijany. Za pomocą wizualizatora drzewa WPF można eksplorować drzewo wizualne obiektu WPF i wyświetlać właściwości zależności WPF dla obiektów, które są zawarte w tym drzewie.

Jak korzystać z Live Visual Tree

Przeładowywanie kodu XAML na gorąco musi być włączone, aby można było wyświetlić dynamiczne drzewo wizualne (ta funkcja jest domyślnie włączona w programie Visual Studio 2019 i nowszych).

Aby sprawdzić, czy przeładowywanie kodu XAML na gorąco jest włączone, uruchom aplikację z dołączonym debugerem programu Visual Studio (F5 lub Debugowanie —> Rozpocznij debugowanie). Po uruchomieniu aplikacji powinien zostać wyświetlony pasek narzędzi w aplikacji, który potwierdza, że przeładowywanie kodu XAML na gorąco jest dostępne (jak pokazano na poniższej ilustracji).

Jeśli nie widzisz paska narzędzi w aplikacji, wybierz pozycję Opcje > debugowania > Przeładowywanie kodu XAML na gorąco na pasku menu programu Visual Studio. W oknie dialogowym Opcje upewnij się, że jest zaznaczona opcja Włącz Przeładowywanie kodu XAML na gorąco .

Gdy aplikacja jest uruchomiona w konfiguracji debugowania (z dołączonym debugerem), przejdź do paska menu programu Visual Studio (Debugowanie > drzewa wizualnego Windows > Live). Spowoduje to otwarcie okienka Dynamiczne drzewo wizualne z widokiem kodu XAML w czasie rzeczywistym.

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

Możliwości drzewa wizualnego na żywo

Pasek narzędzi dynamicznego drzewa wizualnego udostępnia kilka opcji wybierania elementów do zbadania za pomocą interfejsu użytkownika aplikacji w czasie wykonywania.

• Wybierz element w uruchomionej aplikacji. Po włączeniu 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.

  

• Dekoratory układu wyświetlania w uruchomionej aplikacji. Gdy ten tryb jest włączony, w oknie aplikacji wyświetlane są poziome i pionowe linie wzdłuż granic zaznaczonego obiektu oraz prostokąt wyznaczający jego marginesy.

  

• Podgląd wyboru. Po włączeniu tego trybu program Visual Studio wyświetla kod XAML, w którym zadeklarowano element (jeśli masz dostęp do kodu źródłowego aplikacji).

  

Spy++

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

Kiedy używać programu Spy++

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

Uwaga / Notatka

W przypadku aplikacji .NET Framework program Spy++ ma ograniczoną przydatność, ponieważ komunikaty okien i klasy przechwycone przez program Spy++ nie odpowiadają zarządzanym zdarzeniom i wartościom właściwości.

Jak korzystać z programu Spy++

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

Aby uruchomić program Spy++ z poziomu programu Visual Studio:

• Upewnij się, że instalacja programu Visual Studio zawiera składnik podstawowych funkcji pulpitu języka C++ z obciążenia Programowanie aplikacji klasycznych w języku C++ . (Jest to instalowane domyślnie z programem Visual Studio 2022).
• Po zainstalowaniu program Spy++ jest dostępny w menu Narzędzia .
• Program Spy++ działa niezależnie od programu Visual Studio, który można zamknąć, jeśli nie jest już wymagany.

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

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

Aby uzyskać bardziej szczegółowe informacje na temat korzystania z programu Spy++ z programu Visual Studio, zobacz Spy++ Toolbar (Pasek narzędzi programu Spy++).

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łami podrzędnymi reprezentującymi wszystkie inne okna wymienione zgodnie ze standardową hierarchią okien. Może zapewnić cenny wgląd w zachowanie aplikacji, które nie jest dostępne za pośrednictwem debugera Visual C++.

Za pomocą programu Spy++ możesz:

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

Aby zapoznać się z dokumentacją programu Spy++, zobacz Pomoc programu Spy++.

Szczegółowe informacje o ułatwieniach dostępu dla systemu Windows — Live Inspect

Accessibility Insights for Windows - Live Inspect to dostępna do pobrania aplikacja firmy Microsoft, która może pomóc deweloperom w znajdowaniu i rozwiązywaniu problemów z ułatwieniami dostępu w aplikacjach systemu Windows obsługujących automatyzację interfejsu użytkownika. Pomaga deweloperom sprawdzić, czy element w aplikacji ma poprawne właściwości automatyzacji interfejsu użytkownika, po prostu umieszczając kursor na elemencie lub ustawiając na niego fokus klawiatury.

Kiedy używać usługi Accessibility Insights — Live Inspect

Live Inspect jest zwykle używany w połączeniu z Live Visual Tree, Spy++ i innymi narzędziami podczas tworzenia aplikacji za pomocą WinUI w zestawie SDK aplikacji systemu Windows, WinUI 2 dla platformy UWP, WPF, .NET MAUI,WinForms lub React Native dla komputerów stacjonarnych.

Jak korzystać z funkcji Accessibility Insights — Live Inspect

Aplikację Accessibility Insights należy pobrać i zainstalować ze strony Download Accessibility Insights.

Możliwości funkcji Accessibility Insights - Live Inspect

Live Inspect wyświetla graficzne drzewo relacji między obiektami systemowymi z panelami szczegółów zawierającymi właściwości i wzorce automatyzacji interfejsu użytkownika odpowiadające wybranemu elementowi. Bieżące okno pulpitu jest wyświetlane w górnej części drzewa i węzłów podrzędnych reprezentujących wszystkie inne okna wymienione zgodnie ze standardową hierarchią okien.

Dzięki Live Inspect możesz:

• Sprawdź, czy element w aplikacji ma odpowiednie właściwości automatyzacji interfejsu użytkownika, po prostu umieszczając kursor na elemencie lub ustawiając na nim fokus klawiatury.
• Wizualnie wyróżnia elementy w aplikacji docelowej.
• Testuj kontrolki lub wzorce za pomocą ręcznych lub automatycznych kontroli zgodności z licznymi regułami i wytycznymi dotyczącymi ułatwień dostępu.

Aby dowiedzieć się więcej na temat automatyzacji interfejsu użytkownika, zobacz Omówienie automatyzacji interfejsu użytkownika.

Aby dowiedzieć się więcej o usłudze Accessibility Insights, zobacz Accessibility Insights dla systemu Windows

Chromium UI DevTools dla systemu Windows

Chromium UI DevTools dla systemu Windows to narzędzie firmy Google, które pozwala sprawdzić system interfejsu użytkownika, taki jak strona internetowa, za pomocą frontendowego inspektora DevTools.

Kiedy używać narzędzi deweloperskich Chromium UI dla systemu Windows

Użyj narzędzi dla programistów interfejsu użytkownika Chrome, jeśli tworzysz projekt Chromium, w tym progresywne aplikacje internetowe lub aplikacje komputerowe Electron. Aby uzyskać więcej informacji na temat Electron, zobacz rozszerzenie DevTools w witrynie GitHub.

Jak korzystać z narzędzi deweloperskich Chromium UI dla systemu Windows

Baza kodu narzędzia deweloperskiego interfejsu użytkownika Chromium dla systemu Windows musi zostać pobrana z usługi GitHub i skompilowana za pomocą programu Visual Studio. Aby uzyskać więcej informacji, zobacz Omówienie narzędzi deweloperskich interfejsu użytkownika.

Możliwości narzędzi Chromium UI DevTools dla systemu Windows

Chromium UI DevTools dla systemu Windows używa frontonu strony internetowej do wyświetlania i przechodzenia przez widoki, okna i inne elementy interfejsu użytkownika.

Dzięki narzędziom deweloperskim Chromium UI dla systemu Windows możesz:

• Użyj hierarchicznego drzewa elementów interfejsu użytkownika, aby sprawdzić elementy interfejsu użytkownika i ich właściwości.
• Użyj trybu inspekcji, który podświetla element interfejsu użytkownika po najechaniu na niego kursorem i odsłania 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 za pomocą właściwości nazwy, znacznika i stylu.
• Użyj panelu Źródła, aby otworzyć plik nagłówkowy klasy w wyszukiwarce kodu Chromium i pobrać kod z plików lokalnych.

Treści powiązane