Debug Android Application Easily using Stetho

Many times while developing android applications I face problems in debugging. It is really hard to know if the database is working fine, the entries are getting recorded in the correct table and in the correct format. Also debugging network calls using logs is quite cumbersome.

Recently I came to know about Stetho and I tried it. It is a sophisticated debug bridge for Android applications. When enabled, developers have access to the Chrome Developer Tools feature natively part of the Chrome desktop browser. Developers can also choose to enable the optional dumpapp tool which offers a powerful command-line interface to application internals.

I just loved it because it really eased my development and debugging process. We can see the databases, shared preferences and networks with a user interface so it’s really easy to see whether everything is working fine or not. Also on top of that integrating it into our app is really simple and straightforward. With a single line of code, it is up and running.

Let’s see how to integrate it into our android app.

Integration:

Setup:

Add stetho dependency in the build.gradle file:

// Stetho
implementation 'com.facebook.stetho:stetho:1.5.1'

Then initialize it in the application class’s onCreate method:

override fun onCreate() {
    super.onCreate()
    Stetho.initializeWithDefaults(this)
}

And it's done😁

Connect your device (or emulator if you want) and run your app. Then on your browser go to “chrome://inspect”. This will open a window like this:

There you can see your device and a list of your debuggable applications. Just click on inspect for whichever application you want to debug and another window will open like this:

There you can see there are many features including our databases and shared prefs in proper tabular format.

You can also have a look at the queries that you are making and their results. In the elements tab it shows all the UI elements present on the screen:

Enabling network Inspection:

If you want to enable the network inspection also then add the network helpers dependencies in the build.gradle:

implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1'
or
implementation'com.facebook.stetho:stetho-okhttp:1.5.1'
or
implementation'com.facebook.stetho:stetho-urlconnection:1.5.1'

Then add stetho interceptor in your HTTP client:

new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

Then you can see the data flowing through the network in the network tab:

Custom dumpapp Plugins:

Dumpapp extends beyond the DevTools UI features shown above to provide a much more extensible, command-line interface to application components. A default set of plugins is provided:

Custom plugins are the preferred means of extending the dumpapp system and can be added easily during configuration. Simply replace your configuration step as such:

Stetho.initialize(Stetho.newInitializerBuilder(context)
    .enableDumpapp(new DumperPluginsProvider() {
      @Override
      public Iterable<DumperPlugin> get() {
        return new Stetho.DefaultDumperPluginsBuilder(context)
            .provide(new MyDumperPlugin())
            .finish();
      }
    })
    .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(context))
    .build());

Javascript Console:

Stetho provides you a Javascript Console also which allows execution of javascript code that can interact with the application or even the Android SDK:

Feel free to comment if there are doubts or if you feel anything needs to be corrected😀.

References:

Stetho website