iOS Debugging Fundamentals

Welcome back! So far, you’ve looked at debugging code issues, but sometimes there are bugs and problems that are best debugged in a more visual way.

It sounds like this is what you need! In this episode, you’ll learn how to debug issues with your views and the view hierarchy.

Right now, there are a couple of visual bugs in your app. The first is that the completed icon is a triangle instead of a checkmark, and the second is that we are not seeing any text in our task list.

The first bug will be fixed in the next episode, where you’ll learn more about SwiftUI View debugging. For now, let’s focus on the missing task text.

Remove any breakpoints and run your project again. You can see the aforementioned bug in action. You’ve probably looked at the code and have not seen anything stand out as the potential source of our text bug. This is where Xcode can help.

Click the Debug View Hierarchy button. This pauses the app and shows a snapshot of the view, including each element in the view hierarchy. I’m going to place the simulator next to Xcode in order to see the elements on-screen and in the view debugger.

Click and drag a little bit, and notice how Xcode shows you a 3-D representation of the view. You can use this to see views that are behind other views, or just to help visualize the relationship between views.

You can also click on each slide of this slider on the right side to change the range of visible views.

That’s looking a bit less cluttered for us. Click and drag on the slider to the left side to adjust the space between visible views.

Perfect! You may have noticed that on the left, instead of seeing the stack, you can see the hierarchy of views all the way up to your application’s window. Pretty neat!

Click on one of our Text views and open the Object Inspector. Hmm…The text looks correct, but the color is very close to 1.0 for each of our components (red, green, and blue, and alpha).

What this means is that the text is set to white! No wonder we were unable to see anything in our task list. Where do we create this Text view? In the RowView.

Open RowView.swift and take a look there. Ahh, line 49 is incorrectly setting the foreground color to white.

Delete that line and run your app again. Yay! We can actually see our tasks now. Some of these are actually pretty cool!

That was some great detective work you did there. You continue to fix bugs in your application as I remove the ones in my house.

Only two bugs remain, one of which you’ll fix in the next episode where we discuss SwiftUI View Debugging.