SureshJoshi.com ▼

Visualizing Couchbase in Chrome with Stetho


2016-10-13

Somehow, I’ve only recently discovered Stetho, which is a damned shame - because in the short time that I’ve been using it, my Android productivity has gone through the roof.

Stetho is a debug bridge that hooks Android apps (running in emulators or on devices) into Chrome’s web developer tools.

You can use Stetho to get a look at your activity/fragment’s view hierarchies, watch network traffic, or (my personal favourite) analyze your Shared Preferences/databases.

Setting Up Stetho

Initializing Stetho is straight-forward.

public class MyApplication extends Application {
    public void onCreate() {
        super.onCreate();
        if (BuildConfig.DEBUG) {
            Stetho.initializeWithDefaults(this);
        }
    }
}

You can either wrap Stetho in a BuildConfig.DEBUG statement, or use a more involved method as described here.

Chrome WebDev Tools

To access your app’s data through Chrome, run your Android app and while connected over ADB, open Chrome and navigate to chrome://inspect

Chrome USB device inspector

Once the dev tools are open, you can click around to see the view hierarchy, or go into ‘Resources’ to look at the Shared Preferences or SQLite databases.

Accessing Realm Databases

While the vanilla Stetho plugin will allow you to look at your SQLite databases, using the fantastic plugin - Stetho-Realm - you can view your Realm databases through Chrome’s webdev tools via ‘Resources’ -> ‘Web SQL’.

public class MyApplication extends Application {
    public void onCreate() {
        super.onCreate();
        Realm.init(this);
        if (BuildConfig.DEBUG) {
            Stetho.initialize(
                Stetho.newInitializerBuilder(this)
                        .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                        .enableWebKitInspector(RealmInspectorModulesProvider.builder(this).build())
                        .build());
        }
    }
}

Accessing Couchbase Databases

After using the Realm plugin for a few days, it was easy to see that a similar plugin for Couchbase would do me worlds of good…

So I wrote one!

The Stetho-Couchbase plugin is located here https://github.com/RobotPajamas/Stetho-Couchbase, and works similarly to the Realm plugin.

You instantiate it like this.

In your Application class (where you would otherwise initiate Stetho), use the Stetho builder to initialize Stetho-Couchbase.

public class MyApplication extends Application {
    public void onCreate() {
        super.onCreate();
        if (BuildConfig.DEBUG) {
            Stetho.initialize(
                Stetho.newInitializerBuilder(this)
                        .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                        .enableWebKitInspector(CouchbaseInspectorModulesProvider.builder(this).build())
                        .build());
        }
    }
}

Once you connect to Chrome, you can see a list of your Couchbase databases and when you expand it, it will enumerate all documents in that database.

Couchbase example using Stetho

When you click on a document, it will show a simple key-value list of the data inside your document (as well, it will log the document to the console - in order to see a different view of the data).

Couchbase key-value example using Stetho

From here, you can click through your documents, and when you update (e.g. save) a document in your app, you’ll need to refresh the view (or click away and click back to the document), and you’ll see the updated values.

Future Plans

There are a few enhancements that I think will come in handy.

  • De-normalize document to show nested JSON in a cleaner way
  • Add Builder with methods to hide ‘private’ Couchbase fields
  • Reduce the number of DB opening/closings as a performance enhancement

If anyone has ideas on other enhancements, please feel free to post a comment or create a Github issue!

Feature Photo credit: a.drian / Foter / CC BY-ND