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

Answer 2

Re: how how to connect it without using okhttp3

The default (built-in) network integration uses HttpUrlFetcher created by HttpUrlGlideUrlLoader, so in order to integrate with Stetho you'll need to replace those with one that intercepts requests. '

GlideModule

@Override public void registerComponents(Context context, Glide glide) {
    glide.register(GlideUrl.class, InputStream.class, new StethoHttpUrlGlideUrlLoader.Factory());
}

Make sure StethoHttpUrlGlideUrlLoader returns the modified classes and not the built-in ones in build and getResourceFetcher.

Custom Fetcher

Only the structural diff is included here for brevity, it should be clear where these lines go from the context. Full code is available on GitHub:

public class StethoHttpUrlFetcher implements DataFetcher<InputStream> {
    private final StethoURLConnectionManager stethoManager;
    public StethoHttpUrlFetcher(GlideUrl glideUrl) {
        ...
        this.stethoManager = new StethoURLConnectionManager("Glide");
    }

    private InputStream loadDataWithRedirects(...) {
        ...
        //urlConnection.setRequestProperty("Accept-Encoding", "gzip"); // don't request, it's wasteful for images
        ...
        stethoManager.preConnect(urlConnection, null);
        try {
            // Connect explicitly to avoid errors in decoders if connection fails.
            urlConnection.connect();
            stethoManager.postConnect();
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
        ...
    }

    private InputStream getStreamForSuccessfulRequest(HttpURLConnection urlConnection) throws IOException {
        try {
            InputStream responseStream = stethoManager.interpretResponseStream(urlConnection.getInputStream());
            if (TextUtils.isEmpty(urlConnection.getContentEncoding())) {
                ...
                stream = ContentLengthInputStream.obtain(responseStream, contentLength);
            } else {
                ...
                stream = responseStream;
            }
            return stream;
        } catch (IOException ex) {
            stethoManager.httpExchangeFailed(ex);
            throw ex;
        }
    }

    @Override public void cleanup() {
        ...
        if (isCancelled) { // otherwise it stays pending indefinitely because the stream is not read
            stethoManager.httpExchangeFailed(new IOException("Cancelled"));
        }
    }
}

Answer 3

Finally it worked
according to Glide Wikis I changed the following

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

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

</application>

and according to @TWiStErRob's Answer I changed the following

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.Builder()
            .addNetworkInterceptor(new com.facebook.stetho.okhttp3.StethoInterceptor())
            .build();
        glide.register(GlideUrl.class, InputStream.class, new OkHttpUrlLoader.Factory(client));
    }
}

that's it but some questions about okhttp3 not answered