Debugging Mobile Apps with FbFlipper

Every mobile developer who has worked with a media-intensive application like Social Media, E-commerce, or Food Ordering must have encountered a situation where their application had run out of memory due to a hoard of images being loaded and displayed simultaneously. Processing(Fetching, parsing, and displaying) this myriad of images efficiently is quite a complex task that no developer wants to do from scratch. Therefore, almost every developer leverages the image loading libraries such as Fresco, Glide, Picasso, etc.

Although some of the top libraries are really impressive and efficient in terms of giving the best User Experience, still there are situations where the library is not resilient enough to adjust its behavior within different circumstances, most importantly when the device is low-end or has the tough memory constraints which sometimes lead to?OutOfMemoryError.

Introducing FbFlipper — A Desktop Debugging Platform for Mobile Developers

FbFlipper is an extensive mobile debugger that lets you debug different aspects of your mobile application like how much?memory?is consumed by the images, how much?bandwidth?is your application consuming, etc. It got inspiration from its own family product?Stetho, which is capable of debugging Android only.

It’s a multiplatform which lets you debug platforms including Android, iOS, browsers, web apps running in an emulator/simulator, and other connected physical development devices. For the sake of this tutorial, we will walk through the integration for Android.

Dependencies

Flipper is distributed via Maven Central: add the dependencies to your?build.gradle?file.

You should also explicitly depend on?SoLoader?instead of relying on transitive dependency resolution, which is getting deprecated with Gradle 5.

There is a ‘no-op’ implementation of some oft-used Flipper interfaces, which you can use to make it easier to strip Flipper from your release builds:

repositories {
  mavenCentral()
}

dependencies {
  debugImplementation 'com.facebook.flipper:flipper:0.191.1'
  debugImplementation 'com.facebook.soloader:soloader:0.10.5'

  releaseImplementation 'com.facebook.flipper:flipper-noop:0.191.1'
}        

Application setup

One of the beauties of FbFlipper is, it lets you customize it according to your needs. Rather than packing all the features by default, to make it lighter it allows you to add the required plugins. For example, if you need to debug only the network calls, just add the Network plugin. Or if you need to inspect how much memory is consumed by the images, add the Images plugin. Below the?Fresco Inspectos Plugin?and?Network Plugin?have been added for example.

Now initialize Flipper in your Application’s?onCreate?method, which involves initializing SoLoader (for loading the C++ part of Flipper) and starting a?FlipperClient.

override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)

    if (BuildConfig.DEBUG && FlipperUtils.shouldEnableFlipper(this)) {
      val client = AndroidFlipperClient.getInstance(this)
      client.addPlugin(InspectorFlipperPlugin(this, DescriptorMapping.withDefaults()))
      client.addPlugin(FrescoFlipperPlugin())
      client.start()
    }
  }        

Diagnostics

It’s recommended that you add the following activity to the manifest, which can help diagnose integration issues and other problems:

<activity android:name="com.facebook.flipper.android.diagnostics.FlipperDiagnosticActivity"
        android:exported="true"/>I hope this article will give you a good start to get aware of different Jetpack Compose components and how to use ViewModels with the screens. Please share your suggestions in the comments.        

Conclusion

That’s just it. Now start the FbFlipper Desktop application and connect your device/emulator with that to start monitoring the logs. Happy Debugging!!!

If you find this tutorial useful your ?? will be much appreciated and inspiring for the next articles!

Please feel free to reach out to me on?LinkedIn.