How to add a debug panel to your iOS application

When you’re developing an application it is often really convenient to have access to some “developer features” such as your request logs or any shortcuts that allow you to fake any event. At Lunabee Studio we like to have what we call a Debug Panel. This is a screen that is accessible from anywhere in the app by doing a simple gesture.

How to display

The debug panel is a simple UITableViewController containing all the information and tools you need to help you debugging your app. So in order to present it there are two really easy steps :

  • Detecting the expected gesture
  • Presenting the debug panel by calling the present method on the topest presented view controller

For the first step we will add a UIGestureRecognizer to our main UIWindow. This is the window where all our view controllers are loaded. Let’s say we have a var window: UIWindow? declared in our AppDelegate.swift and the following setupMainWindow() method is called in the application(_:didFinishLaunchingWithOptions:) .

All we have to do in order to add the UIGestureRecognizer is to add these lines before the window?.makeKeyAndVisible().

This example uses a pan gesture recognizer starting from the right edge of the screen of our phone but feel free to use other gestures.

Now the last step is to present our DebugViewController. As we have to present the debug menu view controller on the topest presented view controller, we have to look for it in our view hierarchy. This is why you have a “while” loop in the following function.

We are done! Now our debug panel is accessible from any screen of our app. Of course if you use multiple windows and you want to access the debug panel from any of them then you will have to implement this for all the windows. To make it simple, you can create a subclass of UIWindow to embed the gesture management.
This way, you’ll only have to instantiate your custom UIWindow where you need it.

Nice feature to have in the Debug Panel

At Lunabee Studio, in our debug panels we like to have these nice features :

  • A complete library of all our view controllers or custom views fed with fake data. It is really convenient in order to quickly check your UI. If you’re interested in this check the ShowcaseKit made by Heetch.
  • A history of all the request made with nice formatting in order to easily read any JSON body sent or received.
  • Any access to hidden variables such as IDs, tokens, … with capabilities of copy or reset them.

Warning use compiler flags

Warning! You don’t want to find your nice debug panel on the App Store so consider using compiler flags to embed all the code related to the debug panel we just saw. Check this out for more : https://medium.com/@ytyubox/xcode-preprocessing-with-custom-flags-in-swift-4bfde6e7a608

iOS developper at Lunabee Studio, also amateur nature photographer