Discovering and Using Stetho With Some Network Library

During my work on some personal project, I was digging around the web(Reddit, …) and I’ve found that great Debugging library developed by Facebook and named Stetho

The Stetho Library

This library as for goal to allow you to debug your android application by using the Chrome Developer Tools feature.

Concerning the Database Inspection and the View Hierarchy everything work fine just after adding the library and enabled it like it’s explained on the Stetho website.

The Network Inspection element

But one of the best thing of this tools is the Network Inspection element, who allow you to inspect all of the request made by your application and see in details which Headers are sent or received, which response you get and all the other thing you can need on networking.

Only at this time Stetho only support OkHttp and UrlConnection directly. So if you use Volley or ION, you can’t directly use this tools, I’m personally using this tools, so I spend time to search a way to enable this with these library and I finally found some interesting workaround.

The Volley Support

So let’s start with Volley Support :

To enable the support of Network Inspection on Volley we are going to use OkHttp as base for the Volley HttpStack you can find a gist shared by Bryan Stern at this link with a working implementation. So take this java file and add it to your project now we need to create our RequestQueue and link it to Stetho.

This is the code you need:

1
2
3

OkHttpClient client = new OkHttpClient();
client.networkInterceptors().add(new StethoInterceptor());
mRequestQueue = Volley.newRequestQueue(getApplicationContext(), new OkHttpStack(client));

You also need to add these dependency to your project:

1
2
3

compile 'com.facebook.stetho:stetho:1.1.1'
compile 'com.facebook.stetho:stetho-okhttp:1.1.1'
compile 'com.squareup.okhttp:okhttp:2.3.0'

The Ion Support

So let’s start with Ion Support :

To enable the support of Network Inspection on Ion we are going to use the Ion StethoMiddleware made by Koush specifically for Ion, you can find it on this link. So after adding this files to your project you just need to add the StethoMiddleware to Ion with this code line:

1
2

Ion.getDefault(this).getHttpClient().getMiddleware()
.add(new StethoMiddleware());

After this the Network Inspection will work on your project and each request you have launched will be printed in the Chrome Dev Tools.

Going Further

Include and Enable only on Debug Build

The next goal is to have the Stetho support only on Debug build and not to have any dependency on the Release Apk of your application.

To do this, we are going to use the BuildType system of gradle in Android Studio. Two files will be extended or overriden by a new version to achieve this goal.

Let’s start with the application class where we enable Stetho, create a new class named for example ApplicationControllerExtension in the debug folder(src/java/debug) and make this class extends your Application class. Next step add the Stetho initialization in this class and remove it from the Application class. This is a sample of class with the Volley initialization:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

public class AppControllerExtension extends AppController {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initialize(
                Stetho.newInitializerBuilder(this)
                        .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                        .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
                        .build());
    }

    public synchronized RequestQueue getRequestQueue() {
        if (mRequestQueue == null) {
            OkHttpClient client = new OkHttpClient();
            client.networkInterceptors().add(new StethoInterceptor());
            mRequestQueue = Volley.newRequestQueue(getApplicationContext(), new OkHttpStack(client));
        }
        return mRequestQueue;
    }
}

At this point, it only misses one thing start your application with this class instead of the release class. To enable this we need to override the AndroidManifest file and change the Application class defined on it.

This a AndroidManifest sample overriding the application section of our release manifest to enable the ApplicationControllerExtention class:

1
2
3
4
5
6
7
8
9
10
11

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.mypackage.mypackage">


    <application
        android:name="com.mypackage.mypackage.ApplicationControllerExtension"
        tools:replace="android:name">
      </application>
</manifest>