Adventures in Androidland

Stetho

One of the common day to day tasks for android engineers in Wattpad is to debug the application to identify issues. A powerful and useful debugging tool is important for us to move fast. 

A good tool should have the abilities to check both the UI states and the application internal states. It should be easy to use. Not too much setup or configuration overhead, ideally is able to plug and use. In addition, it should be extensible and allow developers to add more functionalities as they need. After some investigations we finally came to a tool called Stetho.

Stetho is a sophisticated debug bridge for Android applications. It was initiated by Facebook in 2015 used to debug their own applications and then became an open source project. With Stetho enabled, developers are allowed to use the Chrome Developer Tools to debug which is natively part of the Chrome desktop browser. 

In general, Stetho provides the following features: 

1. Chrome DevTools integration

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!

2. Network Traffic Inspection

Stetho is able to check the network traffic with the full spectrum of Chrome Developer Tools features, including image preview, JSON response helpers, and even exporting traces to the HAR format. Developers can track all the network communications between the application and the backend.

3. Database and Shared Preference Inspection

SQLite databases and shared preference can be visualized and interactively explored with full read/write capabilities. With Stetho, developers can easily check all the persistence data in the application and operate on them.

4. View Hierarchy Inspection

For ICS (API 15) and up, Stetho supports view hierarchy inspection, which allows developer to see all the UI comments in the current screen, view highlighting, and to tap on a view to jump to its position in the hierarchy. Those features are very useful for UI debugging.

5. dumpapp 

Dumpapp is a command line interface to application components, which allows developers to communicate and control the application at run time. It extends beyond the DevTools UI features to provide the extensibility to the tool.  A default set of plugins is provided by Stetho, but the real power of dumpapp is the ability to easily create customized plugins. 

Integration for Stetho:

// Gradle dependency on for main Stetho library

dependencies { compile 'com.facebook.stetho:stetho:1.3.1' } 

// Gradle dependency on for main Stetho network helper library

dependencies {compile 'com.facebook.stetho:stetho-okhttp3:1.3.1' } 

or

 dependencies {compile 'com.facebook.stetho:stetho-okhttp:1.3.1' }

or

dependencies {compile 'com.facebook.stetho:stetho-urlconnection:1.3.1' }

// code setup

public class MyApplication extends Application  {

        public void onCreate() { 

                super.onCreate(); 

               Stetho.initializeWithDefaults(this); 

        } 

}

// enable network inspection

OkHttpClient client = new OkHttpClient(); 

client.networkInterceptors().add(new StethoInterceptor());

or

new OkHttpClient.Builder() .addNetworkInterceptor(new StethoInterceptor()) .build();

Note: if you are using HttpURLConnection, you can use StethoURLConnectionManager to assist with integration though you should be aware that there are some caveats with this approach. In particular, you must explicitly add Accept-Encoding:gzip to the request headers and manually handle compressed responses in order for Stetho to report compressed payload sizes.