共用方式為

為您的 Windows app 選擇合適的視覺樹檢視器

視覺樹檢視器，也稱為 UI 視覺化工具，是一種用於在執行時檢查並互動 Windows app 中 UI 元件的工具。

這對於原型設計、改善使用者體驗，以及透過檢視與遍歷元件階層、元件高亮、取得與設定狀態，以及深度連結相關程式碼等功能來除錯 UI 問題非常有幫助。

下表列出數種 UI 視覺化工具及其支援的 UI 框架與 Windows app 平台。 每項工具的摘要可在表格後面找到。

使用者介面平台/框架 Visual Studio - Live Visual Tree Spy++ 無障礙洞察 Chromium UI 開發工具
WinUI 在 Windows App SDK Supported 不支援 Supported 不支援
WPF Supported 不支援 Supported 不支援
React Native 桌面版 Supported 不支援 Supported Supported
.NET MAUI Supported 不支援 Supported 不支援
WinForms Supported Supported Supported 不支援
WinUI for UWP 用於 UWP Supported 不支援 Supported 不支援
Classic Visual Basic 應用程式 不支援 Supported 不支援 不支援
經典 Win32 應用程式 不支援 Supported 不支援 不支援
基於 Chromium 的應用程式 不支援 不支援 不支援 Supported

Visual Studio - 即時視覺樹

Live Visual Tree 與 Live Property Explorer 功能隨 Visual Studio 附帶，並協同運作，提供應用程式中 UI 元素的互動式執行時視圖。

何時使用 Live Visual Tree

在使用 WinUI 3 在 Windows App SDK、WinUI for UWP、UWP、WPF、.NET MAUI、WinForms 或 React Native for Desktop 建置應用程式時，請使用這些工具。

備註

WPF 樹狀視覺化器 是舊有功能，尚未積極開發中。 你可以使用 WPF 樹狀視覺化工具來探索 WPF 物件的視覺樹，並查看該樹中物件的 WPF 相依屬性。

如何使用即時視覺樹

必須啟用 XAML Hot Reload 才能查看即時視覺樹（此功能預設為 2019 Visual Studio 及以後啟用）。

要檢查 XAML Hot Reload 是否啟用，請先安裝 Visual Studio 除錯器（F5或 Debug -> Start Debugging）。 應用程式啟動時，你應該會看到應用程式內的工具列，確認 XAML Hot Reload 可用（如下圖所示）。

Visual Studio 應用程式內除錯工具列的截圖。

如果你看不到應用程式內的工具列，請從Visual Studio選單列選擇 Debug > 選項 > XAML Hot Reload。 在Options對話框中，請確定已選擇啟用XAML Hot Reload選項。

Visual Studio除錯選項對話框的截圖，重點顯示啟用 XAML Hot Reload。

當你的應用程式以除錯設定（並附帶除錯器）執行時，前往Visual Studio選單列（Debug > Windows > Live Visual Tree）。 這會開啟即時視覺樹窗格，顯示你的 XAML 程式碼。

預設情況下，Live Visual Tree 的 Just My XAML 選項會被選中。 這能簡化你在應用程式中管理 XAML 元素的視圖，並能透過「僅顯示我的 XAML」按鈕進行切換，如下圖所示。

Visual Studio Live Visual Tree 的截圖，啟用 Just My Xaml 選項。

即時視覺樹的功能

Live Visual Tree 工具列提供多種選項，讓你在執行時透過應用程式的使用者介面選擇元素檢視。

  • 在執行中的應用程式中選擇元素。 開啟此模式時，當你在應用程式中選擇 UI 元素時，Live Visual Tree 會自動更新，顯示該節點及其屬性在對應的樹狀結構中。

    Visual Studio即時視覺樹截圖，啟用「執行中的應用程式中選擇元素」選項。

  • 在執行中的應用程式中顯示版面修飾器。 開啟此模式時，應用程式視窗會顯示選取物件邊界上的水平與垂直線，以及框定其邊緣的矩形。

    Visual Studio即時視覺樹截圖，啟用執行應用程式選項中的顯示版面裝飾器。

  • 預覽選擇。 開啟此模式時，Visual Studio 顯示元素宣告所在的 XAML（如果你可以存取應用程式的原始碼）。

    Visual Studio即時視覺樹截圖，啟用預覽選擇選項。

Spy++

Spy++（SPYXX.EXE）是一款基於 Win32 的工具，隨 Visual Studio 附帶，提供系統程序、執行緒、視窗及視窗訊息的圖形視圖。

何時使用 Spy++

在建置經典 Win32 應用程式或使用 Win32 API 繪製 UI 元素的應用程式時，請使用 Spy++，例如 WinForms 和 Classic Visual Basic 應用程式。

備註

對於 .NET 框架應用程式，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。

從 Visual Studio 的開發者指令提示字元啟動 Spy++：

  • 從 Windows Start 選單啟動 開發人員命令提示字元 for Visual Studio。 Windows 開始選單截圖，VS 2022 開發者命令提示字元被突出顯示。
  • 在命令提示字元中輸入 spyxx.exe （若為 64 位元版本則輸入 spyxx_amd64.exe），然後按下 Enter 鍵。

欲了解更多關於如何使用 Visual Studio Spy++ 的資訊，請參見 Spy++ 工具列。

Spy++ 的功能

Spy++ 顯示系統物件間關係的圖形樹狀結構，目前的桌面視窗位於樹頂端，子節點則代表依標準視窗階層列出的所有其他視窗。 它能提供 Visual C++ 除錯器無法獲得的寶貴洞見。

Spy++ 應用程式視窗的截圖。

使用 Spy++ 可以：

  • 搜尋特定的視窗、執行緒、程序或訊息。
  • 查看所選執行緒、程序或訊息的屬性。
  • 直接在樹狀檢視中選擇視窗、執行緒、程序或訊息。
  • 使用 Finder 工具 ，利用滑鼠指標（搜尋 -> 尋找視窗）選擇視窗。 Spy++ 尋找視窗對話框的截圖。
  • 透過複雜的訊息日誌選擇參數設定訊息選項。

關於 Spy++ 文件，請參見 Spy++ 說明。

Windows 無障礙見解 - 即時檢視

Accessibility Insights for Windows - Live Inspect是一款可下載的Microsoft應用程式，能協助開發者發現並修正支援 UI Automation 的 Windows 應用程式中的無障礙問題。 它幫助開發者透過將滑鼠移到該元素上方或設定鍵盤焦點，驗證應用程式中的元素是否具備正確的 UI Automation 屬性。

何時使用「Accessibility Insights - Live Inspect」

Live Inspect 通常與 Live Visual Tree、Spy++ 及其他工具搭配使用，當在 WinUI 中建置應用程式時，這些工具用於 Windows App SDK、WinUI for UWP 於 UWP、WPF、.NET MAUI、WinForms 或 React Native for Desktop。

如何使用無障礙洞察工具：即時檢查

無障礙洞察必須從 下載無障礙洞察網站下載並安裝。

Accessibility Insights 的功能 - 即時檢查

Live Inspect 會顯示系統物件間關係的圖形樹，細節窗格包含對應所選元素的 UI Automation 屬性與模式。 目前的桌面視窗顯示在樹狀結構頂端，子節點則代表依標準視窗階層列出的所有其他視窗。

透過 Live Inspect，您可以：

  • 只要將滑鼠移到某個元素上方或設定鍵盤焦點，就能確認應用程式中的元素是否具備正確的 UI Automation 屬性。
  • 視覺化地標示目標應用程式中的元素。
  • 透過手動或自動檢查，測試控制或模式，以確保符合多項無障礙規則與指引。

無障礙洞察工具的截圖，旁邊有一個基本的目標應用程式。

欲了解更多UI Automation，請參閱 UI Automation概述。

欲了解更多無障礙洞察，請參閱 Windows 無障礙洞察

Chromium UI Windows 開發工具

Chromium UI DevTools for Windows 是 Google 推出的工具，讓你能像檢查網頁一樣使用前端 DevTools Inspector 來檢查 UI 系統。

何時應在 Windows 上使用 Chromium UI DevTools

如果你正在開發 Chromium 專案，包括漸進式網路應用程式或 Electron 桌面應用程式，請使用 Chrome UI DevTools。 欲了解更多 Electron 資訊，請參閱 GitHub 上的 DevTools 擴充功能。

如何使用 Chromium UI DevTools for Windows 版

Chromium UI DevTools for Windows 程式碼必須從 GitHub 下載，並使用 Visual Studio 建置。 欲了解更多資訊，請參閱 UI DevTools 總覽。

Chromium UI DevTools for Windows 的功能

Chromium UI DevTools for Windows 使用網頁前端來顯示與遍歷檢視、視窗及其他 UI 元素。

使用 Chromium UI DevTools for Windows，你可以：

  • 使用階層式 UI 元素樹來檢查 UI 元素及其屬性。
  • 使用 Inspect 模式，當你將滑鼠移到某個 UI 元素上時，會高亮該元素，並顯示該元素在 UI 元素樹中的節點。
  • 使用元素面板開啟搜尋欄，並利用名稱、標籤和樣式屬性在 UI 元素樹中尋找元素。
  • 使用來源面板在 Chromium 程式碼搜尋中開啟類別標頭檔，並從本地檔案拉取程式碼。

相關內容

  • Last updated on