Choisissez la visionneuse d’arborescence visuelle appropriée pour votre Windows app

Une visionneuse d’arborescence visuelle, également appelée visualiseur d’interface utilisateur, est un outil utilisé pour inspecter et interagir avec les composants de l’interface utilisateur dans un Windows app au moment de l’exécution.

Cela peut être utile pour le prototypage, l’amélioration de l’expérience utilisateur et le débogage des problèmes d’interface utilisateur via des fonctionnalités telles que l’affichage et la traversée de la hiérarchie des composants, la mise en surbrillance des composants, l’obtention et la définition de l’état et la liaison approfondie au code associé.

Outils recommandés

Le tableau suivant identifie plusieurs outils de visualisation d'IU, ainsi que les cadres d’interface utilisateur et les plateformes Windows d'applications qu'ils supportent. Vous trouverez un résumé de chaque outil après le tableau.

Plateforme/infrastructure de l’interface utilisateur	Visual Studio - Live Visual Tree	Spy++	Insights sur l’accessibilité	DevTools de l’interface utilisateur Chromium
WinUI dans le Windows App SDK	Supported	Non prise en charge	Supported	Non prise en charge
WPF	Supported	Non prise en charge	Supported	Non prise en charge
React Native pour Desktop	Supported	Non prise en charge	Supported	Supported
.NET MAUI	Supported	Non prise en charge	Supported	Non prise en charge
WinForms	Supported	Supported	Supported	Non prise en charge
WinUI pour UWP pour UWP	Supported	Non prise en charge	Supported	Non prise en charge
applications Classic Visual Basic	Non prise en charge	Supported	Non prise en charge	Non prise en charge
Applications Win32 classiques	Non prise en charge	Supported	Non prise en charge	Non prise en charge
Applications basées sur Chromium	Non prise en charge	Non prise en charge	Non prise en charge	Supported

Visual Studio - Arborescence visuelle dynamique

Les fonctionnalités Live Visual Tree et Live Property Explorer sont fournies avec des Visual Studio et fonctionnent en tandem pour fournir une vue d’exécution interactive des éléments d’interface utilisateur dans votre application.

Quand utiliser l’arborescence visuelle dynamique

Utilisez ces outils pour créer des applications avec WinUI 3 dans le Windows App SDK, WinUI pour UWP pour UWP, WPF, .NET MAUI, WinForms, ou React Native for Desktop.

• Pour plus d'informations sur WinUI dans le Windows App SDK, WinUI pour UWP et WPF, consultez Inspecter les propriétés XAML lors du débogage.
• Pour plus d’informations sur .NET MAUI, consultez Inspecter l’arborescence visuelle d’une application .NET MAUI.

Note

Le visualiseur d’arborescences WPF est une fonctionnalité héritée et n’est pas en développement actif. Vous pouvez utiliser le visualiseur WPF Tree pour explorer l’arborescence visuelle d’un objet WPF et afficher les propriétés de dépendance WPF pour les objets contenus dans cette arborescence.

Comment utiliser l'arborescence visuelle en direct

XAML Hot Reload devez être activé pour afficher l’arborescence visuelle dynamique (cette fonctionnalité est activée par défaut dans Visual Studio 2019 et versions ultérieures).

Pour vérifier si le Hot Reload XAML est activé, exécutez votre application avec le débogueur Visual Studio attaché (F5 ou Debug -> Démarrer le débogage). Au démarrage de l’application, vous devez voir la barre d’outils dans l’application, qui confirme que le Hot Reload XAML est disponible (comme illustré dans l’image suivante).

Si vous ne voyez pas la barre d'outils dans l'application, sélectionnez Debug > Options > XAML Hot Reload dans la barre de menus Visual Studio. Dans la boîte de dialogue Options, vérifiez que l’option XAML Enable XAML Hot Reload est sélectionnée.

Une fois que votre application s’exécute dans la configuration du débogage (avec le débogueur attaché), accédez à la barre de menus Visual Studio (Debug > Windows > Live Visual Tree). Cela ouvre le volet Arborescence des visuels en direct avec une vue en temps réel de votre code XAML.

Par défaut, l’option Just My XAML pour l’arborescence de visuels en direct est sélectionnée. Cela fournit une vue simplifiée de la collection d’éléments XAML dans votre application et peut être activée ou désactivée via le bouton Afficher uniquement mon code XAML , comme illustré dans l’image suivante.

Fonctionnalités de l'arborescence visuelle en temps réel

La barre d’outils De l’arborescence visuelle dynamique fournit plusieurs options permettant de sélectionner des éléments à examiner via l’interface utilisateur de votre application au moment de l’exécution.

• Sélectionnez l’élément dans l’application en cours d’exécution. Avec ce mode activé, lorsque vous sélectionnez un élément d’interface utilisateur dans l’application, l’arborescence visuelle dynamique est automatiquement mise à jour pour afficher le nœud et ses propriétés dans l’arborescence correspondant à cet élément.

  

• Afficher les adornements de mise en page dans l’application en cours d'exécution. Avec ce mode activé, la fenêtre d’application affiche des lignes horizontales et verticales le long des limites d’un objet sélectionné et d’un rectangle décrivant ses marges.

  

• Sélection d’aperçu. Avec ce mode activé, Visual Studio affiche le code XAML où l’élément est déclaré (si vous avez access au code source de l’application).

  

Spy++

Spy++ (SPYXX.EXE) est un utilitaire Win32 fourni avec Visual Studio et fournit une vue graphique des processus, threads, fenêtres et messages de fenêtre du système.

Quand utiliser Spy++

Utilisez Spy++ lors de la création d’une application Win32 classique ou d’une application qui utilise des API Win32 pour dessiner ses éléments d’interface utilisateur, tels que WinForms et Classic Visual Basic applications.

Note

Pour .NET applications framework, Spy++ est d'une utilité limitée, car les messages et classes de fenêtre interceptés par Spy++ ne correspondent pas aux événements managés et aux valeurs de propriété.

Comment utiliser Spy++

Spy++ peut être démarré à partir de Visual Studio ou de l'invite de commandes pour développeur de Visual Studio.

Pour démarrer Spy++ à partir de Visual Studio :

• Vérifiez que votre installation de Visual Studio inclut le composant fonctionnalités de base du bureau C++ dans la charge de travail développement de bureau avec C++. (Cette option est installée par défaut avec Visual Studio 2022.)
• Une fois installé, Spy++ est disponible dans le menu Outils .
• Spy++ s’exécute indépendamment de Visual Studio, ce qui peut être fermé s’il n’est plus nécessaire.

Pour démarrer Spy++ à partir de l'Invite de commandes Développeur pour Visual Studio :

• Lancez l'invite de commandes pour développeur de Visual Studio à partir du menu Windows Démarrer.
• À l’invite de commandes, entrez spyxx.exe (ou spyxx_amd64.exe pour la version 64 bits) et appuyez sur Entrée.

Pour plus d’informations sur l’utilisation de Spy++ à partir de Visual Studio, consultez Spy++ Toolbar.

Fonctionnalités de Spy++

Spy++ affiche une arborescence graphique de relations entre les objets système, avec la fenêtre de bureau actuelle en haut de l’arborescence et des nœuds enfants représentant toutes les autres fenêtres répertoriées en fonction de la hiérarchie de fenêtre standard. Il peut fournir des informations précieuses sur le comportement d’une application qui n’est pas disponible via le débogueur Visual C++.

Avec Spy++, vous pouvez :

• Recherchez des fenêtres, des threads, des processus ou des messages spécifiques.
• Affichez les propriétés des processus ou messages des threads sélectionnés.
• Sélectionnez une fenêtre, un thread, un processus ou un message directement dans l’arborescence.
• Utilisez l’outil Finder pour sélectionner une fenêtre à l’aide du pointeur de la souris (Recherche -> Fenêtre rechercher).
• Définissez une option de message à l’aide d’un paramètre de sélection complexe du journal des messages.

Pour obtenir de la documentation Spy++, consultez l’aide de Spy++.

Aperçu de l'accessibilité pour Windows - Inspection en temps réel

Accessibility Insights pour Windows - Live Inspect est une application Microsoft téléchargeable qui peut aider les développeurs à trouver et résoudre les problèmes d’accessibilité dans les applications Windows qui prennent en charge UI Automation. Il permet aux développeurs de vérifier qu’un élément d’une application a les propriétés de UI Automation correctes simplement en pointant sur l’élément ou en définissant le focus clavier sur celui-ci.

Quand utiliser Accessibility Insights - Live Inspect

Live Inspect est généralement utilisé conjointement avec Live Visual Tree, Spy++ et d’autres outils lors de la création d’applications avec WinUI dans le Windows App SDK, WinUI pour UWP pour UWP, WPF, .NET MAUI, WinForms ou React Native for Desktop.

Comment utiliser Accessibility Insights - Live Inspect

Accessibility Insights doit être téléchargé et installé à partir de Download Accessibility Insights.

Fonctionnalités d’Insights sur l’accessibilité - Live Inspect

Live Inspect affiche une arborescence graphique de relations entre les objets système avec des volets de détails contenant les propriétés et les modèles UI Automation correspondant à l’élément sélectionné. La fenêtre du bureau actuelle est affichée en haut de l'arborescence, et des nœuds enfants représentent toutes les autres fenêtres selon la hiérarchie standard des fenêtres.

Avec Live Inspect, vous pouvez :

• Vérifiez qu’un élément d’une application a la bonne UI Automation propriétés simplement en pointant sur l’élément ou en définissant le focus clavier dessus.
• Met en surbrillance visuellement les éléments de l’application cible.
• Testez des contrôles ou des modèles avec des contrôles manuels ou automatisés pour la conformité à de nombreuses règles d’accessibilité et recommandations.

Pour en savoir plus sur UI Automation, consultez UI Automation Vue d’ensemble.

Pour en savoir plus sur Les insights d’accessibilité, consultez Insights d’accessibilité pour Windows

DevTools de l’interface utilisateur Chromium pour Windows

Chromium UI DevTools pour Windows est un outil de Google qui vous permet d’inspecter le système d’interface utilisateur comme une page web à l’aide de l’inspecteur DevTools frontend.

Quand utiliser Chromium UI DevTools pour Windows

Utilisez Chrome UI DevTools si vous développez un projet Chromium, y compris des applications web progressives ou des applications de bureau Electron. Pour plus d’informations sur Electron, consultez l’extension DevTools sur GitHub.

Comment utiliser Chromium UI DevTools pour Windows

Les DevTools de l'interface utilisateur Chromium pour Windows doivent être téléchargés à partir de GitHub et compilés avec Visual Studio. Pour plus d’informations, consultez la vue d’ensemble de l’interface utilisateur DevTools.

Fonctionnalités de Chromium UI DevTools pour Windows

Chromium UI DevTools pour Windows utilise un front-end de page web pour afficher et parcourir des vues, des fenêtres et d’autres éléments d’interface utilisateur.

Avec Chromium UI DevTools pour Windows, vous pouvez :

• Utilisez une arborescence d’éléments d’interface utilisateur hiérarchique pour inspecter les éléments d’interface utilisateur et leurs propriétés.
• Utilisez le mode Inspect, qui met en surbrillance un élément d’interface utilisateur lorsque vous pointez dessus et révèle les nœuds de l’élément dans l’arborescence des éléments d’interface utilisateur.
• Utilisez le panneau Éléments pour ouvrir une barre de recherche et rechercher un élément dans l’arborescence d’éléments de l’interface utilisateur à l’aide des propriétés nom, balise et style.
• Utilisez le panneau Sources pour ouvrir le fichier d’en-tête de classe dans la recherche de code Chromium et extraire le code à partir de fichiers locaux.

Contenu connexe