In this tutorial, you are going to learn how to add Stetho to an Android project and use both Google Chrome’s developer tools and Stetho’s command line utility, dumpapp, to debug it.
Stetho is a debug bridge for Android applications.
This is written by the Facebook team. Stetho
It’s an open source library which allows you to perform a bunch of various debug operations on your android app.
The nice thing about Stetho is, it hooks into the native Chrome Developer Tools which are natively part of the Chrome Desktop browser.
Say, if you have ever done development in JavaScript, mostly likely you have been into Chrome Developer tools looking at the source code, looking at the network tab, resources tab, etc.
What Facebook done is actually, built a hook – kind of a debug bridge into the Chrome Developer Tools. So, we can use Chrome connected with our device or emulator that’s running Stetho library to get some information out of our Android application.
The integration with the Chrome DevTools frontend is implemented using a client/server protocol which the Stetho software provides for your application. Once your application is integrated, simply navigate to chrome://inspect
and click “Inspect” to get started!
Couple of things the Stetho library allows us to do is :
- Look inside of Android app DATABASE to see what the values are inside the db running in your Application.
- Look inside PREFERENCE files – to see what values are there
- Allows to look at NETWORK resource calls to see the results of them.
Why should we use Facebook Stetho??
- It’s really easy to get going with it.
- It’s open source (http://github.com/facebook/stetho )
- Provides extensibility, where you can write your own custom dumpapps.
- Provides command line interface to plugin itself.
How do we get started with Stetho
Adding Gradle Dependencies
Include Stetho in your Android Studio project through Gradle dependencies :
// Gradle dependency on Stetho
dependencies {
compile 'com.facebook.stetho:stetho:1.3.1'
}
Initializing Stetho
Integrating with Stetho is intended to be seamless and straightforward for most existing Android applications.
Step 1: Creating a Custom Application
Class
The best time to initialize Stetho is when your application is starting. Therefore, you have to create a new class that extends Application
and initialize Stetho inside its onCreate
method.
Create a class that extends “Application” and initialize Stetho inside its onCreate() method.
There is a simple initialization step which occurs in your Application
class:
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
}
}
This brings up most of the default configuration but does not enable some additional hooks (most notably, network inspection).
——–>>>
To elaborate more on Initializing Stetho library :
To initialize Stetho, you must first create an instance of Stetho.InitializerBuilder
, using the Stetho.newInitializerBuilder
method.
Next, to allow Stetho to work with Chrome’s developer tools, you must call enableWebKitInspector
. If you also want to enable dumpapp, you must call enableDumpapp
. Once Stetho.InitializerBuilder
is ready, you can call its build
method to generate an Initializer
object and pass it to the Stetho.initialize
method.
For now, let’s enable the default functionality by using the default InspectorModulesProvider
and DumperPluginsProvider
. Add the following code to the onCreate
method:
// Create an InitializerBuilder Stetho.InitializerBuilder initializerBuilder = Stetho.newInitializerBuilder(this); // Enable Chrome DevTools initializerBuilder.enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this)); // Enable command line interface initializerBuilder.enableDumpapp(Stetho.defaultDumperPluginsProvider(context)); // Use the InitializerBuilder to generate an Initializer Stetho.Initializer initializer = initializerBuilder.build(); // Initialize Stetho with the Initializer Stetho.initialize(initializer);
Stetho.initialize( Stetho.newInitializerBuilder(this) .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this)) .enableDumpapp(Stetho.defaultDumperPluginsProvider(context)) .build());
Step 2: Editing the Manifest
To let the Android operating system know that you have a custom Application
class, add an attribute called android:name
to the manifest’s application
tag and set the value to the name of your custom Application
class.
In AndroidManifest.xml file, add MyApplication class into application tag as following:
Click the Resources tab and select Web SQL. If your app has any SQLite databases, they will be listed here. Selecting a database shows a list of the tables in the database. Finally, clicking a table displays the records of the table.
You can also execute SQL queries after selecting a SQLite database.
Inspecting preferences
To view your app’s SharedPreferences
, open the Resources tab of the Developer Tools window and select LocalStorage. You will see the names of the files your app uses to store the preferences. Clicking a file displays the key-value pairs stored in that file.
You can even edit the values stored in a file.
Inspecting network connections
Stetho allows you to inspect, in real time, the network connections that your app makes.
If you are using the popular OkHttp library in the 2.2.x+ or 3.x release, you can use the ‘Interceptors system’ to automatically hook into your existing stack. This is currently the simplest and most straightforward way to enable network inspection.
Add dependency :
dependencies {
compile 'com.facebook.stetho:stetho-okhttp3:1.3.1'
}
Add Stetho network interceptor into OkHttpClient as follows:
OkHttpClient client = new OkHttpClient.Builder()
.addNetworkInterceptor(new StethoInterceptor())
.build();
more info on ‘Inspecting Network connections’, check the link here : http://robusttechhouse.com/debugging-android-using-facebook-stetho-library/
References:
http://facebook.github.io/stetho/
https://caster.io/episodes/episode-4-debugging-android-with-stetho/
http://code.tutsplus.com/tutorials/debugging-android-apps-with-facebooks-stetho–cms-24205