次の方法で共有

Windows appに適したビジュアル ツリー ビューアーを選択する

ビジュアル ツリー ビューアー (UI ビジュアライザーとも呼ばれます) は、実行時にWindows appで UI コンポーネントを検査および操作するために使用されるツールです。

これは、コンポーネント階層の表示と走査、コンポーネントの強調表示、状態の取得と設定、関連するコードへのディープ リンクなどの機能を使用して、プロトタイプの作成、ユーザー エクスペリエンスの向上、UI の問題のデバッグに役立ちます。

次の表では、複数の UI 視覚化ツールと、UI フレームワークと、それらがサポートするプラットフォームWindows appを示します。 各ツールの概要は、テーブルの後にあります。

UI プラットフォーム/フレームワーク Visual Studio - ライブ ビジュアルツリー Spy++ Accessibility Insights Chromium UI DevTools
Windows App SDK 内の WinUI Supported サポートされていません Supported サポートされていません
WPF Supported サポートされていません Supported サポートされていません
デスクトップ用 React Native Supported サポートされていません Supported Supported
.NET MAUI Supported サポートされていません Supported サポートされていません
WinForms Supported Supported Supported サポートされていません
UWP 用 WinUI for UWP Supported サポートされていません Supported サポートされていません
Classic Visual Basic apps サポートされていません Supported サポートされていません サポートされていません
従来の Win32 アプリ サポートされていません Supported サポートされていません サポートされていません
Chromium ベースのアプリ サポートされていません サポートされていません サポートされていません Supported

Visual Studio - ライブ ビジュアル ツリー

Live Visual Tree と Live Property Explorer の機能には、Visual Studioが付属しており、連携して動作し、アプリ内の UI 要素の対話型ランタイム ビューを提供します。

ライブ ビジュアル ツリーを使用する場合

WinUI 3 を Windows App SDK、UWP 用 WinUI、WPF、.NET MAUI、WinForms、または デスクトップ用 React Native でアプリを構築するときに、これらのツールを使用します。

注

WPF ツリー ビジュアライザーは従来の機能であり、アクティブな開発段階ではありません。 WPF ツリー ビジュアライザーを使用すると、WPF オブジェクトのビジュアル ツリーを調べ、そのツリーに含まれるオブジェクトのWPF依存関係プロパティを表示できます。

ライブ ビジュアル ツリーを使用する方法

ライブ ビジュアル ツリーを表示するには、XAML Hot Reload を有効にする必要があります (この機能は、Visual Studio 2019 以降では既定で有効になっています)。

XAML Hot Reloadが有効かどうかを確認するには、Visual Studio デバッガーがアタッチされている (F5 または Debug -> デバッグの開始) を使用してアプリを実行します。 アプリが起動すると、アプリ内ツール バーが表示されます。これは、XAML Hot Reloadが使用可能であることを確認します (次の図を参照)。

Visual Studioアプリ内デバッグ ツール バーのスクリーンショット。

アプリ内ツール バーが表示されない場合は、Visual Studio メニュー バーから Debug > Options > XAML Hot Reload を選択します。 [Options] ダイアログ ボックスで、[XAML Hot Reload オプションが選択されていることを確認します。

XAML Hot Reloadの有効化が強調表示された [Visual Studio デバッグ オプション] ダイアログ ボックスのスクリーンショット。

アプリがデバッグ構成で実行されたら (デバッガーがアタッチされた状態で)、Visual Studio メニュー バー (Debug > Windows > Live Visual Tree) に移動します。 これにより、XAML コードのリアルタイム ビューが表示された [ライブ ビジュアル ツリー] ウィンドウが開きます。

既定では、ライブ ビジュアル ツリーの [ マイ XAML のみ ] オプションが選択されています。 これにより、アプリ内の XAML 要素コレクションの簡略化されたビューが提供され、次の図に示すように、[ マイ XAML のみを表示 ] ボタンを使用してオンまたはオフを切り替えることができます。

ジャスト マイ Xaml オプションが有効になっている Visual Studio のライブ ビジュアル ツリーのスクリーンショット。

ライブ ビジュアル ツリーの機能

Live Visual Tree ツール バーには、実行時にアプリケーションの UI を調べる要素を選択するためのオプションがいくつか用意されています。

  • 実行中のアプリケーションの要素を選択します。 このモードをオンにすると、アプリケーションで UI 要素を選択すると、Live Visual Tree が自動的に更新され、ノードとその要素に対応するプロパティがツリーに表示されます。

    実行中のアプリケーションの要素の選択オプションが有効になっているVisual Studioライブ ビジュアル ツリーのスクリーンショット。

  • 実行中のアプリケーションにレイアウト装飾を表示します。 このモードをオンにすると、アプリケーション ウィンドウには、選択したオブジェクトの境界に沿った水平線と垂直線と、その余白のアウトラインが表示されます。

    実行中のアプリケーション オプションの表示レイアウト装飾が有効になっているVisual Studioライブ ビジュアル ツリーのスクリーンショット。

  • プレビューの選択。 このモードをオンにすると、Visual Studioは要素が宣言されている XAML を表示します (アプリケーション ソース コードにaccessがある場合)。

    プレビュー選択オプションが有効になっているVisual Studioライブ ビジュアル ツリーのスクリーンショット。

Spy++

Spy++ (SPYXX.EXE) は、Visual Studioに付属する Win32 ベースのユーティリティであり、システムのプロセス、スレッド、ウィンドウ、ウィンドウ メッセージのグラフィカル ビューを提供します。

Spy++ を使用する場合

従来の Win32 アプリケーションや Win32 API を使用して UI 要素を描画する WinForms や Classic Visual Basic アプリ をビルドする場合は、Spy++ を使用します。

注

.NET フレームワーク アプリの場合、Spy++ によってインターセプトされたウィンドウ メッセージとクラスがマネージド イベントとプロパティ値に対応しないため、Spy++ の有用性は限られています。

Spy++ の使用方法

Spy++ は、Visual Studioまたは開発者コマンド プロンプトでVisual Studioから起動できます。

Visual Studioから Spy++ を開始するには:

  • Visual Studio インストールに、C++ コア デスクトップ機能 コンポーネントが Desktop 開発と C++ ワークロードから含まれていることを確認します。 (これは既定で Visual Studio 2022 と共にインストールされます)。 C++ によるデスクトップ開発がチェックされ、C++ コア デスクトップ機能のインストール状態が強調表示されているVisual Studio インストーラーのスクリーンショット。
  • インストールすると、[ ツール] メニューから Spy++ を使用できます。
  • Spy++ は、Visual Studioとは独立して実行されます。不要になった場合は閉じることができます。

Visual Studioの開発者コマンド プロンプトから Spy++ を起動するには:

  • Windows Start メニューから Developer Command Prompt for Visual Studio を起動します。 VS 2022 の開発者コマンド プロンプトが強調表示されている Windows の [スタート] メニューのスクリーンショット。
  • コマンド プロンプトで、spyxx.exe (または 64 ビット 版の場合は spyxx_amd64.exe) と入力し、Enter キーを押します。

Visual Studioから Spy++ を使用する方法の詳細については、「Spy++ ツール バーを参照してください。

Spy++ の機能

Spy++ では、システム オブジェクト間のリレーションシップのグラフィカル ツリーが表示され、ツリーの上部に現在のデスクトップ ウィンドウが表示され、子ノードは標準ウィンドウ階層に従って他のすべてのウィンドウを表します。 Visual C++ デバッガーでは使用できないアプリケーションの動作に関する貴重な分析情報を提供できます。

Spy++ アプリケーション ウィンドウのスクリーンショット。

Spy++ を使用すると、次のことができます。

  • 特定のウィンドウ、スレッド、プロセス、またはメッセージを検索します。
  • 選択したスレッド のプロセスまたはメッセージのプロパティを表示します。
  • ツリー ビューで直接、ウィンドウ、スレッド、プロセス、またはメッセージを選択します。
  • Finder ツールを使用して、マウス ポインターを使用してウィンドウを選択します ([検索] -> [ウィンドウの検索] )。 Spy++ の [ウィンドウの検索] ダイアログのスクリーンショット。
  • 複雑なメッセージ ログ選択パラメーターを使用して、メッセージ オプションを設定します。

Spy++ のドキュメントについては、 Spy++ のヘルプを参照してください。

Windows の Accessibility Insights - Live Inspect

Accessibility Insights for Windows - Live Inspect は、開発者がUI Automationをサポートする Windows アプリでアクセシビリティの問題を見つけて修正するのに役立つ、ダウンロード可能な Microsoft アプリケーションです。 これは、アプリ内の要素に適切なUI Automation プロパティがあることを検証するのに役立ちます。そのためには、要素の上にマウス ポインターを置くか、キーボード フォーカスを設定します。

Accessibility Insights を使用する場合 - Live Inspect

Live Inspect は、通常、WinUI、Windows App SDK、WinUI for UWP、UWP、WPF、.NET MAUI、WinForms、または React Native for Desktop を使用してアプリをビルドする際に、Live Visual Tree、Spy++、およびその他のツールと組み合わせて使用されます。

Accessibility Insights の使用方法 - Live Inspect

Accessibility Insights は、 Accessibility Insights のダウンロードからダウンロードしてインストールする必要があります。

Accessibility Insights の機能 - Live Inspect

Live Inspect では、選択した要素に対応するUI Automationプロパティとパターンを含む詳細ペインを持つシステム オブジェクト間のリレーションシップのグラフィカル ツリーが表示されます。 現在のデスクトップ ウィンドウは、ツリーの上部に表示され、子ノードは標準ウィンドウ階層に従って一覧表示されている他のすべてのウィンドウを表します。

Live Inspect を使用すると、次のことができます。

  • アプリ内の要素に適切なUI Automationプロパティがあることを確認するには、要素をポイントするか、キーボード フォーカスを設定します。
  • ターゲット アプリケーション内の要素を視覚的に強調表示します。
  • さまざまなアクセシビリティルールとガイドラインに準拠しているか、手動または自動チェックを使用してコントロールまたはパターンをテストします。

基本的なターゲット アプリの横にある Accessibility Insights ツールのスクリーンショット。

UI Automationの詳細については、「UI Automationの概要を参照してください。

Accessibility Insights の詳細については、「Windows 用 Accessibility Insights」を参照してください。

Chromium ユーザーインターフェース 開発ツール Windows用

Chromium UI DevTools for Windows は、フロントエンド DevTools Inspector を使用して Web ページのように UI システムを検査できる Google のツールです。

Chromium UI DevTools for Windows を使用する場合

プログレッシブ web appsや Electron デスクトップ アプリを含む Chromium projectを開発している場合は、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 では、Web ページ フロントエンドを使用して、ビュー、ウィンドウ、およびその他の UI 要素を表示および走査します。

Chromium UI DevTools for Windows を使用すると、次のことができます。

  • 階層 UI 要素ツリーを使用して、UI 要素とそのプロパティを検査します。
  • 検査モードを使用します。このモードでは、UI 要素をポイントすると UI 要素が強調表示され、UI 要素ツリー内の要素のノードが表示されます。
  • [要素] パネルを使用して検索バーを開き、名前、タグ、スタイルのプロパティを使用して UI 要素ツリー内の要素を検索します。
  • [ソース] パネルを使用して Chromium コード検索でクラス ヘッダー ファイルを開き、ローカル ファイルからコードをプルします。

関連コンテンツ

  • Last updated on