The Xamarin Inspector, is its own product, that can inspect your Xamarin apps, while they are running. I have mentioned Xamarin Workbooks before, and you will have seen a live inspector, that ran your pieces of code. This is the same inspector, just separated to connect to a live app, instead of through Workbooks.
You first have to install the Inspector. The Inspector only works for iOS and Android but does work on Mac or Windows
Running The Inspector
To run the inspector, first, you must go to the properties of your iOS or Android project, Linker Options and ensure the Linker Behavior is set to Don’t Link.
Now, run your project and you will see a new icon next to the pause and stop button. Pressing this, will launch the inspector.
Live Visual Tree
When the Inspector loads, if you change the tab at the bottom to View Inspector, you will be presented with a live visual representation of all the UI layers in your app.
If you hold down your cursor in the image, you can move it around in 3D. This allows you to view your UI at different angles, to gain a better view of the layers.
This visual representation, doesn’t update in real time, hence you need to press the Refresh button, every time you want to see a change.
Real Time Changes
In the right hand pane, you can see the all the visual elements and their properties. If you select a UI element on the Visual Rendering, you will notice it highlights, then shows just that elements property on the right.
Note: This can take a few seconds to update.
If I update the color of the UILabel and press enter, it will update the app my running app. This allows real time updates to your app, which is very handy for testing small changes.
The left hand pane, details the visual hierarchy. If you are using Xamarin Forms, you will notice that most elements are listed as the native controls. This is because you are inspecting a native application. It will have little knowledge of your Xamarin Forms controls.
If you select REPL in the bottom left tab area, you will be taken to a screen that shows commands being issued against the live app. REPL is short for Read-eval-print-loop, and is used to describe an environment that runs code in pieces. You can write and issue code to your live app, in this window.
For simple views, and minor changes, this can be a great tool. If you have a complex layout, I find its almost useless, as I can’t separate out the layers I want. A MasterDetailPage also causes some issues, by showing it by default in the live view, even though it is hidden in your running app.