Debugging Android with Stetho

In this tutorial, you are going to learn how to add Stetho to an Android project and use both Google Chrome’s developer tools and Stetho’s command line utility, dumpapp, to debug it.

Stetho is a debug bridge for Android applications.

This is written by the Facebook team. Stetho

It’s an open source library which allows you to perform a bunch of various debug operations on your android app.

The nice thing about Stetho is, it hooks into the native Chrome Developer Tools which are natively part of the Chrome Desktop browser.

Say, if you have ever done development in JavaScript, mostly likely you have been into Chrome Developer tools looking at the source code, looking at the network tab, resources tab, etc.

stetho1

What Facebook done is actually, built a hook – kind of a debug bridge into the Chrome Developer Tools. So, we can use Chrome connected with our device or emulator that’s running Stetho library to get some information out of our Android application.

The integration with the Chrome DevTools frontend is implemented using a client/server protocol which the Stetho software provides for your application. Once your application is integrated, simply navigate to chrome://inspect and click “Inspect” to get started!

stetho2

Couple of things the Stetho library allows us to do is :

  • Look inside of Android app DATABASE to see what the values are inside the db running in your Application.
  • Look inside PREFERENCE files – to see what values are there
  • Allows to look at NETWORK resource calls to see the results of them.

Why should we use Facebook Stetho??

  • It’s really easy to get going with it.
  • It’s open source (http://github.com/facebook/stetho )
  • Provides extensibility, where you can write your own custom dumpapps.
  • Provides command line interface to plugin itself.

How do we get started with Stetho

Adding Gradle Dependencies

Include Stetho in your Android Studio project through Gradle dependencies :

// Gradle dependency on Stetho 
  dependencies { 
    compile 'com.facebook.stetho:stetho:1.3.1' 
  } 

Initializing Stetho

Integrating with Stetho is intended to be seamless and straightforward for most existing Android applications.

Step 1: Creating a Custom Application Class

The best time to initialize Stetho is when your application is starting. Therefore, you have to create a new class that extends Application and initialize Stetho inside its onCreate method.

Create a class that extends “Application” and initialize Stetho inside its onCreate() method.

There is a simple initialization step which occurs in your Application class:

public class MyApplication extends Application {
@Override
  public void onCreate() {
    super.onCreate();
    Stetho.initializeWithDefaults(this);
  }
}

This brings up most of the default configuration but does not enable some additional hooks (most notably, network inspection).

——–>>>
To elaborate more on Initializing Stetho library :

To initialize Stetho, you must first create an instance of Stetho.InitializerBuilder, using the Stetho.newInitializerBuilder method.

Next, to allow Stetho to work with Chrome’s developer tools, you must call enableWebKitInspector. If you also want to enable dumpapp, you must call enableDumpapp. Once Stetho.InitializerBuilder is ready, you can call its build method to generate an Initializer object and pass it to the Stetho.initialize method.

For now, let’s enable the default functionality by using the default InspectorModulesProvider and DumperPluginsProvider. Add the following code to the onCreate method:

// Create an InitializerBuilder
Stetho.InitializerBuilder initializerBuilder = Stetho.newInitializerBuilder(this);

// Enable Chrome DevTools
initializerBuilder.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this));

// Enable command line interface
initializerBuilder.enableDumpapp(Stetho.defaultDumperPluginsProvider(context));

// Use the InitializerBuilder to generate an Initializer
Stetho.Initializer initializer = initializerBuilder.build();

// Initialize Stetho with the Initializer
Stetho.initialize(initializer);
Stetho.initialize(
        Stetho.newInitializerBuilder(this)
            .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
            .enableDumpapp(Stetho.defaultDumperPluginsProvider(context))
            .build());

Step 2: Editing the Manifest

To let the Android operating system know that you have a custom Application class, add an attribute called android:name to the manifest’s application tag and set the value to the name of your custom Application class.

In AndroidManifest.xml file, add MyApplication class into application tag as following:

<application
    android:name=“.MyApplication”
</application>
Using Chrome’s DevTools
After compiling and installing your app on an Android device (or the emulator), start Google Chrome and type in chrome://inspect in the address bar. You will see a screen that looks like this:
stetho3
Click the inspect link to open the Developer Tools.
Inspecting databases

Click the Resources tab and select Web SQL. If your app has any SQLite databases, they will be listed here. Selecting a database shows a list of the tables in the database. Finally, clicking a table displays the records of the table.

You can also execute SQL queries after selecting a SQLite database.

Inspecting preferences

To view your app’s SharedPreferences, open the Resources tab of the Developer Tools window and select LocalStorage. You will see the names of the files your app uses to store the preferences. Clicking a file displays the key-value pairs stored in that file.

You can even edit the values stored in a file.

Inspecting  network connections

Stetho allows you to inspect, in real time, the network connections that your app makes.

If you are using the popular OkHttp library in the 2.2.x+ or 3.x release, you can use the ‘Interceptors system’ to automatically hook into your existing stack. This is currently the simplest and most straightforward way to enable network inspection.

Add dependency :

dependencies { 
    compile 'com.facebook.stetho:stetho-okhttp3:1.3.1' 
  } 

Add Stetho network interceptor into OkHttpClient as follows:

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

more info on ‘Inspecting Network connections’, check the link here : http://robusttechhouse.com/debugging-android-using-facebook-stetho-library/

References:

http://facebook.github.io/stetho/

https://caster.io/episodes/episode-4-debugging-android-with-stetho/

http://code.tutsplus.com/tutorials/debugging-android-apps-with-facebooks-stetho–cms-24205