Reveal Tutorial: Live View Debugging
In this Reveal tutorial, learn how to debug the view hierarchy and constraints of your iOS app – in real-time. By Erik Kerber.
Live Debugging Constraints
The text is now more of a paragraph than a title, so you should try making it a bit more flush against the sides of the cell by modifying the constraints.
Oftentimes it’s easier to debug constraints in Wireframe Mode, which shows just the view’s boundaries and the layout constraints. So, at the top of the center pane, press the left-most button on the left segmented control. Then rotate the view back so you’re looking at it from the front:
Open the Layout Inspector and scroll down to the Participating Constraints section. You will see 3 app constraints:
- width: superview.width – 26
- leading edge: superview.leading + 13
- bottom edge: superview.bottom + 13
The numbers -26, +13, and +13 represent the constant values of each constraint.
Expand each constraint, and change the constant values to 0 to snap the label to the bottom, left, and right edges of the cell.
Go back to the simulator and check out the app now. You’ll see all the views are updated – yes, this is all in real time – and observe the effect of the new constraints you added without touching a single line of code!
Where To Go From Here?
Well, this tutorial is done, and you should reward yourself for working through it! Try plugging one of your colleague’s apps into Reveal and see what you can find.
I bet you find a few holes here and there, and can even find ways to improve it with the powerful real-time view debugging. Then share what you find and get your colleague to buy you a beer or few in exchange for your valuable insight.
To view a thorough list of all the features Reveal supports, check out their Features page.
Also, have a look at the Release Notes for Reveal 1.5 to get more detailed descriptions of all the new features.
Finally, I recommend you check out this video of Sean Woodhouse from Itty Bitty Apps giving a live demo of Reveal in action.
I’d love to hear your take on Reveal 1.5, what you’ve learned as you’ve explored it, and of course, any questions that arose as you worked through this tutorial. Please leave your notes, brags, discoveries and questions below so that we can all learn together.