cocoa_chen

开源一款客户端研发调试用的桌面端工具:Echo

2020-02-26

Echo是一款客户端的桌面端调试工具,旨在提高客户端的研发调试效率。目前已在Github开源,欢迎大家使用。

背景

客户端在研发调试阶段都会集成一些debug工具,用来显示App的网络请求、业务逻辑等调试信息,以辅助RD和QA发现并定位问题。目前大部分的debug工具都是内置在App中,但由于手机屏幕小以及我们需要在App和debug工具之间频繁切换等情况,有时候调试体验并不太好。

基于现有的一些问题和团队需求,我们开源的这款Echo是一款简单易用、插件化易扩展、大屏显示和操作的桌面端工具,可以实时查看App各类数据(网络请求、日志、埋点等),也可以无须改动代码快速修改预览App的效果。

介绍

Echo已支持的功能模块主要分为四部分:

  • 基础功能:网络请求、NSUserDefaults查看修改、日志查看、Crash查看、GPS模拟、通知查看
  • UI视图:视图层级查看修改、视图边框查看
  • 性能检测:内存泄漏、卡顿检测
  • 业务功能:基于插件能力可快速扩展你自己的业务插件能力

Echo是一款桌面端工具,它的特点如下:

  • 大屏操作:显示效果更优,不影响原App的用户操作,使用体验更好
  • 简单易用:基于Bonjour和usbmuxd,只将Echo和App连接到同一个局域网即可自动连接,无须额外配置
  • 功能齐全:目前已拥有网络请求、视图层级查看修改等10多个功能,覆盖了客户端研发的大部分场景
  • 高扩展性:插件和模块机制可以方便我们快速添加新功能

如何使用

1、添加CocoaPods依赖

1
pod 'EchoSDK', :configurations => ["Debug"]

2、在App启动时添加以下代码

1
2
3
4
5
6
7
8
9
#ifdef DEBUG
#import <EchoSDK/ECOClient.h>
#endif

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
#ifdef DEBUG
[[ECOClient sharedClient] start];
#endif
}

3、启动Echo的Mac端

手动build工程的话,可以在/Mac目录下执行pod install之后,启动Echo.xcworkspace并运行。

扩展性

模板

在Echo的mac客户端中,内置了List-Detail、Outline和H5三个通用模板,满足了大部分业务插件的显示需求,即使不懂Mac开发也能快速的接入。
对于熟悉Mac开发的同学或者有自定义要求的同学,可以构建自己的插件模板显示,接入时只需要将模板名称与UI在Echo中做映射即可。

List-Detail模板:适用于列表类型数据的展示,同时支持选中时展示详细的信息。日志、内存泄漏以及扩展一些业务功能时,用该模板展示比较适合。效果如下:

Outline模板:适用于树形数据的展示,如NSUserDefaults功能就使用的该模板。效果如下:

H5模板:适用于H5页面的展示和操作,如位置模拟功能就使用的H5模板。效果如下:

插件

插件

Echo的每个能力在开发时都被抽象为一个插件,每个插件只需要关注要采集的数据及操作的响应即可,这样的设定便于我们快速的扩展新的功能。下面介绍如何快速的扩展一个新的插件:

1、新建一个继承自ECOBasePlugin的插件类,同时在init方法中设置插件名称以及注册渲染的UI模板。

1
2
3
4
5
6
7
8
9
10
11
12
+ (void)load {
//注册插件
[[ECOClient sharedClient] registerPlugin:[self class]];
}
- (instancetype)init {
self = [super init];
if (self) {
self.name = @"日志";
[self registerTemplate:ECOUITemplateType_ListDetail data:nil];
}
return self;
}

2、如果你想在SDK连接到Mac客户端时发送连接数据或其他功能参数,请覆写device:didChangedAuthState:方法:

1
2
3
4
5
6
7
//连接状态变更
- (void)device:(ECOChannelDeviceInfo *)device didChangedAuthState:(BOOL)isAuthed {
if (isAuthed) {
id yourData = "要发送的信息";
!self.deviceSendBlock ?: self.deviceSendBlock(device, yourData);
}
}

3、如果你想处理Mac客户端发送的命令,请覆写didReceivedPacketData:方法:

1
2
3
4
5
#pragma mark - ECOBasePlugin methods
- (void)didReceivedPacketData:(id)data {
// 在这里实现你自己的业务功能
NSDictionary *dict = (NSDictionary *)data;
}

以上就是扩展新插件的步骤,新的插件只需要关注自己的数据逻辑即可,扩展接入时都比较方便。

结语

Echo是一款为了提高客户端研发调试效率的工具,同时支持快速扩展新的业务插件,如果你也有这方面的需求,欢迎试用。Echo在开发过程中也借鉴了开源社区的一些优秀项目,感谢它们提供的技术帮助。更多内容参见Github:

Github: https://github.com/didi/echo

Tags: Echo
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

扫描二维码,分享此文章