通过

为 Windows 应用选择正确的可视化树查看器

可视化树查看器（也称为 UI 可视化工具）是一种工具，用于在运行时检查和与 Windows 应用中的 UI 组件进行交互。

这有助于原型制作、改进用户体验，以及通过查看和遍历组件层次结构、组件突出显示、获取和设置状态以及关联代码的深层链接等功能调试 UI 问题。

下表标识了多个 UI 可视化工具以及它们支持的 UI 框架和 Windows 应用平台。 可以在表后找到每个工具的摘要。

UI 平台/框架 Visual Studio - 实时可视化树 Spy++ 辅助功能见解 Chromium UI DevTools
Windows 应用 SDK 中的 WinUI Supported 不支持 Supported 不支持
WPF Supported 不支持 Supported 不支持
React Native 桌面版 Supported 不支持 Supported Supported
.NET MAUI Supported 不支持 Supported 不支持
WinForms Supported Supported Supported 不支持
适用于 UWP 的 WinUI 2 Supported 不支持 Supported 不支持
经典 Visual Basic 应用 不支持 Supported 不支持 不支持
经典 Win32 应用 不支持 Supported 不支持 不支持
基于 Chromium 的应用 不支持 不支持 不支持 Supported

Visual Studio - 实时可视化树

实时可视化树和实时属性资源管理器功能随 Visual Studio 一起提供，并协同工作，提供应用中 UI 元素的交互式运行时视图。

何时使用实时可视化树

在 Windows 应用 SDK、适用于 UWP 的 WinUI 2、WPF、.NET MAUI、WinForms 或 React Native for Desktop 中使用这些工具。

注释

WPF 树可视化工具是一项旧功能，不在活动开发中。 可以使用 WPF 树可视化工具浏览 WPF 对象的可视化树，并查看该树中包含的对象的 WPF 依赖项属性。

如何使用实时可视化树

必须启用 XAML 热重载才能查看实时可视化树（此功能在 Visual Studio 2019 及更高版本中默认启用）。

若要检查 XAML 热重载是否已启用，请使用附加的 Visual Studio 调试器运行应用（F5 或 调试 -> 启动调试）。 应用启动时，应会看到应用内工具栏，它确认 XAML 热重载可用（如下图所示）。

Visual Studio 应用内调试工具栏的屏幕截图。

如果未看到应用内工具栏，请从 Visual Studio 菜单栏中选择 调试> 选项> XAML 热重载。 在“ 选项 ”对话框中，确保已选择 “启用 XAML 热重载 ”选项。

Visual Studio 调试选项对话框的屏幕截图，其中突出显示了“启用 XAML 热重载”。

应用在调试配置中运行（附加调试器后），导航到 Visual Studio 菜单栏（调试 > Windows > Live Visual Tree）。 这会打开实时可视化树窗格，提供 XAML 代码的实时视图。

默认情况下，实时可视化树的 Just My XAML 选项被选中。 这提供了应用中 XAML 元素集合的简化视图，可通过“ 显示仅我的 XAML ”按钮打开或关闭，如下图所示。

Visual Studio Live Visual Tree 的屏幕截图，其中启用了“仅我的 Xaml”选项。

实时可视化树的功能

实时可视化树工具栏提供了多个选项，用于在运行时选择要通过应用程序的 UI 检查的元素。

  • 在正在运行的应用程序中选择元素。 启用此模式后，在应用程序中选择 UI 元素时，实时可视化树会自动更新以显示节点及其与该元素对应的树中的属性。

    Visual Studio 实时可视化树的屏幕截图，其中启用了“选择正在运行的应用程序中的元素”选项。

  • 在正在运行的应用程序中显示布局装饰器。 启用此模式后，应用程序窗口沿所选对象的边界显示水平和垂直线条，并显示其边距的矩形。

    Visual Studio Live Visual Tree 的屏幕截图，其中启用了“正在运行的应用程序”选项中的显示布局装饰器。

  • 预览选择。 在此模式下，Visual Studio 会显示声明元素的 XAML（如果有权访问应用程序源代码）。

    Visual Studio Live Visual Tree 的屏幕截图，其中启用了“预览”选择选项。

Spy++

Spy++ （SPYXX.EXE） 是基于 Win32 的实用工具，随 Visual Studio 一起提供，并提供系统进程、线程、窗口和窗口消息的图形视图。

何时使用 Spy++

生成经典 Win32 应用程序或使用 Win32 API 绘制其 UI 元素（如 WinForms 和 经典 Visual Basic 应用）时，请使用 Spy++。

注释

对于 .NET Framework 应用，Spy++ 的用途有限，因为 Spy++ 截获的窗口消息和类与托管事件和属性值不相对应。

如何使用 Spy++

Spy++ 可以从 Visual Studio 或 Visual Studio 的开发人员命令提示符启动。

若要从 Visual Studio 启动 Spy++，请执行以下作：

  • 确认您的 Visual Studio 安装中包含使用 C++ 的桌面开发工作负载中的C++ 核心桌面功能组件。 （默认情况下随 Visual Studio 2022 一起安装。）Visual Studio 安装程序的屏幕截图，其中选中了桌面开发 C++ 卡，并突出显示了 C++ 核心桌面功能的安装状态。
  • 安装后，Spy++ 可从 “工具” 菜单获取。
  • Spy++ 独立于 Visual Studio 运行，如果不再需要，则可以将其关闭。

若要从 Visual Studio 的开发人员命令提示符处启动 Spy++：

  • 从 Windows“开始”菜单启动 Visual Studio 的开发人员命令提示符。 Windows“开始”菜单的屏幕截图，其中突出显示了 VS 2022 的开发人员命令提示符。
  • 在命令提示符处，输入 spyxx.exe（或 spyxx_amd64.exe 64 位版本），然后按 Enter。

有关如何从 Visual Studio 使用 Spy++ 的更具体信息，请参阅 Spy++ 工具栏。

Spy++ 的功能

Spy++ 显示系统对象之间的关系的图形树，树顶部的当前桌面窗口和子节点表示根据标准窗口层次结构列出的所有其他窗口。 它可以提供对无法通过 Visual C++ 调试器提供的应用程序行为的宝贵见解。

Spy++ 应用程序窗口的屏幕截图。

使用 Spy++ 可以：

  • 搜索特定的窗口、线程、进程或消息。
  • 查看所选线程进程或消息的属性。
  • 直接在树视图中选择窗口、线程、进程或消息。
  • 使用 查找器工具 使用鼠标指针（搜索 -> 查找窗口）选择窗口。 Spy++ 查找窗口对话框的屏幕截图。
  • 使用复杂的消息日志选择参数设置消息选项。

有关 Spy++ 文档，请参阅 Spy++ 帮助。

适用于 Windows 的辅助功能见解 - 实时检查

Windows 辅助功能洞察 - 实时检查 是一个可下载的 Microsoft 应用程序，帮助开发者在支持 UI 自动化的 Windows 应用中查找和修复辅助功能问题。 它帮助开发人员验证应用中的元素是否具有正确的 UI 自动化属性，只需将鼠标悬停在元素上或设置键盘焦点即可。

何时使用辅助功能见解 - 实时检查

在 Windows 应用 SDK、WinUI 2 for UWP、WPF、.NET MAUI、WinForms 或 React Native for Desktop 中使用 WinUI 生成应用时，Live Inspect 通常与实时可视化树、Spy++和其他工具结合使用。

如何使用「Accessibility Insights - Live Inspect」

必须从 “下载辅助功能见解”下载和安装辅助功能见解。

辅助功能见解 - 实时检查

Live Inspect 显示系统对象之间的图形关系树，其中包含与所选元素对应的 UI 自动化属性和模式的详细信息窗格。 当前桌面窗口显示在树的顶部，子节点表示根据标准窗口层次结构列出的所有其他窗口。

使用实时检查，你可以：

  • 只需将鼠标悬停在元素上或设置键盘焦点，即可验证应用中的元素是否具有正确的 UI 自动化属性。
  • 直观地突出显示目标应用程序中的元素。
  • 使用手动或自动检查来测试控件或模式是否符合众多辅助功能规则和准则。

基本目标应用旁边的辅助功能检查工具的屏幕截图。

若要了解有关 UI 自动化的详细信息，请参阅 UI 自动化概述。

若要了解有关辅助功能见解的详细信息，请参阅 适用于 Windows 的辅助功能见解

适用于 Windows 的 Chromium UI DevTools

Chromium UI DevTools for Windows 是 Google 提供的一种工具，可用于使用前端 DevTools 检查器检查 UI 系统（如网页）。

何时使用 Chromium UI DevTools for Windows

如果要开发 Chromium 项目（包括渐进式 Web 应用或 Electron 桌面应用），请使用 Chrome UI DevTools。 有关 Electron 的详细信息，请参阅 GitHub 上的 DevTools 扩展 。

如何使用 Chromium UI DevTools for Windows

必须从 GitHub 下载 Chromium UI DevTools for Windows 代码库，并使用 Visual Studio 生成。 有关详细信息，请参阅 UI DevTools 概述。

适用于 Windows 的 Chromium UI DevTools 的功能

Chromium UI DevTools for Windows 使用网页前端来显示和遍历视图、窗口和其他 UI 元素。

使用 Chromium UI DevTools for Windows，可以：

  • 使用分层 UI 元素树检查 UI 元素及其属性。
  • 使用“检查”模式，当鼠标悬停在 UI 元素上时，突出显示该元素，并在 UI 元素树中展示该元素的节点。
  • 使用“元素”面板打开搜索栏，并使用名称、标记和样式属性在 UI 元素树中查找元素。
  • 使用“源”面板在 Chromium 代码搜索中打开类头文件，并从本地文件拉取代码。

相关内容

  • Last updated on