扣丁书屋

它来了!Flutter 应用内调试工具 UME 开源啦

背景

字节跳动已有累计超过 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 等作为基础服务,插件可方便地拓展能力。

VM Service mixin

除此之外,UME 还提供了 FloatingWidget 通用浮窗容器、StoreMixin 存储能力等,供插件使用。


https://mp.weixin.qq.com/s/5kHNnHnfSQBZnKZOke2T2w

最多阅读

如何有效定位Flutter内存问题? 11月以前  |  10453次阅读
Flutter的手势GestureDetector分析详解 2年以前  |  5586次阅读
Flutter插件详解及其发布插件 2年以前  |  4557次阅读
在Flutter中添加资源和图片 2年以前  |  4007次阅读
发布Flutter开发的iOS程序 2年以前  |  3234次阅读
Flutter 状态管理指南之 Provider 2年以前  |  3022次阅读
Flutter for Web详细介绍 2年以前  |  2906次阅读
在Flutter中发起HTTP网络请求 2年以前  |  2889次阅读
使用Inspector检查用户界面 2年以前  |  2797次阅读
Flutter Widget框架概述 2年以前  |  2481次阅读
JSON和序列化 2年以前  |  2363次阅读
Flutter路由详解 2年以前  |  2327次阅读
Flutter框架概览 2年以前  |  2306次阅读
为Flutter应用程序添加交互 2年以前  |  2288次阅读
推荐5个Flutter重磅开源项目! 1年以前  |  2183次阅读
处理文本输入 2年以前  |  2150次阅读
使用自定义字体 2年以前  |  2146次阅读
编写国际化Flutter App 2年以前  |  2097次阅读

手机扫码阅读