User Interface (UI) Debugging in Xcode 6

User Interface (UI) Debugging in Xcode 6
COMMENTS ()
Tweet

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.

 

Xcode6

 

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).

 

Xcode6

 

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

 

Xcode6

 

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

 

Xcode6

 

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.

 

Xcode6

 

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.

 

Xcode6

 

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

 

Xcode6

 

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

 

Xcode6

 

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).

 

Xcode6

 

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”.

 

Xcode6

Xcode6

 

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.

 

Xcode6

 

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.

 

Xcode6

 

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

 

Xcode6

 

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

 

Xcode6

 

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:

 

Xcode6

 

– With this new snippet:

 

Xcode6

 

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

 

Xcode6

 

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

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Contact us

Whether you are a large enterprise looking to augment your teams with experts resources or an SME looking to scale your business or a startup looking to build something.
We are your digital growth partner.

Tel: +1 408 365 4638
Support: +1 (408) 512 1812