EchoSDK 0.0.8

EchoSDK 0.0.8

×

由 cocoa-chen 维护。

EchoSDK 0.0.8

  • 作者
  • chenaibin

Echo是一款客户端桌面端调试工具，中文意为回声，寓意着 Mac 端和手机端之间就像回声一样相互联动。

背景

客户端在研发调试阶段基本都会集成一些 debug 工具，用来显示 App 的网络请求、卡顿检测结果等调试信息，以辅助 RD&QA 发现并定位问题。目前的 debug 工具基本都是内置在 App 中。这些小屏调试工具虽然可以满足客户端相关开发同学的日常研发需求，但是同样存在一些问题：

  • 由于手机屏幕的限制，现有的 debug 工具在数据展示、辅助功能等方面不够丰富，在浏览以及功能操作上体验一般。
  • 研发调试过程中需要频繁在 App 和 debug 工具之间切换，通过功能切换完成问题验证和分析，这会打断我们在 App 的页面操作，效率低下。通常，为了研发调试时有更好的体验，我们可能会更习惯使用 Charles、Reveal 等 Mac 端软件来实现调试需求。
  • Debug 工具其实是各种小调试能力的集合，现有的 Debug 工具基本是在展示入口上完成了聚集，一个新的调试能力的集成往往需要从零开始，扩展成本高。

基于以上现状和问题，Echo 大屏调试工具不仅可以满足客户端的研发调试需求，相比其他 debug 工具，它还具有以下优势：

  • 大屏幕：显示效果更优，不影响原 App 的用户操作，使用体验更好。
  • 扩展性：内置通用模板及插件机制可快速扩展新功能，只需关注业务数据即可，降低新功能扩展成本。
  • 聚合型：收敛客户端研发调试工具为一体，提高 RD 和 QA 同学的效率。
  • 缓存机制：插件自带缓存机制，出现问题时即使脱离大屏，后续也可快速连接排查定位。

介绍

Echo是一款简单易用、插件化易扩展、大屏显示和操作的客户端研发调试工具，可以实时查看 App 类别数据（网络请求、日志、埋点等），也可以不修改代码快速修改预览 App 的效果。

img

特点

  • 简单易用：将 Echo 和 App 连接到同一个局域网即可，无需额外配置。
  • 功能齐全：目前已拥有网络请求、视图层级查看修改等 10 几个功能，覆盖了客户端研发的大部分场景。
  • 高扩展性：插件和模块机制可以方便我们快速添加新功能。

功能

目前 Echo 已支持的功能模块分为四部分：

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

扩展性

插件

在每个功能章节中介绍的每个能力在开发时都被抽象为插件，每个插件只需关注采集的数据和操作的响应即可，这样的设计便于我们快速扩展新功能。下面介绍如何快速扩展一个新插件：

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

+ (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:方法：

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

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

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

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

模板

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

技术方案

img

img

如何使用

1、添加CocoaPods依赖

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

2、由于iOS14系统本地网络权限限制，需要在工程的Info.plist文件中添加NSLocalNetworkUsageDescription和NSBonjourServices配置。在Xcode中选中Info.plist文件，右键选择Open As Source Code，并添加如下内容：

<key>NSLocalNetworkUsageDescription</key>
<string></string>
<key>NSBonjourServices</key>
<array>
	<string>_ECHO._tcp</string>
</array>

在Xcode中显示效果如下图：

img

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

#ifdef DEBUG
#import <EchoSDK/ECOClient.h>
#endif

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

4、启动Echo的Mac端

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

iOS14 适配

iOS14系统对本地网络权限进行了更严格的限制，鉴于Echo底层用到了Bonjour服务，在Xcode12之后需要在工程的Info.plist文件中添加NSLocalNetworkUsageDescription和NSBonjourServices配置。在Xcode中选中Info.plist文件，右键选择Open As Source Code，并添加如下内容：

<key>NSLocalNetworkUsageDescription</key>
<string></string>
<key>NSBonjourServices</key>
<array>
	<string>_ECHO._tcp</string>
</array>

添加之后在Xcode中显示效果如下图：

img

注：即使不进行上述适配，Echo的自动连接功能仍会生效：你可以通过USB连接真机或者直接在同一台电脑上运行模拟器来实现自动连接。

感谢

在开发过程中，Echo使用和参考了以下优秀项目的部分代码

协议

Apache-2.0 license

Echo 根据 Apache-2.0 协议进行分发和使用，更多信息请参阅 协议文件。