Debugging Android Apps with Facebook’s Stetho

Debugging Android Apps with Facebook’s Stetho

Introduction

Stetho is an open source debugging platform, developed by Facebook, that offers a rich and highly interactive debugging experience to Android developers. With Stetho, debugging native Android apps becomes as simple as debugging a web page, because it allows you to use Google Chrome’s developer tools to perform various debugging activities, such as view hierarchy inspection, network inspection, SQLite database management, and more.

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.

1. Adding Gradle Dependencies

To add the Stetho library to your project, add com.facebook.stetho:stetho as a compile dependency in the app module’s build.gradle file:

In this tutorial, you will be using OkHttp, a popular networking library from Square, to manage all network connections, because it plays really well with Stetho. Add it as another compile dependency:

2. Initializing Stetho

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 new class called MyApplication and override its onCreate method:

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:

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.

3. Using Chrome’s DevTools

After compiling and installing your app on an Android device (or the emulator), start Google Chrome and type in chrome://inspect in the address bar. You will see a screen that looks like this:

Inspect page

Click the inspect link to open the Developer Tools.

Developer tools

Step 1: Inspecting Network Connections

Stetho allows you to inspect, in real time, the network connections that your app makes. However, in Stetho version 1.1.1, this only works with the OkHttp network library. When using OkHttp with Stetho, you should remember to add a StethoInterceptor to the OkHttpClient object’s List of network interceptors.

Here’s some sample code that connects to HttpBin and retrieves a JSON document:

When the code runs, you will see the following in the Network tab of the Developer Tools window:

Network tab

If you click the URL in the first column, you will be taken to a screen that displays more information about the response:

Contents of the response

Step 2: Querying SQLite Databases

With Stetho, you can perform a lot of operations on your app’s SQLite databases. 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:

Rows of table

You can also execute SQL queries after selecting a SQLite database:

Execute queries

Step 3: Manipulating Your App’s 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:

View preferences

You can even edit the values stored in a file:

Edit preferences

Note that any changes you make to the values are permanent.

4. Using dumpapp

Step 1: Downloading dumpapp

dumpapp is a powerful utility that allows you to manipulate your Android app from the command line. You can get it by cloning Stetho’s repository:

Because dumpapp is a Python script, you should have the latest version of Python installed on your computer to use it.

Step 2: Using Plugins

To view a list of available plugins, enter the stetho/scripts directory and execute the following command:

The output looks something like this:

All default plugins

Let’s use the plugin called prefs. This plugin is used to view and edit the values stored in your app’s SharedPreferences. For example, the following command lists all the key-value pairs stored in your app’s SharedPreferences:

The output looks something like this:

List of preferences

Step 3: Creating a Custom Plugin

Custom dumpapp plugins are simply Java classes that implement the DumperPlugin interface. Let’s create a simple plugin that prints the package name of the app being tested.

Create a new class inside the MyApplication class called MyDumperPlugin. After overriding the methods of the DumperPlugin interface, your class should look like this:

The getName method should return the name of the plugin. To return the value my_plugin, add the following code to the getName method:

The dump method is the method that is called when you run the plugin from the command line. The DumperContext provides various I/O streams, which allow you to read from the command line or write to it. For now, we will just be using the standard output. Add the following code to the dump method to get a reference to the standard output stream:

Because this plugin is part of the MyApplication class, to get the package name of the app, you can directly call the getPackageName method. Once you have the package name, print it using the PrintStream object’s println method:

Your custom plugin is now ready to use.

Step 4: Creating a Custom Plugins Provider

The plugin you created in the previous step will not be available to Stetho unless you create a custom plugins provider and use it while initializing Stetho. A custom plugins provider is a class that implements the DumperPluginsProvider interface.

Let’s create a custom plugins provider called MyDumperPluginsProvider. Create this class inside the MyApplication class. After overriding the only method of the DumperPluginsProvider interface, your class should look like this:

Because the get method returns an Iterable, all you have to do is create a list, add your custom plugin to the list, and return the list. The code for doing that would look like this:

However, because your custom plugins provider’s Iterable does not include the default plugins, you won’t be able to use them while running dumpapp. If you want to use both the custom and the default plugins together, you should add the default plugins to your ArrayList. To get the list of default plugins, you have to call the get method of the plugins provider returned by the defaultDumperPluginsProvider method.

Your custom plugins provider is now ready. To use it, go to the onCreate method and pass an instance of it to the enableDumpapp call:

Step 5: Using the Custom Plugin

List all the available plugins again using the dumpapp -l call. You will see the name of your custom plugin in the list:

Custom plugin in the list

To run it, execute the following command:

It should print the package name of your app:

Prints package name

Conclusion

In this tutorial, you learned how to use Stetho in your Android projects. You also learned how to use both the command line interface, dumpapp, and Google Chrome’s developer tools to debug your apps. By now, you must have realized that, though Stetho cannot fully replace Android Studio’s debugger yet, it definitely offers features that can significantly improve your debugging experience.

To learn more about Stetho, refer to the code and documentation that’s available on GitHub repository.

Source: Tuts Plus

About the Author

Comments

  1. … [Trackback]

    […] Read More: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  2. Leo Kanell says:

    … [Trackback]

    […] Read More here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  3. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  4. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  5. … [Trackback]

    […] Read More Infos here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  6. … [Trackback]

    […] Find More Informations here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  7. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  8. … [Trackback]

    […] Read More here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  9. … [Trackback]

    […] There you will find 89615 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  10. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  11. my blog says:

    … [Trackback]

    […] Read More here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  12. … [Trackback]

    […] There you will find 87200 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  13. … [Trackback]

    […] Read More here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  14. … [Trackback]

    […] There you will find 31172 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  15. … [Trackback]

    […] Read More here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  16. likri.com says:

    … [Trackback]

    […] There you will find 37088 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  17. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  18. … [Trackback]

    […] Read More Infos here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  19. … [Trackback]

    […] Informations on that Topic: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  20. … [Trackback]

    […] Find More Informations here: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  21. … [Trackback]

    […] Read More: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  22. … [Trackback]

    […] There you will find 63818 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]

  23. … [Trackback]

    […] There you will find 71169 more Infos: designncode.in/debugging-android-apps-with-facebooks-stetho/ […]