This issue features an open source desktop debugging platform for mobile developers by Facebook——Flipper。

Flipper (formerly Sonar) is a platform for debugging iOS, Android, and React Native applications. Flipper itself only provides an architectural platform where developers can build plug-ins for business logic and use cases in applications, including plug-ins such as logging, layout checker, and network checker.

The Flipper desktop application connects to the mobile native SDK and can be used to send data to and from the device. Flipper has no restrictions on the type of data being sent, which allows for a better understanding of what’s going on inside the application in many different use cases. For example, you can view the state of the local cache, events that occur, or actions that are triggered on the application.

how to use

Flipper helps you debug Android, iOS, or even Web applications running in an emulator, emulator, connected physical development device, or browser. The Flipper consists of two parts:

• desktop application
• Native mobile SDKS for Android and iOS, clients for JavaScript, and even third-party clients that you can implement yourself or find on the web

Once Flipper is launched and the emulator/emulator or connected device is launched, you will start viewing the device logs (and any other device-level plugins that work with your device). To view application-specific data, you need to integrate the Flipper SDK into your application.

1. Installing the client

Mac： https://www.facebook.com/fbflipper/public/mac

Linux：https://www.facebook.com/fbflipper/public/linux

Windows： https://www.facebook.com/fbflipper/public/windows

2. Added to Android application

2.1 Add dependency

dependencies {
debugImplementation 'com.facebook.flipper:flipper:0.119.0'
debugImplementation 'com.facebook.soloader:soloader:0.10.1'
releaseImplementation 'com.facebook.flipper:flipper-noop:0.119.0'
}

2.2 Initialize in MyApplication

import com.facebook.flipper.android.AndroidFlipperClient;
import com.facebook.flipper.android.utils.FlipperUtils;
import com.facebook.flipper.core.FlipperClient;
import com.facebook.flipper.plugins.inspector.DescriptorMapping;
import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;

public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, false);
if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
final FlipperClient client = AndroidFlipperClient.getInstance(this);
client.addPlugin(new InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()));
client.start();
}
}
}

2.3 Add to the AndroidManifest

<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
android:exported="true"/>

3. Enable the plug-in in the client

By default, only the layout check plug-in is added to the client. You can add other plug-ins as required.

Add a network plug-in

rely on

dependencies {
  debugImplementation 'com.facebook.flipper:flipper-network-plugin:0.119.0'
}

Instantiation plug-in

import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;

NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
new NetworkingModule.CustomClientBuilder() {
    @Override
    public void apply(OkHttpClient.Builder builder) {
        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
    }
});
client.addPlugin(networkFlipperPlugin);

OkHttp integration

Since interceptors can modify requests and responses, Flipper interceptors are added after all other interceptors to get an accurate view of network traffic

import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;

new OkHttpClient.Builder()
    .addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin))
    .build();

You can read more on your own.