Pilih penampil pohon visual yang tepat untuk Windows app Anda

Penampil pohon visual, juga dikenal sebagai visualizer UI, adalah alat yang digunakan untuk memeriksa dan berinteraksi dengan komponen UI dalam Windows app pada waktu proses.

Ini dapat membantu untuk membuat prototipe, meningkatkan pengalaman pengguna, dan men-debug masalah UI melalui kemampuan seperti melihat dan melintasi hierarki komponen, penyorotan komponen, mendapatkan dan mengatur status, dan penautan mendalam ke kode terkait.

Alat yang direkomendasikan

Tabel berikut mengidentifikasi beberapa alat visualisasi UI dan kerangka kerja UI dan platform Windows app yang mereka dukung. Ringkasan setiap alat dapat ditemukan setelah tabel.

Platform/kerangka kerja UI	Visual Studio - Pohon Visual Langsung	Spy++	Wawasan Aksesibilitas	Chromium UI DevTools
WinUI di Windows App SDK	Supported	Tidak didukung	Supported	Tidak didukung
WPF	Supported	Tidak didukung	Supported	Tidak didukung
React Native untuk Desktop	Supported	Tidak didukung	Supported	Supported
.NET MAUI	Supported	Tidak didukung	Supported	Tidak didukung
WinForms	Supported	Supported	Supported	Tidak didukung
WinUI untuk UWP untuk UWP	Supported	Tidak didukung	Supported	Tidak didukung
Aplikasi Classic Visual Basic	Tidak didukung	Supported	Tidak didukung	Tidak didukung
Aplikasi Win32 klasik	Tidak didukung	Supported	Tidak didukung	Tidak didukung
Aplikasi berbasis Chromium	Tidak didukung	Tidak didukung	Tidak didukung	Supported

Visual Studio - Pohon Visual Dinamis

Fitur Live Visual Tree dan Live Property Explorer dikirim dengan Visual Studio dan bekerja bersamaan untuk memberikan tampilan runtime interaktif elemen UI di aplikasi Anda.

Kapan menggunakan Live Visual Tree

Gunakan alat ini saat membangun aplikasi dengan WinUI 3 di Windows App SDK, WinUI untuk UWP untuk UWP, WPF, .NET MAUI, WinForms, atau React Native for Desktop.

• Untuk informasi selengkapnya tentang WinUI di Windows App SDK, WinUI untuk UWP, dan WPF, lihat Inspect XAML saat meng-debug properti.
• Untuk informasi selengkapnya tentang .NET MAUI, lihat Memeriksa pohon visual dari aplikasi .NET MAUI.

Nota

WPF Tree Visualizer adalah fitur warisan dan tidak dalam pengembangan aktif. Anda dapat menggunakan visualizer pohon WPF untuk menjelajahi pohon visual objek WPF, dan untuk melihat properti dependensi WPF untuk objek yang terkandung di pohon tersebut.

Cara menggunakan Live Visual Tree

XAML Hot Reload harus diaktifkan untuk melihat Pohon Visual Langsung (fitur ini diaktifkan secara default di Visual Studio 2019 dan yang lebih baru).

Untuk memeriksa apakah Hot Reload XAML diaktifkan, jalankan aplikasi Anda dengan debugger Visual Studio terpasang (F5 atau Debug -> Mulai Debugging). Saat aplikasi dimulai, Anda akan melihat toolbar dalam aplikasi, yang mengonfirmasi bahwa XAML Hot Reload tersedia (seperti yang ditunjukkan pada gambar berikut).

Jika Anda tidak melihat toolbar dalam aplikasi, pilih Debug > Opsi > XAML Hot Reload dari bilah menu Visual Studio. Dalam kotak dialog Options, pastikan opsi Enable XAML Hot Reload dipilih.

Setelah aplikasi Anda berjalan dalam konfigurasi debug (dengan debugger terlampir), navigasikan ke bilah menu Visual Studio (Debug > Windows > Live Visual Tree). Ini membuka panel Pohon Visual Langsung dengan tampilan waktu nyata kode XAML Anda.

Secara default, opsi Just My XAML untuk Live Visual Tree dipilih. Ini memberikan tampilan yang disederhanakan dari koleksi elemen XAML di aplikasi Anda dan dapat diaktifkan atau dinonaktifkan melalui tombol Tampilkan Hanya XAML Saya seperti yang ditunjukkan pada gambar berikut.

Kemampuan Live Visual Tree

Toolbar Live Visual Tree menyediakan beberapa opsi untuk memilih elemen yang akan diperiksa melalui UI aplikasi Anda saat runtime.

• Pilih Elemen di Aplikasi yang Sedang Berjalan. Dengan mode ini aktif, saat Anda memilih elemen UI dalam aplikasi, Live Visual Tree secara otomatis memperbarui untuk menampilkan simpul dan propertinya di pohon yang sesuai dengan elemen tersebut.

  

• Tampilkan Penghias Tata Letak di Aplikasi yang Sedang Berjalan. Dengan mode ini aktif, jendela aplikasi menunjukkan garis horizontal dan vertikal di sepanjang batas objek yang dipilih dan persegi panjang yang menguraikan marginnya.

  

• Pratinjau pilihan. Dengan mode ini aktif, Visual Studio menunjukkan XAML tempat elemen dideklarasikan (jika Anda memiliki access ke kode sumber aplikasi).

  

Spy++

Spy++ (SPYXX.EXE) adalah utilitas berbasis Win32 yang dikirim dengan Visual Studio dan memberikan tampilan grafis dari proses, utas, jendela, dan pesan jendela sistem.

Kapan menggunakan Spy++

Gunakan Spy++ saat membuat aplikasi Win32 klasik atau yang menggunakan API Win32 untuk menggambar elemen UI-nya, seperti WinForms dan Classic Visual Basic aplikasi.

Nota

Untuk aplikasi kerangka kerja .NET, Spy++ memiliki kegunaan terbatas karena pesan jendela dan kelas yang disadap oleh Spy++ tidak sesuai dengan peristiwa terkelola dan nilai properti.

Cara menggunakan Spy++

Spy++ dapat dimulai dari Visual Studio atau Prompt Perintah Pengembang untuk Visual Studio.

Untuk memulai Spy++ dari Visual Studio:

• Konfirmasikan bahwa penginstalan Visual Studio Anda menyertakan fitur desktop inti C++ dari Dektop pengembangan dengan beban kerja C++. (Ini diinstal secara default dengan Visual Studio 2022.)
• Saat diinstal, Spy++ tersedia dari menu Alat .
• Spy++ berjalan secara independen dari Visual Studio, yang dapat ditutup jika tidak lagi diperlukan.

Untuk memulai Spy++ dari Prompt Perintah Pengembang di Visual Studio:

• Luncurkan perintah Developer untuk Visual Studio dari menu Windows Start.
• Pada prompt perintah, masukkan spyxx.exe (atau spyxx_amd64.exe untuk versi 64-bit) dan tekan Enter.

Untuk informasi lebih spesifik tentang cara menggunakan Spy++ dari Visual Studio, lihat Toolbar Spy++.

Kemampuan Spy++

Spy++ menampilkan struktur pohon grafis yang menunjukkan hubungan di antara objek sistem, dengan jendela desktop saat ini di bagian atas struktur pohon dan simpul anak yang mewakili semua jendela lain yang tercantum sesuai dengan hierarki jendela standar. Ini dapat memberikan wawasan berharga tentang perilaku aplikasi yang tidak tersedia melalui debugger Visual C++.

Dengan Spy++ Anda dapat:

• Cari jendela, utas, proses, atau pesan tertentu.
• Lihat properti proses atau pesan utas yang dipilih.
• Pilih jendela, utas, proses, atau pesan langsung dalam tampilan pohon.
• Gunakan Alat Pencari untuk memilih jendela menggunakan penunjuk mouse (Cari -> Temukan Jendela).
• Atur opsi pesan dengan menggunakan parameter pemilihan log pesan yang kompleks.

Untuk dokumentasi Spy++, lihat Bantuan Spy++.

Insight Aksesibilitas untuk Windows - Inspeksi Langsung

Accessibility Insights for Windows - Live Inspect adalah aplikasi Microsoft yang dapat diunduh yang dapat membantu pengembang menemukan dan memperbaiki masalah aksesibilitas di aplikasi Windows yang mendukung UI Automation. Ini membantu pengembang memverifikasi bahwa elemen dalam aplikasi memiliki properti UI Automation yang benar hanya dengan mengarahkan mouse ke elemen atau mengatur fokus keyboard ke elemen tersebut.

Kapan menggunakan Accessibility Insights - Live Inspect

Live Inspect biasanya digunakan bersama dengan Live Visual Tree, Spy++, dan alat lainnya saat membangun aplikasi dengan WinUI di Windows App SDK, WinUI untuk UWP untuk UWP, WPF, .NET MAUI, WinForms, atau React Native for Desktop.

Cara menggunakan Accessibility Insights - Live Inspect

Accessibility Insights harus diunduh dan diinstal dari Unduh Accessibility Insights.

Kemampuan dari Accessibility Insights - Live Inspect

Live Inspect menampilkan pohon grafis hubungan di antara objek sistem dengan panel detail yang berisi properti dan pola UI Automation yang sesuai dengan elemen yang dipilih. Jendela desktop saat ini ditampilkan di bagian atas pohon dan simpul anak yang mewakili semua jendela lain ditampilkan sesuai dengan hierarki jendela standar.

Dengan Live Inspect, Anda dapat:

• Verifikasi bahwa elemen dalam aplikasi memiliki properti UI Automation yang tepat hanya dengan mengarahkan mouse ke atas elemen atau mengatur fokus keyboard padanya.
• Menyoroti elemen secara visual dalam aplikasi target.
• Kontrol atau pola pengujian dengan pemeriksaan manual atau otomatis untuk kepatuhan dengan banyak aturan dan pedoman aksesibilitas.

Untuk mempelajari selengkapnya tentang UI Automation, lihat Gambaran Umum UI Automation.

Untuk mempelajari selengkapnya tentang Accessibility Insights, lihat Accessibility Insights untuk Windows

DevTools UI Chromium untuk Windows

Chromium UI DevTools untuk Windows adalah alat dari Google yang memungkinkan Anda memeriksa sistem UI seperti halaman web menggunakan Frontend DevTools Inspector.

Kapan menggunakan Chromium UI DevTools untuk Windows

Gunakan DevTools UI Chrome jika Anda mengembangkan proyek Chromium, termasuk aplikasi web progresif atau aplikasi desktop Electron. Untuk informasi selengkapnya tentang Electron, lihat ekstensi DevTools di GitHub.

Cara menggunakan Chromium UI DevTools untuk Windows

Basis kode Chromium UI DevTools untuk Windows harus diunduh dari GitHub dan dibangun dengan Visual Studio. Untuk informasi selengkapnya, lihat Gambaran Umum DevTools UI.

Kemampuan UI DevTools pada Chromium untuk Windows

DevTools Chromium UI untuk Windows menggunakan front end halaman web untuk menampilkan dan menjelajahi tampilan, jendela, dan elemen antarmuka pengguna lainnya.

Dengan DevTools Chromium UI untuk Windows, Anda dapat:

• Gunakan pohon elemen UI hierarkis untuk memeriksa elemen UI dan propertinya.
• Gunakan mode Inspeksi, yang menyoroti elemen UI saat Anda mengarahkan mouse ke atasnya dan mengungkapkan node elemen di pohon elemen UI.
• Gunakan panel Elemen untuk membuka bilah pencarian dan menemukan elemen di pohon elemen UI menggunakan properti nama, tag, dan gaya.
• Gunakan panel Sumber untuk membuka file header kelas dalam pencarian kode Chromium dan tarik kode dari file lokal.

Konten terkait