Network Inspection in Stetho with Glide and okhttp3

Question

how to Combine Glide and Stetho to debug image loading system using okhttp3

I did the following

1.Added the dependancies

//stetho
compile 'com.facebook.stetho:stetho:1.3.1'
compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
//glide
compile 'com.github.bumptech.glide:glide:3.7.0'
// Glide's OkHttp3 Integration
compile 'com.github.bumptech.glide:okhttp3-integration:1.4.0@aar'
//okhttp3
compile 'com.squareup.okhttp3:okhttp:3.2.0'

1.Added the initialization

public class MyApplication extends Application {

@Override
public void onCreate() {
    super.onCreate();

    Stetho.initialize(
            Stetho.newInitializerBuilder(this)
                    .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                    .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
                    .build());
    }
}

3.add glide config to use okhttp3

/**
 * Created by Arnaud Camus Copied by MOMANI on 2016/04/15.
 * http://arnaud-camus.fr/combining-glide-and-stetho-to-easily-debug-your-image-loading-system/
 */
public class StethoOkHttpGlideModule  implements GlideModule {
    @Override
    public void applyOptions(Context context, GlideBuilder builder) { }

    @Override
    public void registerComponents(Context context, Glide glide) {
        okhttp3.OkHttpClient client = new okhttp3.OkHttpClient();
        client.networkInterceptors().add(new com.facebook.stetho.okhttp3.StethoInterceptor());
        glide.register(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    }
}

4.added the GlideModule metadata tag in AndroidManifest.xml

<application 
    android:name=".....">
    .....
     <meta-data android:name="android.alcode.com.material.utils.glide.StethoOkHttpGlideModule"
      android:value="GlideModule" />
</application>

5.Glide loadimg images line

Glide.with(((ViewHolderSmall) holder).imageView.getContext())
                    .load(post.getImageUrl())
            //        .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                    .into(((ViewHolderSmall) holder).imageView);

when I open chrome Developer tool Resources Tab works perfectly but network tab doesn't!!!

why? where is my mistake? and is it recommended to use okhttp3 with Glide? and how how to connect it without using okhttp3

any duplication or links would help

Answer 1

Re: is it recommended to use okhttp3 with Glide?

Yes, this is the way to go for OkHttp integration.

Re: why? where is my mistake?

This is likely needed because the built-in GlideModule may be overwriting your intercepted client (there's no defined ordering between GlideModule execution). Consider the following from the wiki:

When overriding default behaviour make sure your custom GlideModule is registered in the manifest and the default one is excluded. Exclusion may mean removing the corresponding metadata from the manifest or using the jar dependency instead of the aar one. -- Overriding default behaviour - Glide Wiki

Based on Conflicting GlideModules - Glide Wiki: remove @aar from the okhttp3-integration dependency, or add to manifest:

<meta-data android:name="com.bumptech.glide.integration.okhttp3.OkHttpGlideModule" tools:node=”remove” />

---

Also make sure you're not fooled by the cache: .diskCacheStrategy(NONE).skipMemoryCache(true); you can remove this as soon as you see the requests as you expect them to.

---

OkHttp3 changed the API client.networkInterceptors() is not writable any more:

okhttp3.OkHttpClient client = new okhttp3.OkHttpClient.Builder()
            .addNetworkInterceptor(new com.facebook.stetho.okhttp3.StethoInterceptor())
            .build();