Create SwiftUI views conveniently

If you’ve ever worked with SwiftUI, you know how powerful and flexible it can be. However, it’s not always easy to visualize the view hierarchy in your app. That’s where DebugFrame comes in!

Build SwiftUI views with DebugFrame lib - a simple and powerful tool that can help you build your SwiftUI views easily.

Note: DebugFrame can be used with iOS 14.0 and Mac OS 11.0 and higher.

• DebugFrame under the hood is a modifier that can be applied to any SwiftUI view. It adds an overlay to your view, which displays a border around the view and frame information, such as the view’s origin and size. This can be incredibly helpful when identifying layout issues, such as views that are too large or small or views that are positioned incorrectly.
• Another feature is a debugBackground extension for the View, with a randomly picked Color each re-render time.

Integration

You can add DebugFrame to your project using
CocoaPods:

pod 'DebugFrame', '2.0.0'

or Swift Package Manager:

DebugFrame or https://github.com/vdshko/DebugFrame

Usage

To use DebugFrame lib, simply add a .debugFrame() modifier to your view, and specify the color and frame information you want to display. Here are some examples:

default:

import DebugFrame

struct MyView: View {
    
    var body: some View {
        Text("DebugFrame default usage")
            .padding()
            .debugFrame()
    }
}

In this example, we’re adding a default/predefined red border around the text view, and displaying its origin and size in the overlay.

customized color:

import DebugFrame

struct MyView: View {
    
    var body: some View {
        Text("DebugFrame customized color usage")
            .multilineTextAlignment(.center)
            .padding()
            .debugFrame(color: .white)
    }
}

In this example, we’re adding a customized color of a white border around the text view and displaying its origin and size in the overlay.

customized outputs parameter:

import DebugFrame

struct MyView: View {
    
    var body: some View {
        Text("DebugFrame customized outputs parameter usage")
            .multilineTextAlignment(.center)
            .padding()
            .debugFrame(.size)
    }
}

In this example, we’re adding a default/predefined red border around the text view and displaying customized outputs parameter, only .size in the overlay.

DebugFrame also provides several convenient shortcuts. For example, if you only want to display the view’s .origin with a .green color, you can use this shortcut:

import DebugFrame

struct MyView: View {
    
    var body: some View {
        Text("DebugFrame customized color and outputs parameters usage")
            .multilineTextAlignment(.center)
            .padding()
            .debugFrame(color: .green, .origin)
    }
}

DebugFrame also allows you to specify multiple frame outputs at once, such as the view’s .originY and .height, etc:

import DebugFrame

struct MyView: View {
    
    var body: some View {
        Text("DebugFrame customized color and multiple outputs parameters usage")
            .multilineTextAlignment(.center)
            .padding()
            .debugFrame(color: .green, .originY, .height)
    }
}

Extra feature

You can add a .debugBackground() to your view. This is an extension for the View which randomly picked Color each re-render time. You can use it to identify is your view re-rendered by SwiftUI or not. It can be useful when working with ObservableObject classes or @Observable macro:

VStack {
  title
    .debugBackground()
  Spacer()
}

Conclusion

DebugFrame is a must-have tool for any iOS developer who wants to create stunning UI designs conveniently. It’s incredibly easy to use and can save lots of time when building your SwiftUI views.

Whether you’re a beginner or an experienced Swift developer, DebugFrame can be a valuable addition to your toolset.

To get started, check out the DebugFrame GitHub repository.

So, give it a try, and see how it can help you streamline your UI development process!
Have fun coding :)