It can be hard to inspect and diagnose UI bugs and issues in your iOS views. Find out how Spark Inspector and other tools can help.
Visualizing bugs in your XIBs, storyboards, and handwritten methods that draw on the screen is a nightmare for iOS developers. Fortunately, there are good debugging tools that can make all of developers' lives a bit easier.
One such tool is Spark Inspector; it visualizes what is visible on the screen, allowing you to see the layers of views that make up individual view controllers, and to tweak the views in real-time and see the feedback on your device.
What is Spark Inspector?
Spark Inspector is two parts that, when rolled into one, provides a great debugging tool for visual and UI issues in your iOS applications. First, it's an application that runs on your Mac; however, the app is only one component that makes the view inspection process work seamlessly. The second part is the framework that you will link against in your application.
Once installed in your Xcode project, the framework will send visual and view hierarchy information from your device to the Spark Inspector application over your network. The Mac app will then parse the data, and display a view of the exact same screen that is visible on the device, allowing you to see a 3D, rotatable image of the screen that displays layer information regarding all subviews.
Spark Inspector is available from the developer's website for $49.99. A 30-day free trial is available.
The Spark Inspector application runs on OS X 10.8 and above, and the Spark Inspector Framework can work with iOS 6 and above, including iOS 8 and Xcode 6 betas.
Installing the Spark Inspector framework
Installing the framework is simple, and Spark Inspector comes with an easy to use setup utility. Follow these instructions to get started with the Spark Inspector framework.
- Close your Xcode project.
- Open Spark Inspector.
- Choose the Spark Inspector menu | Framework Setup Assistant.
- Click the Select Xcode Project... button (Figure A).
- Select your Xcode project file in the window that appears, and then click the Setup Project button.
Setting up Spark Inspector is easy with the included utility.
Spark Inspector (including the Spark Inspector framework inside your Xcode project) will go to work. When you re-open the Xcode project after setting up the framework and then build and run, the Spark Inspector framework will be linked against your project and will automatically start running when your app is launched on an iOS device or in the iOS simulator. You'll see a web browser window open with a local webpage showing the state of the framework's installation. If any errors occur during setup, they will be listed on this page.
Note: Remove the Spark Inspector framework before submitting your application to iTunes Connect for approval by Apple. If you don't, it could result in your app getting rejected during the approval process.
Inspecting views with Spark Inspector
To begin inspecting a view using Spark Inspector, you need to Build & Run the Xcode project after installing the framework in your project. Now launch the Spark Inspector application.
Spark Inspector mirrors the view from your device.
The framework will connect your application over the network to the Spark Inspector app running on your Mac, and you will see the same view that is displayed on your device inside of Spark Inspector (Figure B); this mirrored view is rotatable in a 3D space. Click and drag inside the middle view to begin rotating the layered view to get the perfect perspective to see the issue that is bugging you (and your app).
In the left-hand column, you'll get a view hierarchy breakdown, showing exactly which views are on screen. Hovering over and clicking the items in the left column will highlight them in the middle view, allowing you to see their current location on-screen.
In the right-hand column, when an item is selected, you'll be able to see the location information (rect size and frame information), along with layer information. Click in the middle tab (Frame Inspector), and you'll be able to tweak values (such as location, view size, etc.) and have the new values updated in real-time on the device screen, letting you get pixel perfection in your views.
Additional debugging options
There are many debugging tools available, including free options that are built into LLDB and other visual tools like Spark Inspector. Two tools that are comparable to Spark Inspector in terms of what they offer are: the built-in LLDB commands in po and another application called Reveal.
With LLDB (the Clang Debugger), you can do some pretty rad things with po (a debug command that lets you collect information from objects). To use it, set a breakpoint anywhere in your application that will get called when a view you wish to query is visible, and then type the following into the on-screen console in Xcode:
po [[UIWindow keyWindow] recursiveDescription]
You'll get back a printout in the console of the complete view hierarchy of your application (Figure C). You can call this on a specific view as well to just get its contents, but the above command will retrieve all of the views for the entire on-screen application. This can be a bit tedious, but it is a free option.
The output from the po command is not as readable as Spark Inspector or Reveal, but it can contain important debugging information.
For even more debugging features, check out the Reveal app, which is similar to Spark Inspector, but provides a better application component. In my testing, Reveal performed better than Spark Inspector, though all of this functionality comes at a higher price of $89. There is a 30-day trial version of Reveal.
If you use a visual interface debugging tool, which one do you use, and how do you like it? Let us know in the discussion.