Facebook 在其官网宣布,正式开源其内部用于移动应用调试的平台 Sonar

082839_tRk2_2720166.jpg

项目地址:https://github.com/facebook/Sonar

Sonar 是一个用于调试 iOS 和 Android 移动应用的平台,通过一个简单的界面,开发者可以可视化地审查和控制其 APP,除了可以直接使用,Sonar 还支持使用插件 API 进行扩展。三年前 Facebook 已经开源过一款基于 Chrome 开发者工具的 Android 调试桥 Stetho,此次发布的 Sonar 比之更加先进,主要体现在跨平台更丰富的用户体验,以及最主要的可扩展性,官方建议开发者使用 Sonar 替代 Stetho。

Facebook 介绍,Sonar 已经被使用于内部许多项目中,其中的一些使用样例包括:

  • 通过显示 Litho 和 ComponentKit 组件,使工程师能够更精确地访问他们正在使用的功能的视图结构。

  • 处理 GraphQL 请求,而不是原始网络事件。

  • 实时跟踪性能指标,使开发人员能够更轻松地查找性能问题。

Sonar 由两部分组成:桌面客户端和移动 SDK。 Sonar 使用者与桌面客户端进行交互,而移动 SDK 则安装在工程师想要调试的 Android 或 iOS 应用程序中,之后将数据传输到 Sonar 桌面客户端。桌面客户端基于 Electron 和 Facebook 的开源项目,包括 React.js、Flow、Metro、RSocket 和 Yarn;移动 SDK 也大量使用 Facebook 的开源项目,如 Folly 和 RSocket。

7a248abd8a505faada65b1ab8ebebf3c470.jpg

Sonar 将可扩展性作为设计重点,为此 Facebook 的工程师已经为其构建了各种各样的插件,并随着 Sonar 的发布,将其中一部分开源。Sonar 官方表示,因为从一开始就与 Facebook 内部的框架和产品开发人员密切合作,所以可以保证其提供的插件 API 足够强大,而实际上 Sonar 中包含的所有工具都是插件,Sonar 的核心只提供一组 UI 组件并管理设备之间的连接,这意味着任何人都可以构建强大的插件工具。此次发布的版本中,无论应用使用标准 Android/iOS 视图还是 Litho/ComponentKit 组件构建,Sonar 与相应插件都能够使开发者审查其层次结构,同时也可以让开发者审查来自应用的网络流量和系统日志。

通过插件扩展 Sonar,开发者需要编写了一个桌面客户端插件来渲染 UI,并且需要编写一个移动 SDK 插件来暴露数据。对于桌面客户端插件,开发者只需要创建一个继承客户端插件基类的 React 组件,该组件负责与移动 SDK 插件进行通信并将其提供的数据进行渲染,同时桌面客户端插件也能够将命令发送回移动 SDK 插件。移动 SDK 插件由其运行所在平台的原生语言开发,包括 iOS 上的 Swift/Objective-C 和 Android 上的 Java/Kotlin。它需要注册一组 handler 并为其定义 response,这类似于开发者通常构建的处理客户端请求的服务器应用。

借助这种双向套接字连接和基于 React 的用户界面,Sonar 已经能够为开发者创建各种各样的工具,下图是一个示例。图中显示了应用程序层次结构检查器(layout inspector)的运行情况,属性检查器显示在右侧,可以不经过重新编译而实时编辑视图属性以快速测试不同的设计和配置。层次结构检查器本身是可扩展的,Litho 团队已经使用它为 Sonar 中的 Litho 组件带来相同的实时更新功能。

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐