View Debugging With Reveal
Earlier this month, Itty Bitty Apps released a major update to their flagship product, Reveal. Reveal is a powerful application for macOS that lets you debug the view hierarchy of your iOS and tvOS applications.
What About Xcode View Debugging
Wait a minute. Xcode also ships with a view debugger. Why would I need a third party view debugger? While Xcode's view debugger is a welcome addition, Reveal outperforms Xcode in almost every way. It is easy to set up, it sports a beautiful, intuitive user interface, and it has several features Xcode's view debugger lacks.
One advantage Xcode has over Reveal is that no setup is required. But let me show you how easy it is integrate Reveal into an existing Xcode project.
Integrating Reveal into an existing project is trivial with CocoaPods. You can find a detailed integration guide on the Reveal website. This guide also includes the steps you need to take if you don't use CocoaPods.
Integrating Reveal into a project is as simple as adding a line to your project's Podfile.
target 'Zen' do platform :ios, '8.0' pod 'Reveal-SDK', :configurations => ['Debug'] end
It is very important that you don't link Reveal into production builds. That is what the
:configurations option is for. It instructs CocoaPods to only link Reveal into builds with a Debug configuration. Run
pod install to install the dependencies. That is it.
By integrating Reveal into your project, a server is automatically started when your application is launched. That is how Reveal can inspect your application. Reveal automatically picks up any servers on the same network or devices connected over USB. The latter is a new feature and very useful for fast and reliable debugging. You can debug simulator as well as device builds. Reveal can handle both.
The user interface of Reveal is intuitive and easy to use. Reveal shows the view hierarchy of the application on the left, an collection of inspectors on the right, and the application itself in the center. Like Xcode's view debugger, Reveal has a 2D and a 3D view.
In the view hierarchy, you can select a view to see its details in the inspectors on the right or you can filter the hierarchy using the filter bar at the bottom.
If you double-click a view in the view hierarchy, Reveal focuses that view. This means that the view you double-clicked becomes the root view of the view hierarchy. This is useful if you are working on a complex user interface and are only interested in a subtree of views.
The jump bar at the top lets you quickly jump to a view in the view hierarchy or change the current focus of Reveal.
The inspector on the right has five tabs. The first tab shows the Application Inspector. It includes a selection of useful information about the application you are debugging, such as application state and device information.
The Identity Inspector shows information about the currently selected view. Not only does it show you information about the view itself, it also shows you which view controller manages the view hierarchy to which the view belongs.
The Attributes Inspector of Reveal is similar to that of Interface Builder. Most of the attributes are editable and the changes you make are reflected in Reveal as well as on the device or in the simulator. This makes it ideal for trying out small tweaks to the user interface of your application.
Layout and Layer Inspector
As the name implies, the Layout Inspector lets you explore and modify the layout of the currently selected view. Reveal shows you an overview of the constraints of the current selection, indicating which are added by the system and which are added by the developer.
You can modify the frame or bounds of the view, apply a transform, or set the view's autoresizing mask.
Reveal lets you also inspect and manipulate the layer of the current selection. The Layer Inspector shows you the attributes of the view's layer, most of which are editable.
If you have used the previous version of Reveal, you immediately notice the new design. There are a number of interesting additions that make Reveal even better than before. For example, you can search the view hierarchy using the filter text field at the bottom, show or hide constraints, and hide system views. The latter is particularly useful if you are only interested in the views managed by your application.
You can easily switch between three display modes frames, content, or both. Another major feature is the ability to debug device builds over USB. This is a new addition that results in excellent performance and it also eliminates network issues that occasionally occur when using Bonjour.
As I mentioned earlier, Reveal goes much further than Xcode's view debugger. Did I mention that Reveal now also supports view debugging of application extensions. This is something Xcode's view debugger does not support yet.
Should You Use Reveal
Reveal has become an indispensable tool in my development workflow and I include it in every project I work on. It is easy to use and incredibly powerful. With the addition of support for USB connections, it has become more reliable and easier to use.
Reveal is much more than a view debugger. When I explore a complex project that is new to me, I use it to find out which view controller is responsible for a particular view. Reveal shows you this information in seconds.
What About Xcode
As I mentioned earlier, it is nice that Apple continues to invest in Xcode and its view debugger. That said, Reveal blows Xcode's view debugger out of the water. Reveal is faster, more reliable, and more powerful. It is true that Xcode doesn't require any setup to debug the view hierarchy of your application, but that is a small price I am willing to pay for a better solution packed with features.