So you’ve been working on some fancy UI for your app and you’ve just ran into a little niggle. Something doesn’t look quite right, not in the right place or you just can’t see it anywhere!

Here are two techniques I regularly use to troubleshoot any view related issues.

1) Setting a Border

This may sound basic, but it is tremendously useful. Having borders around the views helps visualise their boundaries. This is especially useful when dealing with images or icons with paddings, this can help you figure out why an icon has more space that it should have.

Is it the icon itself? or maybe it is the layout logic used for that icon?

Sample App with transparent images

Sample App with transparent images and borders

I find including the following category to my .pch file really handy as it saves me from including QuartzCore, setting a border width and color on every view I want to outline, only to remember to remove them all once I’m done.

UIView+Debugging.h

@interface UIView (Debugging)

- (void)setBorderColor:(UIColor *)color;
- (void)setBorderColorOnSubviews:(UIColor *)color;
- (void)setRandomBorderColor;
- (void)setRandomBorderColorsOnSubviews;

@end

UIView+Debugging.m

#import "UIView+Debugging.h"
#import QuartzCore/QuartzCore.h

@implementation UIView (Debugging)

- (void)setBorderColor:(UIColor *)color
{
    self.layer.borderWidth = 1.0f;
    self.layer.borderColor = color.CGColor;
}

- (void)setBorderColorOnSubviews:(UIColor *)color
{
    for (UIView *subview in self.subviews)
    {
        [subview setBorderColor:color];
    }
}

- (void)setRandomBorderColor
{
    [self setBorderColor:[self randomColorFromSet]];
}

- (void)setRandomBorderColorsOnSubviews
{
    for (UIView *subview in self.subviews)
    {
        [subview setBorderColor:[self randomColorFromSet]];
    }
}

- (UIColor *)randomColorFromSet
{
    NSArray *colors = @[ [UIColor blackColor],
                         [UIColor darkGrayColor],
                         [UIColor lightGrayColor],
                         [UIColor grayColor],
                         [UIColor redColor],
                         [UIColor greenColor],
                         [UIColor blueColor],
                         [UIColor cyanColor],
                         [UIColor yellowColor],
                         [UIColor magentaColor],
                         [UIColor orangeColor],
                         [UIColor purpleColor],
                         [UIColor brownColor]];
    
    NSUInteger index = ( arc4random() % colors.count );
    
    return colors[index];
}

@end

And to use it simply:

[myView setRandomBorderColor];

2) recursiveDescription

recursiveDescription is a hidden method that can be used from the debugger (as per this link). This will print out the full view hierarchy starting from the view this method is called on.Simply place a breakpoint at the end of viewDidLoad or viewWillAppear of a UIViewController for example, and type in the following command in the debugger.

po [[self view] recursiveDescription]

Sample of recursiveDescription