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