當開發 App 完成功能後,有時需要驗證產品流程正確性,或是尋找其他問題,除了 Console 的方式顯示訊息外,有沒有其他方式可以顯示一些偵錯訊息呢?也可以讓非開發者也能一同協助呢?

目標

  • 非開發者 能夠協助驗證流程或是尋找問題
    • 驗證 使用者行為的紀錄 (ex. Flurry、FirebaseEvent)
    • 驗證 Api呼叫的狀況 (ex. 呼叫次數、回應時長)

解決方式

因此我們需要一個隨時可以顯示在畫面上的元件,並且可顯示任何偵錯訊息!

這裡直接附上專案連結 DebugTool

  • 初始化方式 ( 宣告靜態的 DebugTool 並且顯示它 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import DebugTool
class SceneDelegate: UIResponder, UIWindowSceneDelegate {

var window: UIWindow?

static var debugTool: DebugTool?

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let scene = (scene as? UIWindowScene) else { return }
#if DEBUG
SceneDelegate.debugTool = DebugTool(windowScene: scene, point: CGPoint(x: 100, y: 100))
SceneDelegate.debugTool?.show()
#endif
}
}
  • 依照觸發事件顯示訊息 ( 呼叫新增Toast )
1
2
3
4
5
SceneDelegate.debugTool?.addToast("客製化訊息: 123")
SceneDelegate.debugTool?.addToast("客製化訊息: 123", .custom(UIColor.purple))
SceneDelegate.debugTool?.addToast("使用者訊息: 點擊了A按鈕", .userEvent)
SceneDelegate.debugTool?.addToast("Api發送事件: 發送了OOXX的請求", .apiSend)
SceneDelegate.debugTool?.addToast("Api花費時間: 花費了0000ms", .apiTime)
  • 點擊 Apple 可以打開設定畫面
  • 長按 Apple 可以隱藏 Apple

應用到的技術

  • 利用 UIWindow 建立一個漂浮的 Apple - Link
  • 利用 OptionSet 建立多選選項 - Link
  • 取得 UILabel 文字高度或是寬度 - Link
  • 有 Padding 的 UILabel - Link
  • 利用 UIBezierPath 畫出彩色 Apple - Link