Basheer AL-MOMANI Basheer AL-MOMANI - 4 months ago 56
Android Question

Network Inspection in Stetho with Glide and okhttp3

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

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();