User Interface (UI) Debugging in Xcode 6

A new era in debugging has been introduced with Apple’s launch of the new Xcode 6 scripting tool at the WWDC 14 conference that provides a range of new debugging options like Queue Debugging, User Interface Debugging (also known as View Debugging) and Integrating with Quick Look.

In this post we’re going to take closer at the View Debugging option to see just how you can utilize this option. We’ll go through a step-by-step tutorial that will show you how you can use this option in your debugging activities.

Let’s create a sample app (or project) that will enable us to test this debugging option. Say you want to build an app that can find images from Flickr based on a particular keyword and show it in a “collectionView”, as shown below.

 

 

To do that, you’ll first need to create a product named “SampleDebugging”, choose the language as “Swift” and select iPad in the Devices you’re targeting for the app (as depicted below).

 

 

Next you’ll create the project. When you do that, you’ll see the screen below.

 

 

Next, open the “ViewController” class and inherit it with a UICollectionView Controller (depicted below)

 

 

Now open the “Main.storyboard”, add a collectionViewController in it with a searchBar and also make it the initialView. Then add an ImageView in a cell, which will display the images coming in from Flickr.

 

 

In this example, I’m using a Utility Class for looking up images on Flickr (depicted below). These types of classes are easily available on the internet and you can find them with a quick google search.

 

 

Now, let’s open the “ViewController.swift” file and add the basic collectionViewController’s data source code.

 

 

Once that’s done, let’s set the cells reuse Identifier as a “photocell”

 

 

Now let’s add the code for configuring the cell, setting a photo coming from Flickr to the cell’s imageView, and starting the imageView with a 5px padding on the top and left side (as depicted in the code snippet below).

 

 

Once you’ve done that, just compile the code and run it. When you do that you’ll see the following screen, with the searchBar for adding keywords that the application will look up matching images for in Flickr. Just type in any keyword to test the application. In this example I’m going to use the keyword “cat”.

 

 

When I did that, I got the above results. As you can see some of the images that came up are blank. CollectionView in not loading all the images since some of the cells are coming up empty. So we need to debug the code to see where the problem lies.

Here’s where you can utilize the View Debugging optionJ. To do so, find the new toolpane in Xcode 6 and click the viewDebugging button.

 

 

When you do that you’ll see a new window pop up that will display (depicted below) while pausing your app in the background. As you can see, this window is split in 2 halves. The left hand pane shows the view hierarchy, which you can use to easily find the missing UI objects from your search. These missing images are displayed in the spatial view in the right hand pane.

 

 

You can click on these objects to locate their coordinates and autolayout constraints in the size Inspector window (shown below).

 

 

You can rotate The View Debugging window like a 3D object to select and inspect any view you want.

 

 

When I did that I found the bug in our sample code. It seems we added a pixel in the photo that referenced the frame while configuring the cell. This should have been added with bounds. Let’s fix that.

Replace the code snippet below:

 

 

– With this new snippet:

 

 

Now let’s try our image search again using the keyword “cat”.

 

 

Yay! It works!! So that’s basically how you can use the View Debugging option for troubleshooting code in your app projects.

Explore our blog
 

ABOUT FOLIO3

As a leading mobile app development company (iPhone, Android, Windows Phone, HTML5 app development), Folio3 specializes in native app development services and cross platform mobile app development services for the iPhone and iPad. We also offer extensive mobile app testing and QA services. If you have a mobile app idea that you’d like to discuss please or would like to know more about our iPhone app development services, please Contact Us. Learn more about our iPhone, Android and Windows Phone app development services