Debugging SwiftUI Code with Xcode’s Debugger

Written by Team Kodeco

Debugging is an essential part of any development process, and SwiftUI is no exception. Xcode comes with a powerful debugger to assist you in finding and fixing issues in your SwiftUI code.

Using Breakpoints in the Xcode Debugger

To debug your SwiftUI code with Xcode’s debugger, first set a breakpoint in your code. This can be done by clicking on the line number in the code editor. As an example, consider the following SwiftUI view:

struct ContentView: View {
  @State private var counter = 0

  var body: some View {
    VStack {
      Text("Here's the count: \(counter)")
        .padding()
      Button("Increase Counter") {
        counter += 1
      }
    }
  }
}

Here’s what your preview should look like:

In this example, to debug the counter variable, you could set a breakpoint inside the closure of the Button action. Simply click on the line number where counter += 1 is written in Xcode’s code editor. A blue indicator will appear to the left of the line number, indicating that a breakpoint has been set.

Here’s what you should see in Xcode:

Next, run your app in Xcode’s simulator or on a connected device, and click your app’s Increase Counter button. Xcode will pause your app’s execution at the breakpoint and show you the current state of your app in the debugger. Here, you can inspect the current value of the counter variable by typing po _counter into the debugger, which tells it to print the value of the counter object to the console.

Note: If you don’t see the lldb (low-level debugger) console, click the Show the Console button in the bottom righthand corner of Xcode’s screen.

Once you’ve figured out the issue or want to continue, just press the Continue button or press Control-Command-Y.

Debugging with the View Hierarchy Debugger

If you encounter issues finding the source of a bug in your SwiftUI code, consider using the Xcode View Hierarchy debugger. This tool allows you to inspect the view hierarchy of your app in detail, showing exactly which views are being rendered and their positioning on the screen. This can be especially helpful for identifying layout issues or other visual bugs.

To use the View Hierarchy debugger, run your app in Xcode’s simulator or on a connected device, then choose Debug ▸ View Debugging ▸ Capture View Hierarchy from Xcode’s menu bar. This will pause your app’s execution and display a live preview of your app’s view hierarchy.

Here, you can click on individual views to inspect their properties and layout constraints, or use Xcode’s inspector pane to get more detailed information.

Xcode also includes a number of other tools for debugging SwiftUI apps, including the memory graph debugger, which can help you track down memory leaks and the console, which can display detailed logs of your app’s activity.

Keep in mind, no matter how confident you are in your code, bugs can and will occur. By mastering Xcode’s debugger and other debugging tools, you’ll be better equipped to find and fix issues in your SwiftUI apps promptly and efficiently.