DEV Community

David Ortinau
David Ortinau

Posted on • Edited on

Inspecting .NET MAUI Apps on Mac with Reveal

Image description

Reveal is a UI inspection tool that I've used going back to my early days writing Obj-C apps for iOS. Maybe "inspection" is a misleading way to say this, because you can also edit values in Reveal live and see the app update. Even though those changes don't update source code, this is extremely useful for figuring out why your UI isn't where you think it should be, or what actual values are being applied to your views.

To use Reveal with .NET MAUI, all you need to do is link in an xcframework and viola.

<ItemGroup Condition=" '$(Configuration)' == 'Debug' ">
  <NativeReference Include="$(HOME)\Library\Application Support\Reveal\RevealServer\RevealServer.xcframework">
    <Kind>Framework</Kind>
    <SmartLink>True</SmartLink>
  </NativeReference>
</ItemGroup>
Enter fullscreen mode Exit fullscreen mode

The official instructions are listed as using Reveal with Visual Studio Mac, however it's really just a csproj addition.

Image description

I'm doing all my development from the Mac with Visual Studio Code + .NET MAUI extension (and of course my indespensible GitHub Copilot).

Make sure to clean your bin/obj folders and rebuild. Once your app is open it will be detected by Reveal and show you the visual tree.

What about Windows? The lasted version of Visual Studio 2022 provides a live visual tree, previewer with inspection, and property explorer (see docs). Along with hot reload you can tweak your app during debug and get the round trip to quickly improve your app.

Top comments (1)

Collapse
 
davidortinau profile image
David Ortinau

This post really helped me out today. Thanks me!