Do you often find yourself wondering how other developers build specific UI components for their apps, either to replicate them, or to get more knowledge on the technologies used to create them? I did this once, too. And then, I figured out. After this article, so will you.

One of the most useful tools to better understand a UI is the UI debugger in Xcode. It allows us to explore all the UI elements and get all the information related to them. But we can only use it on the apps we develop. We can’t use it to debug the UI of third-party apps.

But there’s a different way: To debug the UI of third-party apps, we can jailbreak an iOS or iPadOS device and install a package that allows us to debug the UI elements visible on the screen. It works with third-party apps, Apple apps, and even the OS UI.

In this post, we will learn more about Jailbreak and Cydia, how to add a new repository to Cydia, install the package that will allow us to debug the UI of third-party apps, and see some examples. Let’s start!

Jailbreak & Cydia

There’s a lot of information online to help you jailbreak your device and install Cydia. I’ve referred to this spreadsheet maintained by the r/jailbreak community to find the right tool for my device and iOS version.

Adding a repository

Once Cydia is installed, we need to add a new repository to be able to download and install the package to debug the UI of any app.

Open Cydia.
Open the ”Sources” tab.
Tap the ”Edit” button (top right).
Tap the ”Add” button (top left).
Enter this URL: http://nscake.github.io/.
Tap the ”Add Source” button.
Once added, tap the ”Return to Cydia” button.

Installing FLEXing

FLEXing is the package that will allow us to debug the UI of any app. The package is based on FLEX, an open-source in-app debugging and exploration tool for iOS and iPadOS.

Open Cydia.
Open the ”Search” tab.
Search “FLEXing”.
Open the first search result.
Tap the ”Modify” button (top right).
Tap the ”Install” button.
Tap the ”Confirm” button (top right).
Once installed, tap the ”Return to Cydia” button.

Start Debugging

Now that you have FLEXing installed, it’s time to start debugging.

To activate FLEX, tap and hold the status bar on any screen. It will show the FLEX menu that will allow you to explore the UI.

Note: The README.md file of the FLEX repository shows how to use it.

Examples

There are many interesting applications worth exploring, but as examples, I’ll use Reeder, Twitter, and Shortcuts. These appear to be using custom components, and you can validate that assumption using your jailbroken device with the FLEXing package.

Reeder

Reeder implemented a UI library built on top of UIKit to control all the UI elements and interactions shown in the app.

For example, that’s the class hiearchy of their own table view named Reeder.CoreTableView:

Reeder.CoreTableView
Reeder.CoreScrollViewBase
UIScrollView

As you can see, their table view is not based on UITableView, but on Reeder.CoreScrollViewBase which is based on UIScrollView from UIKit. This allows Reeder to implement their own table view that’s optimized for their own needs.

Twitter

Twitter uses a custom-built tab bar named TFNCustomTabBar instead of UITabBar, along with a custom tab bar view controller named T1TabBarViewController instead of UITabBarController.

This allows Twitter to implement multiple UI elements that aren’t supported by the UIKit components, such as:

Tab bar item without a title, only icon.
Custom tab bar dot.
Icon animation when tapped.

Shortcuts

The Shortcuts composer screen is composed by two main view controllers, WFEditWorkflowViewController and WFActionDrawerViewController which are managed by WFComposerPresentingViewController that partially contains the drawer logic.

Conclusion

If you’ve followed the information shared in this post, you now have a jailbroken device with the FLEXing package installed. Congratulations! Now is the time to dig into the UI of your favorite apps to learn how they were built.

Debugging the UI of Third-Party iOS Apps