開發與維運

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

2020-04-20

一 背景

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

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

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

二 啄幕鳥簡介

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

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

image.png

啄幕鳥架構圖

image.png

啄幕鳥界面截圖

1 啄幕鳥架構

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

2 基礎服務

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

3 公共模塊

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

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

2）圖文預覽用以全屏查看文本、圖片。

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

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

image.png

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

三 主要工具介紹

1 UI 檢查工具

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

image.png

控件拾取、測距條截圖

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 命令等。

image.png

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

1-06-2.gif

UI 檢查、對象查看 Demo

2）方法監聽

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

image.png

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

1-08-2.gif

方法監聽 Demo

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

image.png

使用方法監聽需要輸入類名、方法名、keypath 等參數，故採用了命令行進行交互，擴展性好，配合命令配置，輸入也較方便。命令使用統一格式，<命令名縮寫><空格><命令參數><空格><命令參數>，如監聽命令 L className methodName，KVC 取值命令 k keyPath，調用棧查看命令 k callStack，所有命令詳見工程 README。為方便輸入，命令可通過後臺配置，一鍵輸入，命令配置採用如下格式的 JSON，可在啄幕鳥初始化時指定配置 JSON 的獲取地址，推薦在 https://github.com/ZimWoodpecker/WoodpeckerCmdSource 工程中建立配置，方便命令共享。

image.png

後臺命令配置格式

3）po 命令

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

image.png

App 中執行 po 命令

4）JSON 抓包

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

image.png

JSON 抓包工具截圖

四 更多功能

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

  • 系統信息：查看系統名稱、版本、屏幕、UA 等信息，支持添加業務方信息。
  • SandBox：查看沙盒文件，導出文件等。
  • Defaults：查看、新增、刪除 User Defaults。
  • 清除數據：清除所有沙盒數據，包括 User Default。
  • UI 對比：支持將設計圖導入到 App 中進行對比，並可畫線、標註需修改的地方，方便 UI 走查。
  • 查看圖片資源、Bundle 資源：查看 App 中的圖片資源與 Bundle 目錄內容。
  • Crash：查看本地 crash 日誌。
  • 觸點顯示：顯示手指觸控,方面錄屏時顯示觸控操作。
  • 性能插件：查看 CPU、內存佔用率，幀率，網絡流量等。
  • 其他業務方註冊的插件：環境切換、埋點、實驗、調試工具等。

image.png

啄幕鳥工具插件截圖

五 擴展開發

啄幕鳥使用插件化架構，新插件擴展方便，部分插件也支持功能擴展。一個類只需實現插件協議方法即可註冊為插件，可定製插件分組、分組顯示位置、插件名稱、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 。

Leave a Reply

Your email address will not be published. Required fields are marked *