Facebook Stetho library doesn't work for inspecting UI

Question

My project properly configured to use Stetho. And it was working previously.

But now when i check my app for UI inspection (Elements section) it doesn't work. While other parts works, such as Resources.
Also DevTools shows screen of my app but Elements section is empty. I didnt know which change disabled stetho Elements.

Is there a conflict between Stetho and Chrome? If so, which versions are compatible? Currently I use stehto 1.4.2 and chrome v55.
Any solution will be appreciated. Thanks in advance.

Answer 1

In order to implement the singleton design pattern for Retrofit along with Stetho Network Interceptor instance see the following codes:

public class ApiClient extends Application {

    private static ApiClient apiClient = null; //singleton Object
    String apiURL = "http://your.url/";


    public static ApiClient getApiClient() {//getter for object
        if (apiClient == null)
            apiClient = new ApiClient();
        return apiClient;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }

    public Retrofit getClient() {//Retrofit instance
        int myTime = 15;
        OkHttpClient.Builder okHttpBuilder = new OkHttpClient.Builder()
                .connectTimeout(myTime, TimeUnit.SECONDS)
                .readTimeout(myTime, TimeUnit.SECONDS)
                .writeTimeout(myTime, TimeUnit.SECONDS)
                .addNetworkInterceptor(new StethoInterceptor());

        Retrofit.Builder builder = new Retrofit.Builder()
                .baseUrl(apiURL)
                .client(okHttpBuilder.build())
                .addConverterFactory(GsonConverterFactory.create());
        return builder.build();
    }
}

Now to use retrofit see the following codes:

LoginDTO loginDTO = new LoginDTO(
            etPhno.getText().toString().trim(),
            etPass.getText().toString().trim()
    );

ApiService service = ApiClient.getApiClient().getClient().create(ApiService.class);
Call<LoginResp> call = service.loginAPI(loginDTO);
call.enqueue(new Callback<LoginResp>() {

    @Override
    public void onResponse(Call<LoginResp> call, Response<LoginResp> response) {

        LoginResp loginResp = response.body();

    }

    @Override
    public void onFailure(Call<LoginResp> call, Throwable t) {

        Toast.makeText(Login.this, "Error here", Toast.LENGTH_SHORT).show();
    }
});

In the ApiService interface declare the function like this:

    @POST("login")
    Call<LoginResp> loginAPI(@Body LoginDTO loginDTO);

The LoginDTO class goes like this:

public class LoginDTO {
    @SerializedName("log_phno")
    @Expose
    private String user;

    @SerializedName("log_pass")
    @Expose
    private String pass;

    public LoginDTO(String user, String pass) {
        this.user = user;
        this.pass = pass;
    }

    public String getUser() {
        return user;
    }

    public String getPass() {
        return pass;
    }
}

Now the most important part, go to manifest file and under <application> tag put your singleton classname preceded by a dot(.) like this :

android:name=".Controller.ApiClient"

And atlast to see the magic of Stetho Interceptor, run your app and open Google Chrome and type chrome://inspect/