Välj rätt visuell trädsnavigator för din Windows-app

Ett visuell trädvy, även kallad UI-visualiserare, är ett verktyg som används för att inspektera och interagera med gränssnittskomponenter i en Windows-app under körning.

Detta kan vara användbart för prototyper, förbättra användarupplevelser och felsöka problem med användargränssnittet via funktioner som visning och bläddring av komponenthierarki, komponentmarkering, hämtar och anger tillstånd och djuplänkning till associerad kod.

Rekommenderade verktyg

I följande tabell identifieras flera visualiseringsverktyg för användargränssnittet och de gränssnittsramverk och Windows app plattformar som de stöder. En sammanfattning av varje verktyg finns efter tabellen.

Visual Studio – Levande visuellt träd

Funktionerna Live Visual Tree och Live Property Explorer levereras med Visual Studio och fungerar tillsammans för att ge en interaktiv körningsvy över användargränssnittselementen i din app.

När du ska använda Live Visual Tree

Använd dessa verktyg när du skapar appar med WinUI 3 i Windows App SDK, WinUI för UWP för UWP, WPF, .NET MAUI, WinForms, eller React Native för Desktop.

• Mer information om WinUI och WPF finns i Granska XAML-egenskaper vid felsökning.

Hur man använder Live Visual Tree

XAML Hot Reload måste vara aktiverat för att visa live-visualiseringsträdet (den här funktionen är aktiverad som standard i Visual Studio 2019 och senare).

Kontrollera om XAML-Hot Reload är aktiverat genom att köra appen med det Visual Studio felsökningsprogrammet (F5 eller Debug -> Starta felsökning). När appen startar bör du se verktygsfältet i appen, som bekräftar att XAML-Hot Reload är tillgängligt (som visas i följande bild).

Om du inte ser verktygsfältet i appen väljer du Debug > Alternativ > XAML Hot Reload från Visual Studio menyraden. I dialogrutan Options kontrollerar du att alternativet Enable XAML Hot Reload är markerat.

När appen körs i felsökningskonfigurationen (med felsökningsprogrammet kopplat) går du till menyraden Visual Studio (Debug > Windows > Live Visual Tree). Då öppnas fönstret Levande visuellt träd med en realtidsvy över din XAML-kod.

Som standard är alternativet Just My XAML för Live Visual Tree valt. Detta ger en förenklad vy över XAML-elementsamlingen i din app och kan aktiveras eller inaktiveras via knappen Visa bara min XAML enligt följande bild.

Funktioner i levande visuellt träd

Verktygsfältet Live Visual Tree innehåller flera alternativ för att välja element som ska undersökas via programmets användargränssnitt vid körning.

• Välj Element i programmet som körs. När du väljer ett gränssnittselement i programmet med det här läget på, uppdateras live-visualiseringsträdet automatiskt för att visa noden och dess egenskaper i trädet som motsvarar det elementet.

  

• Visa dekorativa layoutkomponenter i det körande programmet. Med det här läget aktiverat visar programfönstret vågräta och lodräta linjer längs gränserna för ett markerat objekt och en rektangel som visar marginalerna.

  

• Förhandsgranskningsval. Med det här läget på visar Visual Studio XAML där elementet deklareras (om du har access till programmets källkod).

  

Spy++

Spy++ (SPYXX.EXE) är ett Win32-baserat verktyg som levereras med Visual Studio och ger en grafisk vy över systemets processer, trådar, fönster och fönstermeddelanden.

När du ska använda Spy++

Använd Spy++ när du skapar ett klassiskt Win32-program eller ett som använder Win32-API:er för att rita dess användargränssnittselement, till exempel WinForms och Classic Visual Basic-appar.

Så här använder du Spy++

Spy++ kan startas från antingen Visual Studio eller Developer Command Prompt för Visual Studio.

Så här startar du Spy++ från Visual Studio:

• Kontrollera att din Visual Studio-installation innehåller komponenten för C++ core desktop-funktioner från Desktop-utveckling med C++-arbetsytan. (Detta installeras som standard med Visual Studio 2026.)
• När det är installerat är Spy++ tillgängligt från verktygsmenyn .
• Spy++ körs oberoende av Visual Studio, som kan stängas om det inte längre behövs.

Så här startar du Spy++ från Kommandotolken för utvecklare för Visual Studio:

• Starta Developer Command Prompt för Visual Studio från Windows Start-menyn.
• I kommandotolken anger du spyxx.exe (eller spyxx_amd64.exe för 64-bitarsversionen) och trycker på Retur.

Mer specifik information om hur du använder Spy++ från Visual Studio finns i Spy++ Toolbar.

Funktioner i Spy++

Spy++ visar ett grafiskt träd med relationer mellan systemobjekt, med det aktuella skrivbordsfönstret överst i trädet och underordnade noder som representerar alla andra fönster som anges enligt standardfönsterhierarkin. Det kan ge värdefull insikt i ett programs beteende som inte är tillgängligt via Felsökningsprogrammet för Visual C++.

Med Spy++ kan du:

• Sök efter specifika fönster, trådar, processer eller meddelanden.
• Visa egenskaperna för valda trådar processer eller meddelanden.
• Välj ett fönster, en tråd, en process eller ett meddelande direkt i trädvyn.
• Använd finder-verktyget för att välja ett fönster med hjälp av muspekaren (Sök –> Sök fönster).
• Ange ett meddelandealternativ med hjälp av en komplex parameter för val av meddelandelogg.

Dokumentation om Spy++ finns i Hjälp om Spy++.

Tillgänglighetsinsikter för Windows – Live-inspektion

Accessibility Insights för Windows – Live Inspect är ett nedladdningsbart Microsoft-program som kan hjälpa utvecklare att hitta och åtgärda hjälpmedelsproblem i Windows-appar som stöder UI Automation. Det hjälper utvecklare att kontrollera att ett element i en app har rätt UI Automation egenskaper genom att hovra över elementet eller ställa in tangentbordsfokus på det.

När du ska använda Accessibility Insights – Live Inspect

Live Inspect används vanligtvis tillsammans med Live Visual Tree, Spy++och andra verktyg när du skapar appar med WinUI i Windows App SDK, WinUI för UWP för UWP, WPF, .NET MAUI, WinForms eller React Native for Desktop.

Så här använder du Tillgänglighetsinsikt: Live-inspektion

Hjälpmedelsinsikter måste laddas ned och installeras från Ladda ned Hjälpmedelsinsikter.

Funktioner i Hjälpmedelsinsikter – Direktinspektion

Live Inspect visar ett grafiskt träd med relationer mellan systemobjekt med informationsfönster som innehåller de UI Automation egenskaper och mönster som motsvarar det valda elementet. Det aktuella skrivbordsfönstret visas överst i trädet och barnnoder som representerar alla andra fönster som listas enligt standardfönsterhierarkin.

Med Live Inspect kan du:

• Kontrollera att ett element i en app har rätt UI Automation egenskaper genom att hovra över elementet eller ställa in tangentbordsfokus på det.
• Markerar element i målprogrammet visuellt.
• Testa kontroller eller mönster med manuella eller automatiserade kontroller för efterlevnad av många hjälpmedelsregler och riktlinjer.

Mer information om UI Automation finns i UI Automation Overview.

Mer information om Hjälpmedelsinsikter finns i Hjälpmedelsinsikter för Windows

Chromium UI DevTools för Windows

Chromium UI DevTools for Windows är ett verktyg från Google som gör att du kan inspektera användargränssnittssystemet som en webbsida med hjälp av devtools-inspektören på klientsidan.

När du ska använda Chromium UI DevTools för Windows

Använd Chrome UI DevTools om du utvecklar ett Chromium-projekt, inklusive progressiva webbappar eller Electron-skrivbordsappar. Mer information om Electron finns i tillägget DevTools på GitHub.

Använda Chromium UI DevTools för Windows

Chromium UI DevTools för Windows-kodbasen måste laddas ned från GitHub och skapas med Visual Studio. Mer information finns i Översikt över användargränssnittet DevTools.

Funktioner i Chromium UI DevTools för Windows

Chromium UI DevTools för Windows använder en webbsidas klientdel för att visa och bläddra i vyer, fönster och andra gränssnittselement.

Med Chromium UI DevTools för Windows kan du:

• Använd ett hierarkiskt gränssnittselementträd för att inspektera gränssnittselement och deras egenskaper.
• Använd Granska läge, som markerar ett användargränssnittselement när du hovrar över det och visar elementets noder i UI-elementträdet.
• Använd panelen Element för att öppna ett sökfält och hitta ett element i UI-elementträdet med hjälp av egenskaper för namn, tagg och format.
• Använd panelen Källor för att öppna klasshuvudfilen i Chromium-kodsökningen och hämta koden från lokala filer.

Relaterat innehåll