Choisir la visionneuse d’arborescence visuelle appropriée pour votre application Windows

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 une application Windows 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 de l’interface utilisateur et les infrastructures d’interface utilisateur et les plateformes d’application Windows qu’ils prennent en charge. Vous trouverez un résumé de chaque outil après le tableau.

Plateforme/infrastructure de l’interface utilisateur	Visual Studio - Arborescence visuelle en direct	Spy++	Insights sur l’accessibilité	DevTools de l’interface utilisateur Chromium
WinUI dans le Kit de développement logiciel (SDK) d’application Windows	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
MAUI .NET	Supported	Non prise en charge	Supported	Non prise en charge
WinForms	Supported	Supported	Supported	Non prise en charge
WinUI 2 pour UWP	Supported	Non prise en charge	Supported	Non prise en charge
Applications Visual Basic classiques	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 en temps réel

Les fonctionnalités Live Visual Tree et Live Property Explorer sont fournies avec 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 lors de la création d’applications avec WinUI dans le SDK d’application Windows, WinUI 2 pour UWP, WPF, .NET MAUI, WinForms ou React Native for Desktop.

• Pour plus d’informations sur WinUI dans le SDK d’application Windows, WinUI 2 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’arborescence WPF est une fonctionnalité héritée et n’est pas en développement actif. Vous pouvez utiliser le visualiseur d’arborescence WPF 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

Le rechargement à chaud XAML doit ê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 rechargement à chaud XAML est activé, exécutez votre application avec le débogueur Visual Studio attaché (F5 ou Débogage -> 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 rechargement à chaud XAML est disponible (comme illustré dans l’image suivante).

Si vous ne voyez pas la barre d’outils dans l’application, sélectionnez Déboguer > Options > Rechargement à chaud XAML dans la barre de menus de Visual Studio. Dans la boîte de dialogue Options , vérifiez que l’option Activer le rechargement à chaud XAML est sélectionnée.

Une fois que votre application est en cours d’exécution dans la configuration du débogage (avec le débogueur attaché), accédez à la barre de menus de Visual Studio (Déboguer > l’arborescence des visuels Windows > Live). 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 accès 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 Les applications WinForms et Visual Basic classiques.

Note

Pour les applications .NET Framework, Spy++ est d’une utilité limitée, car les messages de fenêtre et les classes 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éveloppeurs.

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

• Vérifiez que votre installation de Visual Studio inclut le composant de fonctionnalités de base de bureau C++ à partir du développement de bureau avec l'environnement de développement C++. (Celle-ci 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, qui peut être fermé s’il n’est plus nécessaire.

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

• Lancez l’invite de commande développeur de Visual Studio depuis le menu Démarrer de Windows.
• À 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 la barre d’outils Spy++.

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 for Windows - Live Inspect" est une application Microsoft téléchargeable qui permet aux développeurs de détecter et corriger les problèmes d'accessibilité dans les applications Windows compatibles avec UI Automation. Il permet aux développeurs de vérifier qu’un élément d’une application possède les propriétés 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 SDK d’application Windows, WinUI 2 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 les propriétés UI Automation appropriées 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 vue d’ensemble d’UI Automation.

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 codebase doivent être téléchargés à partir de GitHub et généré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