UME - 丰富的Flutter调试工具

背景

目前西瓜视频作者侧 Flutter 业务场景已经覆盖了 40多个页面 (包括视频播放场景)，用户侧核心场景包括我的 Tab 也已经是 Flutter，在开发过程中，暴露了一些问题，debug 调试难、离开了 IDE 后犹如抓瞎、PM 设计 QA 验收过程中拿不到有用的信息，在市面上找了一圈，也没有类似 iOS Flex 这样强大的调试工具，例如视图大小、层级的展示，实例对象属性的实时修改，网络请求抓取，log 日志打印，文件查看等，所以西瓜视频 Flutter 基础团队决定开发 UME。

介绍

UME (读音：油米~) 是一个 Flutter 调试工具包，内部集成了丰富的调试小工具，设计UI、网络、监控、性能、logger 等，无论是研发、PM、还是 QA 均能使用。

目前已实现的功能

接下来会详细介绍一些核心功能的使用效果以及核心实现：

模块详解

Widget 信息

可以查看当前选中 widget 的大小、名称，文件路径以及代码所在行数，有了这工具，即使你不负责这个功能模块的开发，你也能迅速找到当前代码。

那如何能获取到选中当前 widget 的信息呢，大小通过RenderObject 就能拿到，那 widget 的代码位置呢？通过WidgetInspectorService 中的 getSelectedSummaryWidget 便可以获取到一个json字符串，我们来看下它的结构：

{
    "description":"Text",
    "type":"_ElementDiagnosticableTreeNode",
    "style":"dense",
    "hasChildren":true,
    "allowWrap":false,
    "locationId":0,
    "creationLocation":{
        "file":"file:///Users/.../example/lib/home/widgets/category_card.dart",
        "line":69,
        "column":15,
        "parameterLocations":[
            {
                "file":null,
                "line":70,
                "column":24,
                "name":"data"
            },
            ... 
        ]
    },
    "createdByLocalProject":true,
    "children":[
        {
            "description":"RichText",
            "type":"_ElementDiagnosticableTreeNode",
            "style":"dense",
            "allowWrap":false,
            "locationId":1,
            "creationLocation":{
                "file":"file://../packages/flutter/lib/src/widgets/text.dart",
                "line":425,
                "column":21,
                "parameterLocations":[
                    {
                        "file":null,
                        "line":426,
                        "column":7,
                        "name":"textAlign"
                    },
                   ...
                ]
            },
            "children":[],
            "widgetRuntimeType":"RichText",
            "stateful":false
        }
    ],
    "widgetRuntimeType":"Text",
    "stateful":false
}

由于数据太多了，省略了一部分， 然后根据对应的key即可找到需要的部分。

Widget层级

可以查看当前选中 widget 的树层级，以及它 renderObject 的详细 build 链。

这个获取到选中 widget 的一个 build 链还是比较简单的，通过 InspectorSelection 获取到当前 currentElement ，然后 使用 debugGetDiagnosticChain 方法就可以获取到整个build 链了。

RenderObject 的信息也很好得到，通过currentElement 拿到 当前的RenderObject，然后使用 toString方法就可以拿到了。

ShowCode