Mar 29, 2016
Effective and easy apps debugging work with Stetho
In this article we will cover two of the several features Stetho has, and introduce the whole tool from a daily developer perspective.
This open source tool developed by Facebook consists in a debug bridge for Android applications. When enabled, developers can inspect their apps and perform operations in them through Chrome DevTools feature natively part of the Chrome desktop browser, just with a straightforward setup.
Interesting features to cover
-Overview of the app’s preferences and local DB stored in the device/emulator, but even more interesting, allows to execute SQL statements in order to query or modify the data on the fly. The console has SQL code completion, SQL execution and syntax error messages indicators. This simplifies the cumbersome database debugging tasks usually performed downloading and uploading .db files.
-Visualize your app’s view hierarchy with very helpful aid functions:
- Highlight view components on the app’s UI running on the device.
- TextView’s edition on the fly providing a real high fidelity preview.
- It can access apps running on an emulator or a real device.
This makes this tool more powerful than Android Device Monitor’s View Hierarchy.
To start using and test its basic but powerful bridge functionalities you need to follow just 3 steps:
1)Declare the library with gradle
dependencies {
compile ‘com.facebook.stetho:stetho:1.3.1’
}
2) Initialize the singleton in the Application.onCreate() method adding the following line:
Stetho.initializeWithDefaults(this);
Don’t forget to declare the custom application class in the manifest.
3) Rebuild and run your project. Once the app is running navigate with Chrome desktop browser to:
chrome://inspect
Now let’s play with it!
The Chrome DevTools page will show a list of debuggable applications within every connected device, and also android Chrome instances or Web Views. Look for the package name of your app — above the app’s name followed by «(powered by Stetho)» — and click on “inspect” to open the Develop Tools instance to debug your app.
Persisted data inspection
In the Resources tab you can find all stored data that Stetho allows to access, navigating with the tree view in the left side of the window. Inside “Web SQL” are all the databases that your app created, and as sub-tree leaves are all the tables. Clicking on one of the tables shows all the columns with the first 250 row values. But the juicy utility is when you click on one of the databases, enabling the right panel as a console where execute SQL statements.
To manipulate your app’s SharedPreferences, select “Local Storage”. 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 it. Any changes you make to the values are permanent.
UI components hierarchy viewer
Click on “Elements” tab and you will see a small magnifying glass icon in the upper left of the Chrome DevTools UI (to the left of the “Elements” tab itself). Click it, which will cause it to turn blue. Then tap on the view you’re interested in on your phone/emulator. The view should now be selected in the Elements tab.
Note: These functionalities have no conflict with adb, so you can run Android Device Monitor simultaneously; complementing your debugging and profiling work.
Other features
- Developers can also choose to enable the optional dumpapp tool which offers a powerful command-line interface to application internals, and with the framework it provides they, can easily develop their custom plugins to extend dumpapp to their own needs.
- Javascript Console allows for execution of javascript code that can interact with the app.
- Stetho allows you to inspect, in real time, the network connections that your app makes.
Stetho cannot fully replace Android Studio’s debugger yet but it definitely offers features that can significantly improve your debugging experience.
Try it yourself! I encourage you to test the other sophisticated and useful features and also go even further and discover other Facebook’s open source tools.
