Обновление от 4 апреля 2023 г.

Обычно у меня нет проблем с переключением между разными платформами и языками программирования. Обычно мне требуется всего несколько дней, чтобы вернуться к ходу вещей при переходе между Swift и Kotlin, Studio и XCode. Однако на этот раз все было иначе. Проработав месяц над Android-проектом, я вернулся в Xcode и столкнулся с проблемой. Live Preview не отображал журналы, необходимые для отладки моего проекта. Я подумал, что это неудобно, но это похоже на невозможность просмотра журналов в Android Studio Compose Preview, так что давайте будем полны решимости найти решение!

Я потратил несколько часов, пытаясь решить проблему, и в итоге нашел решение, которым решил поделиться в этой статье. Однако несколько дней спустя, после перезапуска Xcode, я понял, что предварительный просмотр действительно печатал журналы очень хорошо. Это оказалось ошибкой Xcode, что немного расстроило, но я усвоил важный урок. При переключении между различными инструментами и платформами важно изменить свое мышление и подход!

Я решил опубликовать эту статью как свидетельство времени, которое я потратил на ненужную работу, и как дружеское напоминание коллегам-инженерам: прежде чем изобретать велосипед, найдите минутку, чтобы осмотреться — возможно, его уже изобрели!

«Отладка — это как быть детективом в криминальном фильме, где вы также являетесь убийцей». — Филипе Фортес

Разработка новых компонентов в больших проектах может занять много времени, особенно когда вам нужно отлаживать проблемы или отслеживать состояние ваших представлений. К счастью, в SwiftUI появился предварительный просмотр в реальном времени, позволяющий вам видеть свои изменения в режиме реального времени без необходимости запуска всего приложения в симуляторе или на устройстве. Но что, если вам нужно отладить проблему или просмотреть журналы во время разработки? К сожалению, предварительная версия Xcode SwiftUI не предоставляет готового решения для отображения журналов или представлений отладки. В этой статье мы рассмотрим специальное решение под названием PreviewLogger, которое позволяет вам просматривать журналы непосредственно в предварительных просмотрах SwiftUI и узнать, как оно может сэкономить ваше время во время разработки.

Преимущества PreviewLogger

  • Экономит время, избавляя от необходимости запускать все приложение только для тестирования одного компонента.
  • Обеспечивает живую обратную связь о состоянии вашего компонента, особенно при работе со сложной логикой.
  • Упрощает отладку, отображая журналы непосредственно в предварительном просмотре.

Пошаговое руководство по внедрению PreviewLogger

  1. Создайте новый файл Swift с именем PreviewLogger.swift в своем проекте.
  2. Скопируйте и вставьте следующий код в файл PreviewLogger.swift:
import SwiftUI

struct ContentView: View {
    @EnvironmentObject var previewLogger: PreviewLogger

    var body: some View {
        Button("Print Log") {
            previewLogger.log("Button tapped in SwiftUI preview!")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
            .environmentObject(PreviewLogger.shared)
            .previewWrapper()
    }
}

struct PreviewWrapper: ViewModifier {
    @EnvironmentObject var previewLogger: PreviewLogger

    func body(content: Content) -> some View {
        VStack {
            content
            List(previewLogger.logMessages.reversed(), id: \.self) { log in
                Text(log)
            }
        }
    }
}

extension View {
    func previewWrapper() -> some View {
        self.modifier(PreviewWrapper())
            .environmentObject(PreviewLogger.shared)
    }
}

class PreviewLogger: ObservableObject {
    static let shared = PreviewLogger()
    @Published private(set) var logMessages: [String] = []

    func log(_ message: String) {
        logMessages.append(message)
    }
}

3. В предварительном просмотре вашего компонента используйте модификатор .previewWrapper() и укажите объект окружения PreviewLogger.shared:

struct YourComponent_Previews: PreviewProvider {
    static var previews: some View {
        YourComponent()
            .environmentObject(PreviewLogger.shared)
            .previewWrapper()
    }
}

4. Вставьте экземпляр PreviewLogger в свой компонент, используя оболочку свойства @EnvironmentObject:

struct YourComponent: View {
    @EnvironmentObject var previewLogger: PreviewLogger

    // ...
}

5. Используйте метод previewLogger.log() для регистрации сообщений, которые будут отображаться непосредственно под предварительным просмотром:

Button("Print Log") {
    previewLogger.log("Button tapped in SwiftUI preview!")
}

PreviewLogger предоставляет удобный способ отображения журналов непосредственно в предварительных просмотрах SwiftUI, что позволяет ускорить и повысить эффективность процесса разработки. Это индивидуальное решение позволяет быстро тестировать и отлаживать отдельные компоненты без запуска всего приложения на симуляторе или устройстве. Попробуйте его в своих проектах и ​​узнайте, как он может сэкономить ваше время и улучшить рабочий процесс.

Стоит отметить, что PreviewLogger может не подходить для использования в цикле рендеринга представления. Согласно документации Apple по SwiftUI, изменение состояния или вызов функций, участвующих в цикле рендеринга, из контекста предварительного просмотра может привести к неопределенному поведению, и его, как правило, следует избегать.

Наконец, я хочу подчеркнуть, что любые отзывы об этой статье или PreviewLogger очень ценятся. Если у вас есть предложения по улучшению, альтернативные решения или вы просто хотите поделиться своими мыслями, не стесняйтесь делать это в разделе комментариев ниже. Я ценю ваш вклад и с нетерпением жду вашего ответа!

https://gist.github.com/sergenes/538dd76d7b6e247a3b763663cc2ed64b

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

  • 👏 Хлопайте за историю и подписывайтесь на автора 👉
  • 📰 Смотрите больше контента в публикации Level Up Coding
  • 💰 Бесплатный курс собеседования по программированию ⇒ Просмотреть курс
  • 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу