The Open Event Android project helps event organizers to generator Apps (apk format) for their events/conferences by providing api end point or zip generated using Open Event server. In this android app data is fetched from the internet using network calls to the Open Event server and the data of the event is stored in a database. It is difficult to debug an app with so many network calls and database connectivity. A way to approach this is using Stetho which is very helpful tool for debugging an app which deals with network calls and database.
Stetho is Facebook’s open source project works as debug bridge for android applications which gives powerful Chrome Developers Tools for debugging android applications using Chrome desktop browser.
What can you do using stetho ?
- Analyze network traffic
- Inspect elements(layouts/views)
- View SQLite database in table format
- Run queries on SQLite database
- View shared preference and edit it
- Manipulate android app from command line
1. Add Gradle dependency
To add stetho in your app add ‘com.facebook.stetho:stetho:1.5.0’ dependency in your app module’s build.gradle file. This dependency is strictly required.
For network inspection add one of the following dependency according to which you will be using
2. Initialize stetho
Initialize stetho in class MyApplication which extends Application class by overriding onCreate() method. Make sure you have added MyAppication in manifest.
Stetho.initializeWithDefaults(this) initializes stetho with defaults configuration(without network inspection and more). It will be able to debug database.
For enabling network inspection add StethoInterceptor in OkHttpClient
Using Chrome Developer Tools
1. Open Inspect window
Run stetho initialized app on device or emulator then start Google chrome and type chrome://inspect. You will see you device with your app’s package name. Click on “inspect”2. Network Inspection
Go to Network tab. It will show all network calls. With almost all info like url(path), method, returned status code, returned data type, size, time taken etc.
You can also see preview of image and preview, response of returned json data by clicking on Name.
3. SQLite Database
Go to “Resources” tab and select “Web SQL”. You will see database file(.db). By clicking on database file you will see all tables in that database file. And by clicking on table name you will see data in row-column format for that table.
4. Run queries on SQLite database
Same as above go to “Resources” tab and select “Web SQL”. You will see database file(.db). By clicking on database file you will see console on right side, where you can run queries on SQLite database. Example,
5. Shared Preferences Inspection
Go to “Resources” tab and select “Local Storage”. You will show all files that your app used to save key-value pairs in shared preference and by clicking on file you will see all key-value pairs.
6. Element(View/Layout) Inspection
Go to “Elements” tab. You will see top layout/view in view hierarchy. By clicking it you will see child layout/view of that layout/view. On hover on layout/view you view will be inspected in your device/emulator.
In this blog the most important have been put forward, but there are still some nice stuff available,like:
- Dumpapp : It allows an integration higher than the Developer Tools, enabling the development of custom plugins.
By now, you must have realized that stetho can significantly improve your debugging experience. To learn more about stetho, refer to