View Debugger is a cool new feature in Xcode 6 providing an interactive way to visualize view hierarchies.
It is useful for identifying problems with layouts that can’t be identified looking at a flat screen. It works while debugging Mac OS X applications running 10.10 or higher and iOS apps running 8.0 or higher. To start the view debugger, just click the Debug View Hierarchy button in the debug bar.
When facing a UI problem, start up the view debugger, and start digging into the view hierarchy.
View Debugger
The first order of business is breaking the 2D rendering out to 3D by panning anywhere in the content area. This reveals the layer ordering for all views, those visible to the user, hidden views, and covered views. The controls above the debug bar allow you to further manipulate the 3D rendering. You can adjust the view mode, vary the spacing between views, zoom in and out, show constraints, and filter layers.
Inspectors
You can click on any view or constraint to select it. The inspector panes have helpful information about the selected object. Selecting a view and navigating to the object inspector shows some basic information that varies depending on the class of the view. Here is the object inspector with an instance of UIImageView selected:
The object inspector also works for constraints, displaying their properties. The size inspector only works for views, showing the selected view’s bounds, position, constraints, and the backing layer’s anchor point.
Related: Debouncing the Illusion of Immediacy
Constraints
The list of constraints involved in a view is pretty helpful, but there is a way to see more of the auto layout picture in the 3D rendering. Clicking the “Show Constraints” icon filters the rendering to only views that have constraints attached to the selected view. This feature makes navigating through connected views a breeze:
Debug Navigator
Sometimes it is difficult to select views in the 3D rendering. When spacing the layers out and tilting the view isn’t enough, you can use the debug navigator. The debug navigator lets you see the parent-child relationships between views.
When facing a complicated broken constraint issue, I will use these tools in addition to pencil and paper, drawing out the views and constraints. I can usually see the problem before I get all the offending constraints drawn out. I really like these tools. They are fun to play with and speed up the debugging process. View debugging can save the day when you have a layout problem; offscreen views, covered views, hidden views and issues with constraints.
Have questions? Comment below or tweet to me!
