Utilizing the Debug View Hierarchy to better understand your apps UI

Lene Whiteley
Stacc
Published in
5 min readSep 2, 2020

Debugging comes in many forms; from console.log(“test!”) to breakpoints at runtime or sifting through CSS code in the DevTools bar of your browser window. Xcode provides the programmer with a built-in UI debugging tool called the Debug View Hierarchy; which lets the programmer see a 3D rendering of their app.

Can it be utilized for more than debugging?

Commence the debugging hunt

When creating an iOS app as a programmer you can choose to either use storyboards in Xcode, or use another code editor where you create all the views programmatically. Even programmers that utilize Xcode tend to create smaller views, as a dialog box, without storyboards. Creating an app or views programmatically without storyboards can be difficult if you don’t understand the view hierarchy, especially as a new programmer, and there is an abundance of auto layout constraints, so a visual bug tends to transpire more frequently. Such as one of the colors of the underlying layers is shown on the top view, but which layer does it inherit the color from? Maybe an image didn’t get the placement you intended, or suddenly some view is blocking your newly-created view.

The debugging hunt commences.

We all know the debug workflow, but it’s not always easy to locate where the bug is occurring. When I first started with mobile development; I could sit painstakingly long navigating through the storyboard endeavoring to work out where a misplaced color was being inherited from, or why there was a constraint bug with one of my views. Clicking through views, transmuting colors as I went along to deduce which layer had the color that was exhibiting instead of the intended color, modifying constraints or shifting views; wishing for a simpler way.

I came across the Debug View Hierarchy by accident, and my debugging wishes had been consummated.

Debug View Hierarchy

When utilizing the simulation in Xcode; a programmer can push the Debug View Hierarchy button on the debug bar, which pauses the app in its current state, permitting the programmer to inspect and understand the UI hierarchy of any app. It shows a visualizing of the hierarchy, view controllers, views, text, images, etc. provided through a 3D rendering of the app that the programmer can manipulate to retrieve useful or usable information.

View hierarchy on the left, 3D rendering in the middle, inspector area on the right, and view controls on the bottom

Programming in Swift can be daunting and when you’re first starting with app programming, it can be unclear how the UI view hierarchy in an iOS application work. This is where the Debug View Hierarchy comes in handy as it can give a programmer a deeper understanding of how the views are connected through the 3D rendering.

While utilizing the Debug View Hierarchy; the programmer can gain detailed information by exploring the view hierarchy, inspector area, and 3D rendering of the app. There are many buttons, switches, and sliders that allow the programmer to extract, filter out, and fixate on individual views. There are several actions the programmer can apply by control-clicking on a view.

Possible actions to perform on a view object

The various actions can be applied to the listed display objects so that one can simplify the display of the listed display objects. This way, the programmer can further narrow down the “problem” area. This feature is useful when hunting down an auto layout constraint, or if there is a bug with one of your views. Utilizing the inspector area of Xcode the programmer can find all the information needed about a selected view.

The Debug View Hierarchy is especially useful during UI debugging if you’re programmatically creating views instead of utilizing UI interfaces. The UI debugger provides the programmer with runtime constraint errors highlighted with a purple [!] symbol, and when clicked on you get the view that has the issue highlighted.

The main use of the Debug View Hierarchy is debugging, but a programmer can also use the 3D rendering to look for simple placements of new views or separating of exciting ones. It is an excellent way of visualizing where needed changes can happen, and where it will be simple and natural to add a feature to your app that is coming in a later version.

The next savant

There is plenty to explore within the Debug View Hierarchy, and I’ve only scratched the surface and provided what I feel is the most applicable of uses. The Debug View Hierarchy is an excellent UI debugger as it provides the programmer with numerous data and plenty of useful features that can advance you as a programmer. It is especially invaluable when programmatically creating UI interfaces, for newly graduated programmers, or programmers, in general, endeavoring to gain a deeper understanding of your app’s views, and… it’s pretty cool to see your app 3D rendered.

Hopefully, this gave you the taste to acquire more knowledge, so that you can grow into a savant when it comes to UI debugging!

--

--