Stetho: The Best Debugging Tool for Android Applications
Let's explore Facebook’s debugging tool and learn how easy it is to check network requests
As Android developers, our development life often involves integrating API or web services while building dynamic apps. Previously, it’s been a little bit troublesome to find the responses and missing fields in the API response because we used to keep logs to check the output or debug the app using the debugger available in Studio.
After spending a good amount of time, we realized that there were some unexpected types of data that were coming from the back end. So this process needs a little bit of time and patience to explore things because if you connect multiple devices, you always need to switch between them to check the output.
But then I found Stetho, which made the work easier and saved time. Though it’s been a long time, there are many developers out there who still do logging or debugging for network call inspections. I’m writing this for those who need some guidance to make their work simpler.
You need patience and time to explore how many times a network request is getting fired. While dealing with multiple devices, you need to switch between devices to see logs or attach debuggers, which makes inspecting network requests a bit problematic.
We need a library or tool that automates the network call inspection easily with few lines of code. We need to be able to inspect network calls parallelly to a certain number of devices at a point to check if events are firing correctly or not. So this is where Stetho comes into play.
What Is Stetho?
Stetho is a simple library from Facebook with which we can easily debug network calls. No need to add logs during development and remove them while releasing. No need to use a debugger. Just by following three steps, we can get all network calls inside the Chrome desktop browser. We can see all network requests getting fired from the application, such as latency, size shot, fire sequence, request params, response data, etc. Stetho has many features apart from network inspection, but this article will briefly discuss network request inspection. So let’s get started.
Step 1: Add dependency in build.gradle
Only the main
stetho dependency is strictly required. However, we can also use one of the network helpers:
implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1' ORimplementation 'com.facebook.stetho:stetho-urlconnection:1.5.1'
Step 2: Initialize it in the application class with one line of code
Don’t forget to register your class in the
Step 3: Enable network inspection
If you are using the popular OkHttp library at the 3.x release, you can use the interceptors system to automatically hook into your existing stack. This is currently the simplest and most straightforward way to enable network inspection:
Interceptors are a powerful mechanism that can monitor, rewrite, and retry calls. Check out more about interceptors.
That's it! We are ready to inspect every network call that’s getting fired from the app. Easy, right?
The next question would be where to check the output.
How to Work With Chrome DevTools to Inspect
The integration with the Chrome DevTools front end is implemented using a client/server protocol that the Stetho software provides for your application. Now that the basic setup is done, we need to open Chrome and connect the device to check the request fires.
Open your Chrome browser and enter
chrome://inspect in the URL bar. Then hit enter and you will be able to see your devices connected as shown in the image below. Click inspect to see the magic!
In the screen above, you can see my connected device with the starting name ONEPLUS. Here, it will list all the devices that are connected with the USB debugging option enabled along with the list of apps on each device with Stetho integrated.
So when you click on inspect below the app name, actual magic happens. It opens a separate window that gives an overview of all the services in a list format with every detail required.
You can also find any duplicate requests that are getting fired easily, as we have with Log.
When you click on any single request, it will show three different sections: Headers, Preview, and Response. To view the individual section, you can click on each one. For example, if you click on Headers, it will show the following:
You can view the complete request params part here. This is very comfortable for viewing the request header part in detail. You can easily find out any request params that are missing while firing the request.
Now let’s check the Preview section:
It shows in the JSON collapsed format when you click on the first node, then it opens the objects inside it and the same continues with the internal nodes. This can help you to build model classes very easily. You can even figure out the mismatching data formats and expected values’ missing cases in seconds.
The Response section is raw-format data. You can simply copy-paste it anywhere:
If your device is disconnected, it shows the prompt below:
Click the checkbox for the Preserve Log option so you can view the data even if the device is disconnected. Otherwise, the data would be lost and you would need to reconnect the device and try again. Check out a sample of Stetho on GitHub by Facebook developers for more information.
Thanks for reading. Please let me know your suggestions and comments.