It is not the case that we work every day on creating new features for our application. The tasks listed on our JIRA board are not solely focused on adding new features; we also receive tasks related to fixing bugs. Additionally, while we are in the process of developing a new feature, it's common to encounter bugs. In this article, I want to offer my insights on debugging to assist you in finding solutions more efficiently.
While my insights might be iOS development specific, if you are a mobile developer or front-end developer, I believe you'll find them relatable at many points.
Identify the problem first.
A clear understanding of the problem is essential for developing an effective solution. To gain this understanding, it is necessary to conduct a thorough analysis of the problem. During the analysis process, it is important to ask questions to gain a deeper understanding of the problem.
For example, if the problem is related to a user interface, it is necessary to determine whether the issue is a bug or a data-related issue. Additionally, it is important to determine if the problem is limited to one specific type of device or if it occurs on other types of devices as well. Furthermore, it should be considered to identify the operating system version in which the problem occurs, as this information can provide valuable insights into the cause of the problem. By asking the right questions, we can gain a clear understanding of the problem.
Some questions that I frequently think about when I encounter a UI bug are the following.
Does this problem occur on every device (every model of iPhone)?
Does this problem occur on every iOS version?
Does this problem occur in the simulator?
Does this problem occur on physical devices?
Do other components of the UI match the design?
Could it be related to the dark theme or the light theme?
Could it be related to the system settings?
In addition to code review or testing on different devices, I use two tools to find the problem and the solution. One of them is a Figma plugin that I developed, and the other one is Visual Debugger on Xcode, which we will talk about later on.
To measure the size of components, paddings, and other details, I use Screenshot Resizer. It is not directly a tool to measure components. I take a screenshot of the simulator or physical device, add it to a Figma canvas, run the plugin, create a new frame on that canvas, and place it where I want to measure. I wrote an article that covers the story behind that plugin and how to use it.
Before we start to Xcode's capabilities for debugging, I would like to share a recent UI-related debug story that I won't forget.
Recently, while developing a screen, I encountered UI bugs. The issue involved distortion on the physical device, but when I tested the screen on the iPhone 14 simulator, everything was properly displayed in the correct place and size. However, when I checked the physical iPhone 14 device, I noticed excessive padding and truncated text that made it difficult to understand. Since the project is confidential, I was not able to share the UI with the developer community and get opinions about the problem from them. I investigated the issue, trying to determine the cause, but the problem was not limited to a single component. Instead, it was occurring in multiple components, and I attempted to identify a pattern or common component that may be contributing to the issue. After spending many hours investigating, checking iOS versions, and testing other iPhone models, I finally found the problem. The font size on my device was set larger than the default one in system settings, which distorted the UI. After discovering this, I felt a great sense of relief. 🤗 This was a valuable lesson for me, as it taught me that not every issue is caused by code; sometimes it can be an accessibility issue by not making the components dynamic size to the system settings.
Debugging on Xcode
In two previous articles, we covered the Screenshot Resizer Figma plugin, which makes it easy to measure component size and paddings easily. Another way to debug for UI issues is to check View Hierarchy on Xcode. When you run the app and then click View Hierarchy, it takes a snapshot of the current screen and lets you inspect the layers. This allows you to see whether a component is rendered or not, which layer is on top, the frame size of a component, and more. Sounds interesting? If you'd like to learn more about Visual Debugger on Xcode, Sean Allen's following video is really helpful.
Working at a startup for over 2 years gave me some nice development skills and helped me to become a product-minded developer. Now, as I change my job and work in an enterprise company, being a member of an iOS team with talented people has brought me new skills and new perspectives. During our pair programming sessions, I realize that they debug on Xcode effectively. I used to be the type of person who added print statements inside functions to see if they worked. Now, I use breakpoints more than ever. I have added two helpful videos to learn more about debugging tricks on Xcode. I believe that learning the IDE's capabilities and features better helps us to code more effectively.
Friendly reminder: If these don't work for you, and you are stuck at some point, it is okay to ask for help 💙
I would like to finish my article with a quote by Nicholas Negroponte: "Programming allows you to think about thinking, and while debugging you learn learning." We all need to improve our debugging skills for greater productivity. I hope you enjoyed this article and the resources that I recommend. If you have any feedback, do not hesitate to write me via hi@iremkaraoglu.com. If you would like to be notified when I publish new articles, please subscribe to my newsletter. Until next time, take care! 🍀