Preface:

Echo is a desktop debugging tool designed to improve client development and debugging efficiency. Now open source on Github, welcome to use.

background

During development and commissioning, the client integrates debugging tools to display debugging information such as App network requests and service logic to assist RD and QA to find and locate problems. At present, most debugging tools are built into the App. However, due to the small screen of the phone and the frequent switching between App and debugging tools, sometimes the debugging experience is not very good.

Based on some existing problems and team requirements, our open source Echo is a desktop tool that is easy to use, plug-in and easy to expand, with large screen display and operation. It can view all kinds of App data (network requests, logs, buried points, etc.) in real time, and can also quickly modify and preview the effect of App without changing the code.

introduce

Echo supports four functional modules:

  • Basic functions: network request, NSUserDefaults view modification, log view, Crash view, GPS simulation, notice view
  • UI view: view level view modification, view border view
  • Performance detection: memory leak and lag detection
  • Business capabilities: Quickly expand your own business plug-in capabilities based on plug-in capabilities

Echo is a desktop tool. Its features are as follows:

  • Large screen operation: better display effect, does not affect the original App user operation, better use experience
  • Easy to use: Based on Bonjour and USBMUxD, Echo and App can be automatically connected to the same LAN without additional configuration
  • Complete functions: At present, it has more than 10 functions such as network request, view level view and modification, covering most scenarios of client development
  • High extensibility: Plugins and modules make it easy to add new features quickly

How to use

1. Add CocoaPods dependencies

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

2. Add the following code when the App starts

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

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

3. Start the Mac side of Echo

To build the project manually, you can run Echo. Xcworkspace after executing pod install in the /Mac directory.

scalability

The template

Echo MAC client has built-in list-detail, Outline and H5 common templates, which meet the display requirements of most business plug-ins. Even if you do not know MAC development, you can quickly access Echo MAC client. For students who are familiar with Mac development or have customization requirements, they can build their own plug-in template display, just need to map the template name and UI in Echo.

List-detail template: this template is used to display List data and detailed information when selected. This template is suitable for logging, memory leaks, and extending some business functions. The effect is as follows:

Outline template: Suitable for displaying tree data, as used by the NSUserDefaults function. The effect is as follows:

H5 template: suitable for display and operation of H5 pages, such as location simulation function used H5 template. The effect is as follows:

The plug-in

Each capability of Echo is abstracted into a plug-in during development, and each plug-in only needs to focus on the data to be collected and the response of the operation. This setting facilitates us to expand new functions quickly. Here’s how to quickly extend a new plug-in:

Create a plugin class that inherits from the ECOBasePlugin and set the plugin name and register the rendered UI template in the init method.

+ (void)load {
    // Register the plug-in
    [[ECOClient sharedClient] registerPlugin:[self class]];
}
- (instancetype)init {
    self = [super init];
    if (self) {
        self.name = @ "log";
        [self registerTemplate:ECOUITemplateType_ListDetail data:nil];
    }
    return self;
}
Copy the code

2, if you want to connect to your Mac client in the SDK to send connection data or other function parameters, please overwrite the device: didChangedAuthState: methods:

// Connection status changed
- (void)device:(ECOChannelDeviceInfo *)device didChangedAuthState:(BOOL)isAuthed {
    if (isAuthed) {
        id yourData = "Message to send";
        !self.deviceSendBlock ?: self.deviceSendBlock(device, yourData); }}Copy the code

3, If you want to process commands from Mac clients, override the didReceivedPacketData: method:

#pragma mark - ECOBasePlugin methods
- (void)didReceivedPacketData:(id)data {
    // Implement your own business functions here
    NSDictionary *dict = (NSDictionary *)data;
}
Copy the code

These are the steps to extend the new plug-in, the new plug-in only need to pay attention to their own data logic, extension access is more convenient.

conclusion

Echo is a tool designed to improve the efficiency of client development and debugging. It also supports the rapid expansion of new business plug-ins. If you have such requirements, please try it out. Echo has also borrowed from some of the best projects in the open source community for its technical assistance. For more content and experience, please see:

Github: github.com/didi/echo