Using Xamarin Inspector With Your Live Apps

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.

inspectorrunning

Setup

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.

liveinspect

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.

liveimage

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.

movedliveimage

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.

refreshliveimage

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.

changelabelcolor

Visual Tree

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.

visualtree

REPL

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.

Summary

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.


XAMARIN.FORMS MONTHLY NEWSLETTER

JOIN 1,000+ SUBSCRIBERS

  1. Don't miss out on updates
  2. The latest info from this site, Xamarin and the community
  3. Unsubscribe at any time*

* We use MailChimp, with double opt-in, and instant unsubscribe

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

Related Posts

3 Comments

    1. Adam Pedley

      For individuals, it certainly out of reach. It really only does seem to be for the enterprise. However on a day to day usage, I don’t get much use out of it. But is handy if you need to see exactly what layout has been created natively from Xamarin Forms.

  1. Tony Casey

    I have Visual Studio Enterprise 2017 and was looking forward to getting this going.

    However, in true tradition, this is another inspector that doesn’t work.

    I get the message to “Don’t Link” and when I go in and turn off the linking, the inspector button becomes inactive, really disappointing.

    This is on a Xamarin Forms project.

Leave A Comment?