Leave a rating/review
Our app is almost bug free, only two more remain. In the previous episode you saw how to debug your views when running your application on a simulator or physical device.
But, wouldn’t it be cool to have a way to debug your views using SwiftUI Previews? Fortunately, Xcode has you covered as well!
Open RowView.swift and, if necessary, resume your preview. In order to debug the checkmark issue more quickly, change line 42 to read as follows:
if task.completed == false {
Now you can see the aforementioned bug in action, a triangle shows up instead of a checkmark. Instead of just running your Live Preview. Click and hold the button, and select Debug Preview instead.
You now have the debugger running, but within your Live Preview! And you have access to all of your debugging tools like the Console, View Debugger, and breakpoints. Very handy indeed.
Just as you did in the previous video, click the Debug View Hierarchy button. It may take a little but, but the debug bar should eventually show up at the bottom. If you can’t see the Debug Area go to View > Debug Area > Show Debug Area.
Next up, click on the image that shows up for a completed task and inspect it using the Object Inspector. Alright, so there is data for this image.
Scroll down and look at the label for this system image. Aha! It says triangle, which means the code is likely using that system image and not a checkmark.
Open RowView.swift one last time and take a look at line 37, where the Image is created. There’s the problem just as you saw while debugging your view.
Change line 37 to use a checkmark system image.
let checkmark = Image(systemName: "checkmark")
Now click the Refresh button in your Preview and check out the results. Fantastic! The triangle is gone and, instead, a checkmark is now shown.
Before we wrap up, don’t forget to change line 42 back to what it was.
if task.completed {
Otherwise we’d be introducing a bug while fixing another one. Run your app one last time, click on a task, mark it as completed, and come back to the list. The checkmark is now correctly shown.
Being able to debug SwiftUI Views in a more visual way, and without having to run your application on a device or simulator, is super useful. I’m not sure finding these last two bugs would have been easy without these tools.
If you have hundreds or thousands of lines of code, it’s not as straightforward to find problems like a wrong or invalid string for an Image, or looking through all the color modifiers in your app to see if any are incorrect.
There is one last bug in the application, but you’re an expert Detective Pikachu by now, so you’re going to fix that in the next challenge episode! See ya there :)