天天看點

App 開發神仙工具:幫你抓 Bug

一 背景

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

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

啄幕鳥項目現已開源,歡迎接入,共建共享。

二 啄幕鳥簡介

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

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

App 開發神仙工具:幫你抓 Bug

啄幕鳥架構圖

App 開發神仙工具:幫你抓 Bug

啄幕鳥界面截圖

1 啄幕鳥架構

啄幕鳥使用插件化架構,每個工具作為插件接入到啄幕鳥基礎服務當中,各個插件互相獨立,同時支援外部插件注冊、定制等,啄幕鳥還提供了一些通用功能子產品,如系統分享面闆、螢幕日志等,友善各插件使用。

2 基礎服務

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

3 公共子產品

啄幕鳥公共子產品包括分享面闆、圖文預覽、螢幕折線圖、螢幕日志四部分,随着工具開發,越來越多的通用能力會總結到公共子產品中。

1)分享面闆封裝了系統分享功能,友善各個工具導出資訊,啄幕鳥中的文本、圖檔皆支援分享面闆導出。

2)圖文預覽用以全屏檢視文本、圖檔。

3)螢幕折線圖友善插件直覺的顯示資料,啄幕鳥中性能插件使用了螢幕折線圖顯示性能資料。

4)螢幕日志子產品友善各插件在 App 内顯示日志、接受使用者輸入,螢幕日志界面大小可調,支援日志顯示、使用者輸入、搜尋、正規表達式過濾等功能,系統資訊工具直接使用了螢幕日志顯示資訊:

App 開發神仙工具:幫你抓 Bug

系統資訊插件中直接使用了螢幕日志顯示資訊

三 主要工具介紹

1 UI 檢查工具

UI 檢查包含控件拾取和測距條兩個工具,控件拾取會根據手指在螢幕上的點選坐标,遞歸周遊 View 層級,擷取包含觸點坐标的最靠前的 UI 控件,并顯示控件的類名、 frame、字型、圖檔 URL 等資訊,友善地擷取、導出運作時資料;測距條工具會在螢幕上添加大小、位置可控的 View 作為測量标尺,作為控件拾取的補充,對于某些不能通過控件拾取檢視的大小間距,如行間距等,可以使用測距條測量。

App 開發神仙工具:幫你抓 Bug

控件拾取、測距條截圖

2 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 指令等。

App 開發神仙工具:幫你抓 Bug

檢視某 UILabel 對象、使用 k 指令擷取圓角值

App 開發神仙工具:幫你抓 Bug

UI 檢查、對象檢視 Demo

2)方法監聽

對象檢視提供了擷取 App 靜态資料的方式,而方法監聽提供了擷取動态資料的方式,輸入監聽指令即可監聽任意 OC 方法的調用,輸出調用參數和傳回值,用以檢視代碼邏輯是否正常執行,關鍵方法是否調用,監聽網絡方法以在 App 内抓包等。

App 開發神仙工具:幫你抓 Bug

監聽設定自動息屏方法并顯示日志

App 開發神仙工具:幫你抓 Bug

方法監聽 Demo

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

App 開發神仙工具:幫你抓 Bug

使用方法監聽需要輸入類名、方法名、keypath 等參數,故采用了指令行進行互動,擴充性好,配合指令配置,輸入也較友善。指令使用統一格式,<指令名縮寫><空格><指令參數><空格><指令參數>,如監聽指令 L className methodName,KVC 取值指令 k keyPath,調用棧檢視指令 k callStack,所有指令詳見工程 README。為友善輸入,指令可通過背景配置,一鍵輸入,指令配置采用如下格式的 JSON,可在啄幕鳥初始化時指定配置 JSON 的擷取位址,推薦在

https://github.com/ZimWoodpecker/WoodpeckerCmdSource

工程中建立配置,友善指令共享。

App 開發神仙工具:幫你抓 Bug

背景指令配置格式

3)po 指令

po 指令是 iOS 開發中最常用的 debug 指令,po 指令工具會解析輸入字元串,擷取輸入的方法名、參數等,動态調用所輸入指令,并顯示傳回資訊。

App 開發神仙工具:幫你抓 Bug

App 中執行 po 指令

4)JSON 抓包

使用方法監聽抓包略有不便,資料量較大時會引起卡頓,是以提供了更友善的 JSON 抓包工具,通過監聽 NSJSONSerialization 的 JSON 解析方法實作抓包。

App 開發神仙工具:幫你抓 Bug

JSON 抓包工具截圖

四 更多功能

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

  • 系統資訊:檢視系統名稱、版本、螢幕、UA 等資訊,支援添加業務方資訊。
  • SandBox:檢視沙盒檔案,導出檔案等。
  • Defaults:檢視、新增、删除 User Defaults。
  • 清除資料:清除所有沙盒資料,包括 User Default。
  • UI 對比:支援将設計圖導入到 App 中進行對比,并可畫線、标注需修改的地方,友善 UI 走查。
  • 檢視圖檔資源、Bundle 資源:檢視 App 中的圖檔資源與 Bundle 目錄内容。
  • Crash:檢視本地 crash 日志。
  • 觸點顯示:顯示手指觸控,方面錄屏時顯示觸控操作。
  • 性能插件:檢視 CPU、記憶體占用率,幀率,網絡流量等。
  • 其他業務方注冊的插件:環境切換、埋點、實驗、調試工具等。
App 開發神仙工具:幫你抓 Bug

啄幕鳥工具插件截圖

五 擴充開發

啄幕鳥使用插件化架構,新插件擴充友善,部分插件也支援功能擴充。一個類隻需實作插件協定方法即可注冊為插件,可定制插件分組、分組顯示位置、插件名稱、icon、插件顯示位置等,簡單友善,高可定制。控件拾取、系統資訊等插件也支援功能擴充,通過監聽相關系統通知可以擷取拾取到的 View 等事件,并顯示自定義資訊,具體參見工程 README。

六 快速接入

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

啄幕鳥現已開源,是 AIOSO 的子項目之一,支援 iOS 8.0 及以上,阿裡巴巴集團内外使用pod YKWoodpecker 即可接入。

Get Started:

pod  'YKWoodpecker'           

一行代碼打開啄幕鳥:

#import "YKWoodpecker.h"
 // 顯示啄幕鳥入口
 [[YKWoodpeckerManager shareInstance] show];           

更多介紹詳見工程 README,Github 位址:

https://github.com/alibaba/youku-sdk-tool-woodpecker