字节跳动出品的 Flutter 应用内调试工具 UME 正式开源

news/2024/11/29 0:36:28/

2020 年 11 月,西瓜 Flutter 团队在字节跳动技术团队公众号上发布了 UME 工具的功能介绍和预览,今年 3 月 25 日的 Flutter Engage China 活动上,字节跳动 Flutter 技术负责人袁辉辉在 介绍 Flutter 业务的大规模落地的演讲 中也到了 UME 工具在字节内部的使用,也表示会在未来投入更多资源贡献 Flutter 社区和生态。现在,UME 工具正式对外发布,推荐大家试用、反馈和贡献:

  • Pub.dev 发布地址
    https://pub.flutter-io.cn/packages/flutter_ume

  • GitHub 开源地址
    https://github.com/bytedance/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 存储能力等,供插件使用。

欢迎参与开源贡献与共建

由于很多功能依赖引擎及工具链的改动,因此开源版的 UME 相比于公司内部版本在功能上进行了很多精简。但开发团队也在不断寻求解决方案,避免修改引擎,或将改动合入官方仓库,将更多实用功能引入开源版 UME。

我们鼓励广大开发者参与到 UME 的开发与生态建设中来,如开发更多实用的插件并贡献给社区,在 GitHub Issues 上提交功能建议、问题反馈,或修复问题并提交 Pull Request:

  • GitHub 开源地址
    https://github.com/bytedance/flutter_ume

  • Pub.dev 发布地址
    https://pub.flutter-io.cn/packages/flutter_ume

也同时欢迎各位开发者加入「字节跳动 Flutter 技术交流群」参与技术交流与讨论:

✨ 飞书交流群

复制链接至浏览器打开:

https://applink.feishu.cn/client/chat/chatter/add_by_link?link_token=b07u55bb-68f0-4a4b-871d-687637766a68


关于字节终端技术团队

字节跳动终端技术团队 (Client Infrastructure) 是大前端基础技术的全球化研发团队(分别在北京、上海、杭州、深圳、广州、新加坡和美国山景城设有研发团队),负责整个字节跳动的大前端基础设施建设,提升公司全产品线的性能、稳定性和工程效率;支持的产品包括但不限于抖音、今日头条、西瓜视频、飞书、瓜瓜龙等,在移动端、Web、Desktop 等各终端都有深入研究。

就是现在!客户端 / 前端 / 服务端 / 端智能算法 / 测试开发  面向全球范围招聘!一起来用技术改变世界,感兴趣可以联系邮箱 chenxuwei.cxw@bytedance.com,邮件主题  简历-姓名-求职意向-期望城市-电话


http://www.ppmy.cn/news/676607.html

相关文章

ArrayList使用详解

概述 ArrayList是Java中使用率很高的集合容器,面试频率也很高,本篇文章主要对ArrayList这个容器从功能到源码做一个深入解析,使用的是jdk8来讲解。 功能介绍 ArrayList是一个有顺序的容器,底层是一个数组,不过它是会…

CVPR2022车道线检测Efficient Lane Detection via Curve Modeling

分享前段时间看的一篇车道线检测方向的新工作,也是中了最近公开结果的2022CVPR,是上海交大、华东师大、香港城市大学和商汤科技合作完成的,代码已经开源。关于车道线检测任务,我之前也分享过几篇文章: 相关链接&#…

docker将容器制作成镜像并上传到阿里云镜像仓库

我们有时候服务需要拷贝到多个服务器,或者备份版本,这个时候就可以将服务容器制作成镜像上传私有仓库,需要的时候去私有仓库下载即可。 制作镜像 -a 作者 -m 备注 78e2274b24d3容器CONTAINER_ID tomcat02新的镜像名 v1为镜像tag docker comm…

学习线程池原理从手写一个线程池开始

概述 线程池技术想必大家都不陌生把,相信在平时的工作中没有少用,而且这也是面试频率非常高的一个知识点,那么大家知道它的实现原理和细节吗?如果直接去看jdk源码的话,可能有一定的难度,那么我们可以先通过…

Android 中RxPermissions 的使用

Android 中RxPermissions 的使用方法详解, 以请求拍照、读取位置权限为例 第一步,在module的build.gradle中的 dependencies { // RxPermissions 的使用方法详解implementation com.github.tbruyelle:rxpermissions:0.10.2implementation io.reactivex.rxjava2…

MySQL 表的操作命令合集(二)

目录 操作表的约束1、设置非空约束(NOT NULL,NK)2、设置字段的默认值(DEFAULT)3、设置唯一约束(UNIQUE, UK)4、设置主键约束(PRIMARY KEY,PK)4.1单字段主键4.…

WebGateway系列(1): Web Gateway介绍

本文介绍InterSystems Web Gateway的安装和配置。 在2018以前的ISC产品中, InterSystems Web Gateway被称为CSP Gateway。, CSP是Cache的页面技术。InterSystems的产品页面,Web服务等大多是CSP写成的。IRIS发布后CSP Gateway改名成Web Gatewa…

第六章 CSP 架构 - 静态文件

文章目录 第六章 CSP 架构 - 静态文件静态文件指示字符编码启用服务文件选项配置 Web 服务器以允许缓存服务器提供静态文件从 Web 服务器提供静态文件 第六章 CSP 架构 - 静态文件 静态文件 数据库服务器为所有 CSP 提供服务。 数据库服务器还可以通过 CSP 网关为 Web 应用程…