震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

Jinkey發表於2017-05-27

1 背景

英文原文:
ryanipete.com/blog/ios/sw…
我寫得這個並不是翻譯而是用自己的理解重新表述這個功能,和原文內容有出入,有能力的可以檢視英文原文.微信公眾號 jinkey-love 歡迎交流

我們經常使用各種除錯工具,或者開源庫來支援懸浮窗除錯資訊,但蘋果的私有方法就提供了UIDebuggingInformationOverlay。

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

2 如何使用

在 AppDelegate 的 didFinishLaunchingWithOptions 方法中加入兩行程式碼即可。

let overlayClass = NSClassFromString("UIDebuggingInformationOverlay") as? UIWindow.Type
_ = overlayClass?.perform(NSSelectorFromString("prepareDebuggingOverlay"))複製程式碼

執行程式後,兩根手指點選狀態列即可調起這個除錯的懸浮層

3 UIDebuggingInformationOverlay能做什麼

3.1 檢視整個 window 的 View巢狀關係

View Hierarchy

這個功能可以檢視頁面層級的結構樹,點選感嘆號進入詳情頁(點 cell 是沒反應的),會展示那個 view 的 frame、bounds 和其他一些例項變數

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

3.2 檢視當前 ViewController 的屬性

VC Hierarchy

檢視啟用的 ViewController 的 childrenViewCotroller 的結構樹和相關屬性

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

3.3 檢視 UIApplication 的成員屬性

Ivar Explorer

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

3.4 測量元件大小

Measure

一開始還挺懵逼不知道要怎麼用,後來發現手指是直接在懸浮窗的外部進行進行拖動就可以了,如果你的元件被懸浮窗擋住了好像就沒辦法了。
選擇 Vertical ,手指在螢幕拖動即可顯示某個元件的高度;
選擇 Horizontal ,手指在螢幕拖動即可顯示某個元件的 寬度;

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

3.5 效果對比

Spec Compare

從相簿讀取一個圖片(你必須在info.plist 先配置相簿許可權NSPhotoLibraryUsageDescription)和當前介面對比。
點選 Add -> 從相簿選擇一個介面截圖 -> 點選剛新增的截圖 -> 手指在螢幕(懸浮窗外部)上下滑動 -> 即可動態改變截圖的透明度來對比截圖和當前介面的差異 -> 雙擊退出。

震驚!iOS 系統居然自帶懸浮視窗除錯工具 —— Jinkey 原創

我的微信公眾號 jinkey-love 歡迎交流

相關文章