Thumbnail image

New Feature: UI Debugging in TTBaseUIKit Since Version 2.2.1

Table of Contents

Abstract

While working on multiple projects with my team, I noticed a common problem we kept running into: Debugging the UI was hard and took a lot of time.

We often didn’t know:

  • If we set the layout constraints correctly
  • What would happen to the UI when there was more data than expected
  • How the interface would behave in edge cases or under stress

Using Xcode alone to debug these issues took a lot of time and effort — especially when working on complex views or tight deadlines.

That’s why I decided to create TTBaseDebugKit, a new feature inside TTBaseUIKit, designed to make UI development and debugging much easier.

What’s new?

With the UI debug tool now integrated into TTBaseUIKit, building an iOS app from a base project is easier than ever. This tool especially helps developers

  • Visualize layout boundaries and hierarchies
  • Test views quickly with mock data
  • Reduce time spent checking constraints manually

This update TTBaseDebugUIKit aims to speed up development and reduce friction when building or testing user interfaces — whether you’re using UIKit or SwiftUI.

Let’s Code

First, if you haven’t installed TTBaseUIKit yet, you should read the setup guide at ttbaseuikit-ui-framework.

Then, you just need to call

 LogViewHelper.share.config(withDes: "Description for Developers", isStartAppToShow: false, passCode: "").onShow()
  • passCode if you want to secure the debug section, just set a password
  • onShow Allows you to activate the debug feature on any screen in the app. To open it, just long-press on the screen

Or to make it easier, you can download the sample project and run it. TTBaseUIKitExample.

image

TTBaseUIKitExample

  • SHOW LOG API RESPONSE Displays all request and response data when calling APIs, making it easier for developers and testers to test, debug the app.
  • DEBUG UI LAYOUT TRIPLE TAP THE SCREEN To enable UI debug mode, just tap 3 times on any screen you want to check.
  • CAPTURE THE SCREEN Capture the current screen and add notes to save or send to a tester or developer.
  • SETTING DEV: You can add any settings you want, such as changing the app’s development environment, and more, …

Run & Explore - TTBaseUIKitExample

For more examples and usage, please refer to example project TTBaseUIKitExample

image

TTBaseUIKitExample

Conclusion

With TTBaseDebugKit built into TTBaseUIKit, our team can now debug UI faster, catch layout issues earlier, and focus more on building great user experiences.

Whether you’re working solo or in a large team, this tool can help you save time and reduce UI headaches — right from the start of your project.

TTBaseUIKit (Base Project - A framework to quickly create iOS project via base views)

TTBaseUIKit is a framework that helps you build iOS applications in the fastest and most efficient way, by providing base views written in both UIKit Programmatically and SwiftUI. The current release of TTBaseUIKit supports all versions of iOS and OS X since the introduction of Auto Layout on each platform, in Swift language with a single codebase.

In the future, I plan to build a macOS app to sync data, so developers can view log data directly on macOS or take screenshots easily. I’m really excited. Happy coding! See you soon ^^

Posts in this Series

Dev JourneyNotes TTBaseUIKitiOSSwiftUI