Author: Bytedance Terminal Technology — Rui Zhao

To get to the point first

  • Pub address: Pub. Dev /packages/fl…
  • GitHub: github.com/bytedance/f…

background

Bytedance has over 70 apps that use Flutter technology, and the company has over 600 Flutter developers. Behind this figure, there is a complete Flutter infrastructure link.

UME is the In-app Flutter debugging tool from the team behind Byteshop Flutter Infra. The purpose of UME is to provide in-app debugging functionality without the help of the Flutter IDE and DevTools.

At ByteDance, the internal version of UME has been polished for nearly a year, serving nearly 20 apps, and its many plug-in features have been well received by developers. This open source release of UME provides 10 different debugging plug-ins, covering UI inspection, performance tools, code view, log view and many other functions. Whether designers, product managers, R&D engineers or quality engineers, they can get useful information directly from the application, so as to improve the efficiency of development, debugging and acceptance of the whole team.

Function is introduced

UI plug-in package

The UI inspects the plug-in package, which provides the ability to access the widget’s basic information, the directory where the code is located, the widget hierarchy, and the build chain and description of the RenderObject by clicking on the widget. The color straw and alignment ruler help in the visual acceptance process.

Code to view

Code view plug-in, default based on WidgetInspectorService to extract creationLocation, get the current page library, and then through the VM Service to obtain the corresponding code content.

Allow the user to enter keywords, traverse scriptList to make fuzzy matching to the library, and achieve the ability to view arbitrary code content.

Logs show

By redirecting the debugPrint in the Foundation package, it implements piling processing of the log output function, records additional information such as the log output time, and provides functions such as filtering and exporting through the unified panel.

Performance plug-in Package

The Performance Plugin package introduces the official performance float layer provided by Flutter, enabling the ability to view the performance float layer without DevTools. Memory information provides information about the number of VM object instances and the memory usage.

Device information plug-in package

The device information Plugin displays the information provided by the Device_info Plugin; The CPU information plug-in is based on the System_info Plugin and directly reads system basic information from the Dart layer.

Develop custom plug-ins

In addition to the UME built-in plug-ins mentioned above, developers can develop their own plug-in packages based on the unified plug-in management and basic services provided by UME.

The implementation is as simple as implementing the methods in the Pluggable virtual class to provide the necessary information for the plug-in, as shown in the following example.

Developers can refer to the custom_plugin_Example example in the open source repository, as well as all the plug-in package code in the Kits directory, to learn how to implement a custom plug-in package.

Accessing basic services

To simplify plug-in development and improve code reuse, UME encapsulates basic services such as Inspector and VM Service so that plug-ins can easily expand their capabilities.

In addition, UME provides FloatingWidget generic floating window containers, StoreMixin storage capabilities, and more for use by plug-ins.

Welcome to contribute and build open source

Because many features depend on engine and toolchain changes, the open source version of UME is much more streamlined than the in-house version. But the development team is also looking for ways to avoid modifying the engine, or incorporating changes into the official repository, to bring more useful features into the open source version of UME.

We encourage developers to participate in the development and ecological construction of UME. For example, develop more useful plug-ins and contribute to the community, submit feature suggestions, issue feedback on GitHub Issues, or fix Issues and submit Pull requests.

Developers are welcome to join the Bytedance Flutter technical exchange group for technical exchanges and discussions.

About the Byte Terminal Technology team

Bytedance Client Infrastructure is a global r&d team (with r&d teams in Beijing, Shanghai, Hangzhou, Shenzhen, Guangzhou, Singapore and Mountain View, USA) responsible for the construction of the entire big front-end Infrastructure of Bytedance. Improve performance, stability and engineering efficiency across the company’s product line; The supported products include but are not limited to Douyin, Toutiao, Watermelon Video, Feishu, Guagualong, etc., which have been deeply researched on mobile terminal, Web, Desktop and other terminals.

Now is the time! Client/front-end/server/intelligent algorithm/test development for global recruitment! Let’s use technology to change the world. If you are interested, please contact [email protected]. Email subject: Resume – Name – Job Objective – Expected city – Phone number.