Поделиться через

Выберите подходящее средство просмотра визуального дерева для Windows app

Средство просмотра визуального дерева, также известное как визуализатор пользовательского интерфейса, используется для проверки и взаимодействия с компонентами пользовательского интерфейса в Windows app во время выполнения.

Это может быть полезно для создания прототипов, улучшения взаимодействия с пользователем и отладки проблем пользовательского интерфейса с помощью таких возможностей, как просмотр и обход иерархии компонентов, выделение компонентов, получение и настройка состояния, а также глубокое связывание с соответствующим кодом.

В следующей таблице определены несколько средств визуализации пользовательского интерфейса и платформ пользовательского интерфейса, а также платформы Windows app, которые они поддерживают. Сводка по каждому инструменту можно найти после таблицы.

Платформа/фреймворк пользовательского интерфейса Visual Studio — Дерево визуализации в реальном времени Spy++ Инсайты по доступности Chromium UI DevTools
WinUI в Windows App SDK Supported Не поддерживается Supported Не поддерживается
WPF Supported Не поддерживается Supported Не поддерживается
React Native для desktop Supported Не поддерживается Supported Supported
.NET MAUI Supported Не поддерживается Supported Не поддерживается
WinForms Supported Supported Supported Не поддерживается
WinUI для UWP для UWP Supported Не поддерживается Supported Не поддерживается
приложения Classic Visual Basic Не поддерживается Supported Не поддерживается Не поддерживается
Классические приложения Win32 Не поддерживается Supported Не поддерживается Не поддерживается
Приложения на основе Chromium Не поддерживается Не поддерживается Не поддерживается Supported

Visual Studio — динамическое визуальное дерево

Функции Динамического визуального дерева и Живого обозревателя свойств включены в состав Visual Studio и работают вместе, чтобы обеспечить интерактивное представление элементов пользовательского интерфейса в приложении.

Когда следует использовать динамическое визуальное дерево

Используйте эти средства при создании приложений с WinUI 3 в Windows App SDKWinUI для UWP для UWPWPF, .NET MAUI, WinForms или React Native for Desktop.

Замечание

Визуализатор дерева WPF является устаревшей функцией и не находится в активной разработке. Визуализатор дерева WPF можно использовать для изучения визуального дерева объекта WPF и просмотра свойств зависимостей WPF для объектов, содержащихся в этом дереве.

Использование динамического визуального дерева

XAML Hot Reload необходимо включить для просмотра динамического визуального дерева (эта функция включена по умолчанию в Visual Studio 2019 и более поздних версиях).

Чтобы проверить, включена ли Hot Reload XAML, запустите приложение с подключенным отладчиком Visual Studio (F5 или Debug -> начать отладку). При запуске приложения появится панель инструментов в приложении, которая подтверждает доступность XAML Hot Reload (как показано на следующем рисунке).

Скриншот встроенной панели инструментов отладки в Visual Studio.

Если панель инструментов в приложении не отображается, выберите Debug > Параметры > XAML Hot Reload в строке меню Visual Studio. В диалоговом окне Options выберите параметр Enable XAML Hot Reload.

Снимок экрана диалогового окна

После запуска приложения в конфигурации отладки (с присоединенным отладчиком) перейдите в строку меню Visual Studio (Debug > Windows > Live Visual Tree). Откроется панель динамического визуального дерева с представлением кода XAML в режиме реального времени.

По умолчанию выбран параметр Just My XAML для динамического визуального дерева. Это обеспечивает упрощенное представление коллекции элементов XAML в приложении и может быть включено или выключено с помощью кнопки Show Just My XAML , как показано на следующем рисунке.

Снимок экрана Живого визуального дерева в Visual Studio с включенной опцией Just My Xaml.

Возможности динамического визуального дерева

Панель инструментов "Динамическое визуальное дерево" предоставляет несколько вариантов выбора элементов для изучения пользовательского интерфейса приложения во время выполнения.

  • Выберите элемент в работающем приложении. В этом режиме при выборе элемента пользовательского интерфейса в приложении динамическое визуальное дерево автоматически обновляется, чтобы отобразить узел, и это свойства в дереве, соответствующем этому элементу.

    Скриншот дерева Visual Studio Live Visual Tree с включенной опцией выбора элемента в запущенном приложении.

  • Отображение элементов макета в работающем приложении. В этом режиме в окне приложения отображаются горизонтальные и вертикальные линии вдоль границ выбранного объекта и прямоугольник, обозначающий его поля.

    Скриншот живого визуального дерева Visual Studio с включенной опцией элементов оформления макета отображения в параметре

  • Выбор предварительного просмотра. В этом режиме Visual Studio отображает XAML, в котором объявлен элемент (если у вас есть доступ к исходному коду приложения).

    Снимок экрана функции Visual Studio

Spy++

Spy++ (SPYXX.EXE) — это утилита на основе Win32, которая поставляется с интегрированной средой разработки Visual Studio и предоставляет графический интерфейс для отображения процессов, потоков, окон и оконных сообщений системы.

Когда следует использовать Spy++

Используйте Spy++ при создании классического приложения Win32 или приложениях Win32, использующих API Win32 для рисования элементов пользовательского интерфейса, таких как WinForms и Classic Visual Basic приложения.

Замечание

Для приложений платформы .NET Spy++ имеет ограниченную полезность, так как сообщения и классы окна, перехватанные Spy++, не соответствуют управляемым событиям и значениям свойств.

Использование Spy++

Spy++ можно запустить с Visual Studio или командной строки разработчика для Visual Studio.

Чтобы запустить Spy++ из Visual Studio:

  • Убедитесь, что установка Visual Studio включает компонент основные функции рабочего стола C++ из рабочей нагрузки Desktop development with C++. (Это устанавливается по умолчанию с Visual Studio 2026.) Снимок экрана установщика Visual Studio с отмеченной карточкой разработки приложений для рабочего стола с C++ и выделенным состоянием установки основных функций рабочего стола C++.
  • При установке Spy++ доступен в меню "Сервис ".
  • Spy++ работает независимо от Visual Studio, которую можно закрыть, если больше не требуется.

Чтобы запустить Spy++ из командной строки разработчика для Visual Studio:

  • Запустите командную строку Developer для Visual Studio из меню Windows Start. Снимок экрана: меню
  • В командной строке введите spyxx.exe (или spyxx_amd64.exe для 64-разрядной версии) и нажмите клавишу ВВОД.

Дополнительные сведения об использовании Spy++ из Visual Studio см. на панели инструментов Spy++.

Возможности Spy++

Spy++ отображает графическое дерево связей между системными объектами, с текущим окном рабочего стола в верхней части дерева и дочерних узлов, представляющих все остальные окна, перечисленные в соответствии со стандартной иерархией окон. Он может получить ценные сведения о поведении приложения, недоступном через отладчик Visual C++.

Снимок экрана: окно приложения Spy++ .

С помощью Spy++ вы можете:

  • Поиск определенных окон, потоков, процессов или сообщений.
  • Просмотр свойств выбранных потоков, процессов или сообщений.
  • Выберите окно, поток, процесс или сообщение непосредственно в представлении дерева.
  • Используйте средство поиска , чтобы выбрать окно с помощью указателя мыши (поиск —> окно поиска). Снимок экрана: диалоговое окно поиска Spy++ .
  • Задайте параметр сообщения с помощью сложного параметра выбора журнала сообщений.

См. документацию по Spy++ в Справке Spy++.

Аналитика специальных возможностей для Windows — Динамическая проверка

Accessibility Insights для Windows — Live Inspect — это скачиваемое приложение Майкрософт, которое помогает разработчикам находить и устранять проблемы со специальными возможностями в приложениях Windows, поддерживающих UI Automation. Это помогает разработчикам убедиться, что элемент в приложении имеет правильные свойства UI Automation, просто наведя указатель мыши на элемент или задать фокус клавиатуры.

Когда следует использовать Accessibility Insights: Live Inspect

Live Inspect обычно используется в сочетании с Live Visual Tree, Spy++ и другими инструментами при создании приложений с помощью WinUI в Windows App SDK, WinUI для UWP для UWP, WPF, .NET MAUI, WinForms или React Native for Desktop.

Как использовать Accessibility Insights — живой осмотр

Accessibility Insights нужно загрузить и установить с Download Accessibility Insights.

Возможности Инструментов доступности — проверка в реальном времени

В динамической проверке отображается графическое дерево связей между системными объектами с панелями сведений, содержащими свойства и шаблоны UI Automation, соответствующие выбранному элементу. Текущее окно рабочего стола отображается в верхней части дерева и дочерних узлов, представляющих все остальные окна, перечисленные в соответствии со стандартной иерархией окон.

С помощью Live Inspect можно:

  • Убедитесь, что элемент в приложении имеет правильные свойства UI Automation, просто наведя указатель мыши на элемент или установив на нём фокус клавиатуры.
  • Визуально выделяет элементы в целевом приложении.
  • Тестирование контроллеров или моделей с применением ручных или автоматизированных проверок на соответствие многочисленным стандартам и руководствам по доступности.

Снимок экрана: средство

Дополнительные сведения о UI Automation см. в разделе UI Automation Обзор.

Дополнительные сведения об аналитике специальных возможностей см. в статье " Аналитика специальных возможностей" для Windows

Chromium UI DevTools для Windows

Chromium UI DevTools для Windows — это средство из Google, которое позволяет проверить систему пользовательского интерфейса, например веб-страницу с помощью внешнего инспектора средств разработки.

Когда следует использовать Chromium UI DevTools для Windows

Используйте средства разработки интерфейса Chrome DevTools, если вы разрабатываете проект Chromium, включая прогрессивные веб-приложения или приложения для настольных систем Electron. Дополнительные сведения об Electron см. в расширении DevTools на GitHub.

Использование средств разработки пользовательского интерфейса Chromium для Windows

Кодовую базу Chromium UI DevTools для Windows необходимо скачать из GitHub и собрать с помощью Visual Studio. Дополнительные сведения см. в обзоре средств разработки пользовательского интерфейса.

Возможности средств разработки пользовательского интерфейса Chromium для Windows

Chromium UI DevTools для Windows использует интерфейс веб-страницы для отображения и обхода представлений, окон и других элементов пользовательского интерфейса.

С помощью средств разработки пользовательского интерфейса Chromium для Windows можно:

  • Используйте дерево элементов иерархического пользовательского интерфейса для проверки элементов пользовательского интерфейса и их свойств.
  • Используйте режим проверки, который выделяет элемент пользовательского интерфейса при наведении указателя мыши на него и показывает узлы элемента в дереве элементов пользовательского интерфейса.
  • С помощью панели "Элементы" откройте панель поиска и найдите элемент в дереве элементов пользовательского интерфейса с помощью свойств имени, тега и стиля.
  • С помощью панели "Источники" откройте файл заголовка класса в поиске кода Chromium и извлеките код из локальных файлов.

Связанный контент

  • Last updated on