This article introduces Flipper, a desktop debugging platform for mobile developers. The debugger features logging, layout, files, performance monitoring, and more.

Flipper is facebook’s open source desktop debugging platform for mobile (Android/iOS) developers.

Source address: https://github.com/facebook/flipper

Official website: https://fbflipper.com/

It is divided into two parts

  • Desktop applications for macOS (currently macOS only)

  • Native SDK for Android and iOS

The latest version can be downloaded from Github. After we integrate the SDK into the Android or iOS app, we can open the desktop app and see the following window. Currently, it has several built-in plug-ins, respectively:

  • Logs

  • Layout Inspector

  • Network

  • Sandbox

  • Shared Preferences

  • LeakCanary

  • Crash Reporter Plugin

Note: In addition to the built-in plug-ins, you can also develop your own plug-ins to implement custom functions

1. Add dependencies


     
    
      
    DebugImplementation 'com. Facebook. Flipper: flipper: 0.14.1'
    
      
    DebugImplementation 'com. Facebook. Soloader: soloader: 0.5.1'
    
      
    DebugImplementation 'com. Squareup. Leakcanary: leakcanary - android: 1.6.1'
    
      
    ReleaseImplementation 'com. Squareup. Leakcanary: leakcanary - android - no - op: 1.6.1'
    
      
    Implementation 'com. Squareup. Okhttp3: okhttp: 3.6.0'
    
     
Copy the code

2. Enable the plug-in

Log is enabled by default, and other functions need to be enabled by code. The key codes are as follows:


     
    
      
    .
    
      
    final FlipperClient client = AndroidFlipperClient.getInstance(this);
    
      
    / / the Network plugin
    
      
    final NetworkFlipperPlugin networkPlugin = new NetworkFlipperPlugin();
    
      
    final FlipperOkhttpInterceptor interceptor = new FlipperOkhttpInterceptor(networkPlugin);
    
      
    client.addPlugin(networkPlugin);
    
      
    / / Inspector
    
      
    client.addPlugin(new InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()));
    
      
    / / the Sandbox plug-in
    
      
    client.addPlugin(new SandboxFlipperPlugin(new SandboxFlipperPluginStrategy() {
    
      
        @Nullable
    
      
        @Override
    
      
        public Map<String, String> getKnownSandboxes() {
    
      
            Map map = new HashMap();
    
      
            return map;
    
      
        }
    
      
        @Override
    
      
        public void setSandbox(@Nullable String sandbox) {
    
      
        }
    
      
    }));
    
      
    / / SP plug-in
    
      
    client.addPlugin(new SharedPreferencesFlipperPlugin(this, "flipper_shared_preference"));
    
      
    / / LeakCanary plug-in
    
      
    client.addPlugin(new LeakCanaryFlipperPlugin());
    
      
    / / CrashReporter plug-in
    
      
    client.addPlugin(CrashReporterPlugin.getInstance());
    
      
    client.start();
    
      
    .
    
     
Copy the code

1, the Logs

Logs are similar to Android Studio’s Logcat, showing different levels of Logs and filtering.

2, the Network

When a Network request is made (currently only requests from the OkHttp library are supported), you can see the details of the Network request under the Network TAB. This includes request and response. In use, it is found that the decoding support of Response in Chinese is not good, and there will be garbled codes.

3, Layout

You can see the Activity Layout under the Layout TAB. One benefit is that you can feed back to the phone or emulator in real time as you modify the View’s style or other properties, such as text.

4, Shared Preferences

The key and value of the SP file can be displayed under the Shared Preferences TAB, and values can be changed in real time on the phone or emulator.

5, LeakCanary

After testing, this part of the function is not very stable, memory leakage information can not be fully displayed.

Regarding the Sandbox and CrashReporter, the current documentation is not particularly clear and will not be demonstrated.

conclusion

The latest version of Flipper is V0.14.1. It has not been open source for a long time. Some features and documentation are not perfect, for example, some features only support Android or iOS, but the warehouse is updated frequently. And support developers to develop their own plug-ins. Together we look forward to Flipper getting better and better.

–END–

Identify the QR code, follow us