• Stars
    star
    1,028
  • Rank 44,809 (Top 0.9 %)
  • Language
    Objective-C
  • License
    Apache License 2.0
  • Created almost 5 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Echo是一款桌面端调试工具,旨在提高客户端的研发调试效率

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开发的同学或者有自定义要求的同学,可以构建自己的插件模板显示,接入时只需要将模板名称与UI在Echo中做映射即可。

技术方案

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 协议进行分发和使用,更多信息参见 协议文件

More Repositories

1

DoKit

一款面向泛前端产品研发全生命周期的效率平台。
Java
20,108
star
2

cube-ui

🔶 A fantastic mobile ui lib implement by Vue
JavaScript
9,141
star
3

chameleon

🦎 一套代码运行多端,一端所见即多端所见
JavaScript
9,016
star
4

VirtualAPK

A powerful and lightweight plugin framework for Android
Java
8,979
star
5

LogicFlow

A flow chart editing framework focusing on business customization. 专注于业务自定义的流程图编辑框架,支持实现脑图、ER图、UML、工作流等各种图编辑场景。
TypeScript
8,315
star
6

KnowStreaming

一站式云原生实时流数据平台,通过0侵入、插件化构建企业级Kafka服务,极大降低操作、存储和管理实时流数据门槛
Java
6,941
star
7

booster

🚀Optimizer for mobile applications
Kotlin
4,866
star
8

nightingale

An enterprise-level cloud-native monitoring system, which can be used as drop-in replacement of Prometheus for alerting and management.
Go
4,510
star
9

mpx

Mpx,一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
JavaScript
3,619
star
10

mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
Vue
3,454
star
11

sharingan

Sharingan(写轮眼)是一个基于golang的流量录制回放工具,适合项目重构、回归测试等。
Go
2,276
star
12

tinyid

ID Generator id生成器 分布式id生成系统,简单易用、高性能、高可用的id生成系统
Java
2,265
star
13

xiaoju-survey

XIAOJUSURVEY is an enterprises form builder and analytics platform that allows users to create questionnaires, exams, polls, quizzes, and analyze data online.
TypeScript
2,065
star
14

ChineseNLP

Datasets, SOTA results of every fields of Chinese NLP
HTML
1,783
star
15

DiDiPrism

小桔棱镜,一款专注移动端操作行为的利器! A powerful tool (iOS & Android) that focuses on mobile operation behavior!
Objective-C
1,716
star
16

gendry

a golang library for sql builder
Go
1,613
star
17

Hummer

一套移动端高性能高可用的动态化跨端开发框架
Objective-C
1,339
star
18

DDMQ

DDMQ is a distributed messaging product with low latency, high throughput and high availability.
Java
1,303
star
19

rdebug

Rdebug — Real Debugger
PHP
1,158
star
20

turbo

Turbo is a light-weight flow engine framework, support BPMN2.0. 一款轻量级流程引擎服务框架,可作为底层服务支持各类流程设计、低代码设计、工作流、审批流、服务编排等场景
Java
895
star
21

DroidAssist

A lightweight Android Studio gradle plugin based on Javassist for editing bytecode in Android.
Java
885
star
22

AoE

AoE (AI on Edge,终端智能,边缘计算) 是一个终端侧AI集成运行时环境 (IRE),帮助开发者提升效率。
C++
874
star
23

DRouter

Android Router Framework
Java
739
star
24

AgileTC

AgileTC is an agile test case management platform
JavaScript
673
star
25

falcon-log-agent

用于监控系统的日志采集agent,可无缝对接open-falcon
Go
583
star
26

super-jacoco

Java
473
star
27

epage

一款基于schema的低代码可视化页面配置工具
Vue
460
star
28

GateKeeper

A high-performance Golang gateway that supports rapid development and plug-inization
Go
436
star
29

sds

SDS是一个基于Java开发的简单、易用、高性能的服务降级系统,支持限流、熔断和降级等功能,服务端必备!!
Java
417
star
30

KnowSearch

面向Elasticsearch研发与运维人员,围绕集群、索引构建的零侵入、多租户的Elasticsearch GUI管控平台
Java
413
star
31

kemon

An Open-Source Pre and Post Callback-Based Framework for macOS Kernel Monitoring.
C
373
star
32

di18n

一种自动转换、基于配置的前端国际化方案
JavaScript
305
star
33

pile.js

pile.js components build with React.
CSS
267
star
34

ES-Fastloader

Quickly build large-scale ElasticSearch indices by using the fault tolerance and parallelism of Hadoop
Java
265
star
35

KnowAgent

基于日志模板构建,采集任务动态管控、数据质量精确度量,一站式日志采集平台
Java
255
star
36

Unify

An efficient, flexible Flutter-Native hybrid communication framework for seamless module integration and automatic code generation.
Dart
255
star
37

LogiCommon

Java版 认证、鉴权、管理、任务调度通用功能组件
Java
218
star
38

Tips

JavaScript
187
star
39

maskdetection

C++
179
star
40

DreamBox

DreamBox是一个为客户端开发者打造的统一视图开发框架,具有性能好、可动态更新的特点
Java
166
star
41

dlflow

DLFlow is a deep learning framework.
Python
157
star
42

didi.github.io

didi website
HTML
143
star
43

hetsann

Source Codes of HetSANN in the AAAI'20 paper: An Attention-based Graph Nerual Network for Heterogeneous Structural Learning.
Python
142
star
44

collection

go collection package for fasting coding
Go
127
star
45

athena

A release version for https://github.com/athena-team/athena
Python
124
star
46

JuShaTa

JuShaTa是一个Java容器,提供模块隔离及模块热加载能力。
Java
121
star
47

logbook

Java
107
star
48

heteta

HetETA: Heterogeneous Information Network Embedding for Estimating Time of Arrival
Python
105
star
49

levin

A Quick Way to Bulk Loading
C++
105
star
50

TrafficIndex

TTI ,Smart Transportation Industry Standard
C++
94
star
51

thrift-mock

A lightweight java test library for mocking thrift server
Java
92
star
52

mand-mobile-rn

💰 Mand Mobile for React Native, designed for financial scenarios.
TypeScript
88
star
53

vue-tmap

一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 Vue3 的高性能地图组件库
TypeScript
88
star
54

slime-validator

JavaScript library of validation based on Plugin system and make data validation be easy.
JavaScript
85
star
55

mtmc-vt

MTMC Vehicle Tracking For AI City challenge 2019
Jupyter Notebook
70
star
56

FeatureProbe

开源的高效可视化『功能』管理平台,提供灰度发布、AB实验、配置变更全功能。
66
star
57

sgt

didiyun super-agent daemon
Go
58
star
58

ALITA

ALITA is a layer-based data analysis tool. The front-end see
Java
51
star
59

react-tmap

一个基于腾讯地图JavaScript API GL、TypeScript 封装适用于 react 的高性能地图组件库
TypeScript
48
star
60

benchmark-thrift

An open source application designed to load test Thrift applications
Java
45
star
61

elastic-trib

elasticsearch cluster command line tool.
Go
39
star
62

mpx-cube-ui

基于"Mpx 小程序框架"的移动端基础组件库
TypeScript
27
star
63

yarc

基于 eBPF 的流量录制工具
C
26
star
64

tg-flow

Go
24
star
65

paladin

Scala
20
star
66

MEEP

End-to-end framework to build automatic agents (chatbots) for task-oriented dialogs
Python
18
star
67

WorkTrans

Python
15
star
68

ALITA_UI

ALITA is a layer-based data analysis tool. The back-end see
JavaScript
13
star
69

wmt2021_triangular_mt

The baseline model code for WMT 2021 Triangular MT
Python
13
star
70

MeetDot

Python
12
star
71

DAIBench

Shell
10
star
72

didi-tech-edu

9
star
73

daedalus

JavaScript
7
star
74

tmap-types

腾讯地图 js api 类型声明,主要用于 react-tmap 和 vue-tmap 组件库
5
star
75

Json-adapter

Java
3
star