UISleuth – Visually Inspect Your Xamarin Forms Application

UISleuth is a UI (or Visual) inspector for your Xamarin Forms application at runtime. It allows you to see in realtime, the UI of your Xamarin Forms application, dive deep into its properties and change them in real time. As of the time of this post, it only support Android on Windows in Visual Studio.

Install

First download the UISleuth application and install.

Next you need to go to your Android project and install the UISleuth NuGet package.

Setup

In your MainActivity.cs add the following code after the call to LoadApplication.

#if DEBUG
UISleuth.Inspector.Init();
#endif

Connecting

Now startup your app in an emulator or real device. Once this has started, start the UISleuth desktop application.

Find your emulator or device and press Connect.

Real Time View

You will now have a real time view of your running Android application. As you can see below, both UISleuth and the Android emulator are showing the same view. To the left, is a visual hierarchy of Xamarin Forms controls.

To the right, when you select on an element if gives you a very browser look alike view of your elements and their padding and margin, along with display information.

Going one step further, we can go down the right hand side pane, to find a property we want, and change it. It will then reflect the change in your running app.

Device Settings

Finally if you click on device settings, it will give you a lot of information about the phone or emulator it is running on, including all of its capabilities. Certainly a little handy feature here.

Differences with Other Designers

Xamarin Inspector

Besides not needing an Enterprise license, there are a few additional differences between Inspector and UISleuth. UISleuth was designed with Xamarin Forms in mind, where as Xamarin Inspector, is looking at it from a native perspective, as such, in a Xamarin Forms world, UISleuth has the advantage in ease of use, against your Xamarin Forms Controls.

Gorilla Player

Gorilla Player shows visual changes to an app that isn’t running. You inspect one page at a time, but you have to manually enter any data for any binding that may be in your XAML. This also runs on an emulator or real device, but your app isn’t running.

Xamarin Previewer

The Xamarin Previewer is a new tool by Microsoft that lets you view a preview of your XAML page in real time, within the IDE. This isn’t running on an emulator or real device, it is within the IDE, hence you will only get an approximation of what the view will look like.

Summary

UISleuth is certainly a great addition to the Visual Designers that are coming to Xamarin, however there are still no drag and drop based solutions. UISleuth excels in that it was specifically designed for Xamarin Forms, is free and runs on a real device to show what the UI will look like. Each visual designer has its own strengths and weaknesses, but each have their own twist, that may be more or less suited to your needs.

Microsoft MVP | Xamarin MVP | Xamarin Certified Developer |
Exrin MVVM Framework | Xamarin Forms Developer | Melbourne, Australia

Related Posts

3 Comments

Leave A Comment?