Categories
程式開發

別放走了那隻啄幕鳥:iOS開發提效好幫手


一、背景

客戶端日常開發中經常遇到各種低效痛點,比如開發UI 界面時,開發、設計同學走查UI 基本靠眼,不易於發現問題;設計同學想修改一個UI 元素,除非是原開發者,其他同學不知道相關的UI 類和UI 佈局,定位代碼費時費力;再如出現Bug 時無法在Bug 現場獲取數據定位問題,Debug 依賴電腦聯調,缺少獨立便捷的Debug 工具。

對此優酷開發了啄幕鳥 iOS 提效工具平台,在端上整合各種高效 Debug 工具,不依賴電腦聯調,直接獲取 APP 運行時數據,快速定位問題,提高開發測試效率。

二、啄幕鳥簡介

啄幕鳥,即手機屏幕上的啄木鳥,森林裡的啄木鳥抓蟲子,優酷的啄幕鳥抓 Bug。

啄幕鳥提效工具平台集合了UI 檢查、對象查看、方法監聽、po 命令執行、JSON 抓包等十多個開發工具,不依賴電腦聯調,直接獲取運行時數據,快速定位Bug,簡便易用,零侵入、零依賴、易接入、易擴展。

別放走了那隻啄幕鳥:iOS開發提效好幫手 1

啄幕鳥架構圖、啄幕鳥界​​面截圖

  1. 啄幕鳥架構

啄幕鳥使用插件化架構,每個工具作為插件接入到啄幕鳥基礎服務當中,各個插件相互獨立,同時支持外部插件註冊、定制等,啄幕鳥還提供了一些通用功能模塊,如係統分享面板、屏幕日誌等,方便插件使用。

  1. 基礎服務

基礎服務包括生命週期管理,插件加載、註冊、運行,資源管理,本地化等基礎能力。

  1. 公共模塊

啄幕鳥公共模塊包括分享面板、圖文預覽、屏幕折線圖、屏幕日誌四部分,隨著工具開發,越來越多的通用能力會總結到公共模塊中。

1)分享面板封裝了系統分享功能,方便各個工具導出信息,啄幕鳥中的文本、圖片皆支持分享面板導出;

2)圖文預覽用以全屏查看文本、圖片;

3)屏幕折線圖方便插件直觀的顯示數據,啄幕鳥中性能插件使用了屏幕折線圖顯示性能數據;

4)屏幕日誌模塊方便各插件在APP 內顯示日誌、接受用戶輸入,屏幕日誌界面大小可調,支持日誌顯示、用戶輸入、搜索、正則表達式過濾等功能,系統信息工具直接使用了屏幕日誌顯示信息:

別放走了那隻啄幕鳥:iOS開發提效好幫手 2

系統信息插件中直接使用了屏幕日誌顯示信息

三、主要工具介紹

  1. UI 檢查工具

UI 檢查包含控件拾取和測距條兩個工具,控件拾取會根據手指在屏幕上的點擊坐標,遞歸遍歷View 層級,獲取包含觸點坐標的最靠前的UI 控件,並顯示控件的類名、 frame、字體、圖片URL 等信息,方便地獲取、導出運行時數據;測距條工具會在屏幕上添加大小、位置可控的View 作為測量標尺,作為控件拾取的補充,對於某些不能通過控件拾取查看的大小間距,如行間距等,可以使用測距條測量。

別放走了那隻啄幕鳥:iOS開發提效好幫手 3

控件拾取、測距條截圖

  1. In-APP-Debug 工具

iOS 開發主要使用LLDB 的斷點、指令等進行Debug,依賴電腦聯調,In-APP-Debug 即不依賴電腦,使用APP 內的Debug 工具獲取運行時數據,幫助定位問題,啄幕鳥提供了多種查看運行時數據的方式:對象查看、方法監聽、po 命令和JSON 抓包,幫助在Bug 現場定位問題, In-APP-Debug 工具都利用了objective-C 的運行時特性,將運行時特性工具化,形成一能力多功能的開發工具,如方法監聽既可以用於定位Bug,也可以監聽網絡方法抓取網絡數據,其他工具也都有多種用途,可以極大提高Debug 效率。

1)對象查看

APP 中所有的對象通過繼承、代理、屬性等關係,可以看作一個或多個連通圖。從一個對像開始,可以利用運行時特性獲取連通圖裡任一個對象的屬性、成員變量,獲取運行時數據,以定位問題。雙擊控件拾取的信息區即可打開對象查看,對象查看會顯示拾取對象的屬性、成員變量列表,點擊對象即可查看它的屬性,層層查找即可查看到每一個相關的對象,並可以通過命令讀取對象key-path-value、執行po 命令等。

別放走了那隻啄幕鳥:iOS開發提效好幫手 4

查看某 UILabel 對象、使用 k 命令獲取圓角值

2)方法監聽

對象查看提供了獲取APP 靜態數據的方式,而方法監聽提供了獲取動態數據的方式,輸入監聽命令即可監聽任意OC 方法的調用,輸出調用參數和返回值,用以查看代碼邏輯是否正常執行,關鍵方法是否調用,監聽網絡方法以在APP 內抓包等。

別放走了那隻啄幕鳥:iOS開發提效好幫手 5

監聽設置自動息屏方法並顯示日誌

方法監聽利用了OC 的消息轉發機制,通過hook 監聽對象消息轉發的相關方法,最後可以在ykwoodpecker_forwardInvocation: 方法中收到封裝了被監聽方法調用參數和返回值的NSInvocation,即可獲取target、selector 等參數數組,根據參數編碼規則解析相應的參數,最後修改NSInvocation 的selector 為指向原方法的ykwoodpecker_selector,即可調用原方法獲取返回值,輸出日誌。

別放走了那隻啄幕鳥:iOS開發提效好幫手 6

3) po 命令

po 命令是 iOS 開發中最常用的 Debug 命令,po 命令工具會解析輸入字符串,獲取輸入的方法名、參數等,動態調用所輸入命令,並顯示返回信息。

別放走了那隻啄幕鳥:iOS開發提效好幫手 7

APP 中執行 po 命令

4)JSON 抓包

使用方法監聽抓包略有不便,數據量較大時會引起卡頓,因此提供了更方便的 JSON 抓包工具,通過監聽 NSJSONSerialization 的 JSON 解析方法實現抓包。

別放走了那隻啄幕鳥:iOS開發提效好幫手 8

JSON 抓包工具截圖

四、更多功能

隨著日常使用,啄幕鳥中增加了更多功能:

1)系統信息:查看系統名稱、版本、屏幕、UA 等信息,支持添加業務方信息;

2)SandBox:查看沙盒文件,導出文件等;

3)Defaults:查看、新增、刪除 User Defaults;

4)清除數據:清除所有沙盒數據,包括 User Default;

5)UI 對比:支持將設計圖導入到 APP 中進行對比,並可畫線、標註需修改的地方,方便 UI 走查;

6)查看圖片資源、Bundle 資源:查看 APP 中的圖片資源與 Bundle 目錄內容;

7)Crash:查看本地 crash 日誌;

8)觸點顯示:顯示手指觸控,方面錄屏時顯示觸控操作;

9)性能插件:查看 CPU、內存佔用率,幀率,網絡流量等;

10)其他業務方註冊的插件:環境切換、埋點、實驗、調試工具等。

別放走了那隻啄幕鳥:iOS開發提效好幫手 9

啄幕鳥工具插件截圖

五、擴展開發

啄幕鳥使用插件化架構,新插件擴展方便,部分插件也支持功能擴展。一個類只需實現插件協議方法即可註冊為插件,可定制插件分組、分組顯示位置、插件名稱、icon、插件顯示位置等,簡單方便,高可定制。控件拾取、系統信息等插件也支持功能擴展,通過監聽相關係統通知可以獲取拾取到的 View 等事件,並顯示自定義信息,具體參見工程 README。

六、接入

啄幕鳥推出以來深受歡迎,已成為產品、設計、開發、測試日常互懟居家旅行必備之工具,啄幕鳥不依賴優酷、阿里或其它第三方庫和數據,主要功能皆通過系統API或hook 方式實現,沒有使用+load、+initialize 方法,不開啟啄幕鳥不會執行任何代碼,簡單安全,零侵入,零依賴。

啄幕鳥現已開源,是 AIOSO 的子項目之一,支持 iOS 8.0 及以上,阿里巴巴集團內外使用‘pod YKWoodpecker’即可接入,更多詳見工程 README。

啄幕鳥 Github 地址:https://github.com/alibaba/youku-sdk-tool-woodpecker

作者 | 阿里文娛高級無線開發工程師 氚雨