Reveal Tutorial: Live View Debugging

Live View Debugging

In Artsy, hit the EXPLORE button the tab bar. Then in Reveal, hit refresh to update the view hierarchy with the EXPLORE screen; it should look something like this:

Imagine you would like to experiment with the visuals a bit, such as the background color and the text content.

In Reveal, click on the white background behind the cells to select the background view.

Open the Attributes Inspector in the right pane. Scroll down to the UIView section where you will find the Color group.

Select the dropdown for background and choose Light Gray Color, the background color should update in Reveal:

The new background looks pretty good, but darkening background reduced some of the contrast between the image and the background.

In the center pane, click on one of the images to select it. It will likely grab the UIImageView itself, though you will want to select the UICollectionViewCell subclass it is a part of instead. In the left pane, select the ARBrowseViewCell that the UIImageView is a subclass of.

Open the Layer Inspector in the right pane. Scroll down to the Border section and change the width to 1, and the color to Dark Gray Color:

Note: Changes to the layer’s border generally won’t be visible unless the view hierarchy is “collapsed” in Reveal.

The center cell now has a 1-point border to help give the images some pop from the darker background.

Not only did you just change UIView properties in real-time, but you also were able to modify the CALayer itself. Pretty powerful stuff.

Select the “AUCTIONS” text in the middle cell. Then, open the Attributes Inspector in the right pane and change the text field to:

Ray Wenderlich Art Fair - Come browse hundreds of the finest collection of Rageface art from around the world!

In the same inspector, change the lines property to 0 to support word wrapping:

You should see the updated text show up in Reveal:

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.