团队：IEG用户发展中心-前端开发组
导语| 随着Flutter技术在跨端技术的普及与热门，越来越多的程序员都积极加入Flutter开发，越来越多的App都开始接入Flutter技术，甚至有些新的App采用纯Flutter技术开发。Flutter性能监控与检测俨然成为了大家最关心的事情，针对Flutter开发经验不一的问题，如何帮助新手开发快速发现问题，积累良好开发经验也是一件非常重要的事情。
愿景
在接入工具之前，
你是否也存在如下疑问呢？
工具接入后可以实现无痕检测吗？
发现问题可以实时可视化提示吗？
手机上查看数据方便吗？
测试能用吗？产品、设计都能用吗？
安排，必须安排上！！！
架构
针对Flutter项目主要从三个方面进行架构设计：
1. 性能监控工具 性能看板（全局悬浮窗展示，包括全局维度（CPU、内存、FPS）和页面维度（路由信息、页面加载耗时、Widget层级树））、内存泄漏、图片还原检测、MethodChannel监控 2. 开发者调试工具 网络请求监控调试、Widget信息显示（选择模式）、日志收集能力、设备信息 3. 设计走查工具 颜色吸管、标尺
（架构图）
性能看板
全局维度（全局悬浮窗展示）
- CPU：CPU使用占比（iOS）
- 内存：Heap使用占比、RasterCache（layerBytes、pictureBytes）使用情况、内存使用详情展示（以类为维度，支持搜索）（仅Debug、Profile模式支持）
- FPS：适配不同手机刷新频率的实时页面fps展示
页面维度
- 页面路由信息：展示页面Widget信息，快速定位代码
- 页面加载耗时：根据页面元素覆盖率计算页面加载耗时，实时反馈是否存在耗时瓶颈，针对loading、骨架屏做了相关优化处理，避免屏蔽真实页面元素覆盖情况
- Widget层级树（仅 Debug模式支持）：计算当前页面的Widget层级树，通过设定一个层级阈值，实时提醒开发者进行页面层级优化，减少不必要的层级优化UI渲染。
根据WidgetTree进行语义分析，判断Widget Node是否有使用低性能组件，快速帮助开发者发现问题及时优化。规则集是可以自定义的，开发者可以将自己踩过的坑以一定的规则加入语义分析规则，既能共享技能又能提升项目的质量。
内存泄漏（仅Debug、Profile模式支持）
页面退出后实时检测页面是否存在内存泄漏，通过告警提示和泄漏数据的展示帮助开发者快速发现泄漏问题并及时修复，优化内存占用。内存泄漏数据以格式化的数据显示，开发者可以在手机端查看，也支持文件导出查看。内存泄漏的检测不局限于页面Widget，也支持任何Widget或者Object的检测。
目前内存泄漏有一个小的问题：如图二所示，泄漏路径的对象文件名及所在行可能无法获取，Debug模式一般都能获取，Profile模式可能无法获取。
图片检测
Flutter 2.0发布后，官方DevTools新增了一个Invert Oversized Images的功能，当图像的实际分辨率明显大于其显示大小时系统会将其倒置，帮助开发者快速追踪内存占用，优化应用内存使用。而这个功能需要Flutter的升级以及IDE的配合，能否做到不限版本，手机上打开应用就能及时发现并提醒开发者呢？当然可以！
图片检测主要针对asset、网络图片、file类型等图片、多帧动图（如GIF）等资源在程序中是否存在图像本身的大小是否与组件显示大小不匹配的问题，检测到大小不一会进行高亮提示，将原图大小和图片组件本身大小进行对比显示，帮助开发者快速定位问题，及时优化内存占用。
网络调试
通过监控网络请求，将请求结果已格式化的数据展示（错误请求高亮提示错误码和对应的服务名），在需求测试检测可以方便测试或者产品针对不同的服务不同的错误码找到对应的开发，优化多人转发消息的流程，快速定位高效沟通。
针对M时间段如果发现N次同样的网络请求，进行告警提示，及时发现程序中不合理的代码造成频繁请求，造成资源浪费，有些死循环可能会把程序、后台拉挂。
MethodChannel监控
MethodChannel监控的目的主要有两个，一个是检测channel方法的耗时，同步执行耗时 过长的channel调用会影响程序的正常显示，比如在initState里面执行一个很耗时的channel掉调用会导致无法快速执行build进行UI渲染，影响体验。
另一个检测目的是及时发现channel方法没有result回调的情况，如果没有就以告警的形式进行提示。如果一个没有result的channel方法以await同步的方式执行，在该语句后再执行channel调用，会发现后面的语句无法正常执行。为了防止疏漏影响程序正常功能，这个检测还是很有必要的。
Widget信息（仅Debug模式支持）
针对多人开发项目，或者新入职的开发在熟悉代码的过程中，提供选择模式，点击页面某个图标或者文字，以弹窗的形式实时告知代码文件以及所在行数，帮助开发者快速定位代码，提高代码熟悉效率。
设计还原
项目开发过程中，视觉走查返工是不可避免的，往往需要开发、设计多次沟通检查代码核对信息，设计还原主要是针对这类问题提供自助检测，设计师可以根据颜色习惯以及标尺工具进行设计自助还原检查，针对还原问题截图定量反馈问题，提高双方效率。
日志收集
多人开发项目过程中，往往会出现部分开发用print的方式进行日志打印，针对插件或者项目中的print日志，往往profile或者release包是无法获取的。为了获取这类日志，方便开发定位问题，将print日志收集起来，以回调的方式支持程序自定义日志上报。同时，在debug模式会在每一行日志前加上具体的类和行数，支持IDE跳转快速定位。
设备信息
包括Dart VM信息（仅Debug、Profile模式支持），设备的平台、系统等信息。
现状
目前该性能监控工具已上线接入项目（上述提到的模块都已完成开发），在项目快速迭代中发现了不少性能问题，无痕实现性能检测与提示，明显提升了项目的开发质量。目前已通过蓝盾流水线实现NewMonkey自动模拟点击自动检测自动上报，针对重点问题实现自动上传到数据管理平台进行聚类上报（企业微信实时提醒）。
看了这么多，你是否对工具本身的性能和准确性有疑问？？？
Q：工具要收集这么多数据都存内存吗？数据过大会造成程序内存占用过大吗？ A：目前针对内存泄漏、MethodChannel监控数据、网络监控数据等数据都有存磁盘，比如内存泄漏只会在内存存储一个泄漏页面列表（仅存储String类型的页面名称），每个页面的泄漏数据都存储到磁盘，只有点开详情展示才会从磁盘加载到内存，退出页面会清除。MethodChannel监控数据、网络监控数据会进行批量磁盘存储，内存占用会进行数量控制，不会对应用造成太大的影响。
Q：页面加载耗时是准确的吗？FPS数据是实时计算的吗？ A：页面加载耗时参考了咸鱼团队和手Q那边页面覆盖率算法，目前针对我们的项目考虑到主要是竖屏场景，根据页面元素纵向覆盖率>=60%就算页面加载成功。针对loading页面（如果占位很小的loading其实不会达到页面60%的覆盖率）或者骨架屏的情况，增加了页面状态回调接口，防止页面加载耗时统计不准确。考虑到不同的项目情况，工具本身也可以动态调整覆盖率，实现横向、纵向不同比例的覆盖要求。FPS会考虑到不同的手机刷新频率（而非固定60的刷新频率）根据页面帧回调进行动态计算，考虑到页面加载时有网络请求等情况，会过滤到前1s的数据（这个阈值可以动态设置）减少误差。
Q：Android端无法获取CPU使用占比吗？能获取CPU使用占比详情数据吗？ A：由于Android 8.0以后Google的权限限制，SDK再也拿不到进程CPU的实时占用率。结合多方考虑，目前暂时不支持Android端查看CPU使用占比。iOS目前的CPU占比对标Xcode Profile数据。也有对比过Perfdog平台的数据（单核统计），两个平台算法不完全一致，就以官方Xcode（多核总和）为对比了。CPU详情数据可以获取，但是本身这个操作非常耗时2-3s左右，而且在手机上目前还没找到非常合适的方式进行展示，目前也在考虑将文件导出的方式。
Q：查看内存或者内存泄漏等功能都依赖Dart VM Service，IDE Debug会有影响吗？ A：Android连着AS Debug会出现无法attach的情况，内存相关数据无法获取，工具本身会调整显示（断开IDE连接就可以了）。iOS模拟器可以在Debug模式进行attach。针对这个问题，大家可以自建一个蓝盾流水线，自行打包上传到NewMonkey进行自动检测。
近期热文推荐
腾讯低代码OTeam建设概述
企业微信万亿级日志检索系统
关于《秦时明月世界》运维的那些事儿
—自研上云与core优化
你“在看”我吗？
