作者：位元組跳動終端技術 —— 趙瑞

先說重點

• Pub 地址：pub.dev/packages/fl…
• GitHub 地址：github.com/bytedance/f…

背景

位元組跳動已有累計超過 70 款 App 使用了 Flutter 技術，公司內有超過 600 位 Flutter 開發者。在這一數字背後，有一條完整的 Flutter 基礎設施鏈路作為支撐。

UME 是由位元組跳動 Flutter Infra 團隊出品的 Flutter 應用內除錯工具，目的是在脫離 Flutter IDE 與 DevTools 的情況下，提供應用內的除錯功能。

在位元組跳動，UME 內部版已打磨了近一年時間，服務了近二十個 App，眾多外掛功能廣受開發者好評。本次釋出的開源版 UME 提供了 10 個不同功能的除錯外掛，覆蓋 UI 檢查、效能工具、程式碼檢視、日誌檢視等眾多功能。無論是設計師、產品經理、研發工程師或質量工程師，都能直接從應用內獲取有用資訊，從而提升整個團隊的研發、除錯與驗收效率。

功能介紹

UI 外掛包

UI 檢查外掛包，提供了通過點選 widget 獲取 Widget 基本資訊、程式碼所在目錄、Widget 層級結構、RenderObject 的 build 鏈與描述的能力，顏色吸管與對齊標尺在視覺驗收環節提供有力幫助。

程式碼檢視

程式碼檢視外掛，預設基於 WidgetInspectorService 提取 creationLocation, 拿到當前頁面的 library，再通過 VM Service 獲取對應程式碼內容。

允許使用者輸入關鍵字，通過遍歷 scriptList 對 library 進行模糊匹配，實現對任意程式碼內容的檢視能力。

日誌展示

通過重定向 foundation 包中的 debugPrint，實現對日誌輸出函式的插樁處理，並記錄日誌輸出時間等額外資訊，通過統一皮膚提供篩選、匯出等功能。

效能外掛包

效能外掛包將 Flutter 官方提供的效能浮層引入，實現脫離 DevTools 檢視效能浮層的能力；記憶體資訊方面提供了當前 VM 物件例項數量與記憶體佔用大小等資訊。

裝置資訊外掛包

裝置資訊外掛展示了 device_info Plugin 提供的資訊；CPU 資訊外掛基於 system_info Plugin，直接從 Dart 層讀取系統基礎資訊。

開發自定義外掛

除了上述的 UME 內建外掛外，開發者可以基於 UME 提供的統一外掛管理與基礎服務，開發適合自己業務的外掛包。

實現方式也非常簡單，只需要實現 Pluggable 虛類中的方法，提供外掛必要資訊即可，程式碼示例如下圖。

開發者可以參考開源倉庫中的 custom_plugin_example 示例，以及 kits 目錄下的所有外掛包程式碼，來了解如何實現一個自定義外掛包。

訪問基礎服務

為簡化外掛開發，提高程式碼複用性，UME 封裝了 Inspector、VM Service 等作為基礎服務，外掛可方便地擴充能力。

除此之外，UME 還提供了 FloatingWidget 通用浮窗容器、StoreMixin 儲存能力等，供外掛使用。

歡迎參與開源貢獻與共建

由於很多功能依賴引擎及工具鏈的改動，因此開源版的 UME 相比於公司內部版本在功能上進行了很多精簡。但開發團隊也在不斷尋求解決方案，避免修改引擎，或將改動合入官方倉庫，將更多實用功能引入開源版 UME。

我們鼓勵廣大開發者，參與到 UME 的開發與生態建設上。比如開發更多實用的外掛並貢獻給社群，在 GitHub Issues 上提交功能建議、問題反饋，或修復問題並提交 Pull Request。

歡迎各位開發者加入位元組跳動 Flutter 技術交流群參與技術交流與討論。

關於位元組終端技術團隊

位元組跳動終端技術團隊(Client Infrastructure)是大前端基礎技術的全球化研發團隊（分別在北京、上海、杭州、深圳、廣州、新加坡和美國山景城設有研發團隊），負責整個位元組跳動的大前端基礎設施建設，提升公司全產品線的效能、穩定性和工程效率；支援的產品包括但不限於抖音、今日頭條、西瓜視訊、飛書、瓜瓜龍等，在移動端、Web、Desktop等各終端都有深入研究。

就是現在！客戶端／前端／服務端／端智慧演算法／測試開發 面向全球範圍招聘！一起來用技術改變世界，感興趣可以聯絡郵箱 chenxuwei.cxw@bytedance.com，郵件主題 簡歷-姓名-求職意向-期望城市-電話。