Android Tutorial

Software Setup and Configuration

Android Studio

File Structure

Components

Core Topics

Layout

View

Button

Intent and Intent Filters

Toast

RecyclerView

Fragments

Adapters

Other UI Component

Image Loading Libraries

Date and Time

Material Design

Bars

Working with Google Maps

Chart

Animation

Database

Advance Android

Jetpack

Architecture

App Publish

App Monetization

Debugging with Stetho in Android

Stetho is a sophisticated debug bridge for Android applications developed by Facebook. It allows developers to access Chrome Developer Tools features natively part of the Chrome desktop browser. With Stetho, you can inspect your Android application in the same way you inspect web pages in Chrome.

When integrated, Stetho can help in:

  • Viewing your SQLite database, queries, and updates in real-time.
  • Monitoring network operations, with detailed information about each request and response.
  • Inspecting application shared preferences.
  • Examining the current view hierarchy.

Here's how to integrate and use Stetho in your Android application:

1. Add Dependencies:

First, add the Stetho dependencies to your app's build.gradle file:

implementation 'com.facebook.stetho:stetho:1.5.1'
implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1' // If you're using OkHttp3

2. Initialize Stetho:

In your Application class (you might need to create one if you haven't already), initialize Stetho in the onCreate method:

import android.app.Application
import com.facebook.stetho.Stetho

class MyApplication : Application() {

    override fun onCreate() {
        super.onCreate()

        if (BuildConfig.DEBUG) {
            Stetho.initializeWithDefaults(this)
        }
    }
}

Note: It's recommended to initialize Stetho only for debug builds to prevent it from being active in release builds.

3. Using with OkHttp:

If you're using OkHttp for network requests, you can add Stetho's interceptor to inspect network traffic:

val client = OkHttpClient.Builder()
    .addNetworkInterceptor(StethoInterceptor())
    .build()

4. Inspecting Your App:

  1. Run your application on an emulator or a real device.
  2. Open the Chrome browser on your development machine.
  3. Navigate to chrome://inspect.
  4. Find your device and the running app's process in the list, and click the "Inspect" link underneath it.

After following these steps, the Chrome Developer Tools window will open, and you can select the "Resources" tab to view the app's SQLite databases, shared preferences, and more.

Notes:

  • Stetho has more features and extensions, like integration with the stetho-js-rhino for JavaScript inspection.

  • Stetho might not be actively maintained in the future, considering its last updates and the development speed of Android. Always check the library's GitHub page or other documentation for the most recent information.

  • There are alternatives to Stetho like Flipper by Facebook which offers similar features and more. Always explore other tools to find what best fits your needs.

  1. Stetho setup and configuration in Android:

    • Description: To set up Stetho, include the necessary dependencies in your app's build.gradle file and initialize Stetho in your Application class.
    • Code (build.gradle):
      implementation 'com.facebook.stetho:stetho:1.5.1'
      implementation 'com.facebook.stetho:stetho-okhttp3:1.5.1' // For OkHttp integration
      
      Code (Kotlin - Application class):
      import com.facebook.stetho.Stetho
      
      class MyApplication : Application() {
          override fun onCreate() {
              super.onCreate()
              Stetho.initializeWithDefaults(this)
          }
      }
      
  2. Debugging SQLite databases with Stetho in Android:

    • Description: Stetho provides a Chrome Developer Tools extension for inspecting SQLite databases.
    • Code (Kotlin - Application class):
      import com.facebook.stetho.Stetho
      import com.facebook.stetho.inspector.database.DatabaseFilesProvider
      import com.facebook.stetho.inspector.database.DatabaseFilesProviderFactory
      
      class MyApplication : Application() {
          override fun onCreate() {
              super.onCreate()
              Stetho.initialize(
                  Stetho.newInitializerBuilder(this)
                      .enableDumpapp(Stetho.defaultDumperPluginsProvider(this))
                      .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(this))
                      .addDatabaseDriver(createDatabaseDriver())
                      .build()
              )
          }
      
          private fun createDatabaseDriver(): DatabaseFilesProvider {
              return DatabaseFilesProviderFactory(this).create()
          }
      }
      
  3. Debugging JavaScript in WebView with Stetho:

    • Description: Stetho supports debugging JavaScript in WebView. Enable the Stetho JavaScript Bridge in your WebView settings.
    • Code (Kotlin - WebView initialization):
      import com.facebook.stetho.Stetho
      
      class MyActivity : AppCompatActivity() {
          override fun onCreate(savedInstanceState: Bundle?) {
              super.onCreate(savedInstanceState)
              Stetho.initializeWithDefaults(this)
              setContentView(R.layout.activity_main)
      
              val webView = findViewById<WebView>(R.id.webView)
              webView.settings.setJavaScriptEnabled(true)
              webView.settings.setDomStorageEnabled(true)
              Stetho.initializeWithDefaults(this)
          }
      }
      
  4. Setting up Stetho for Android in Kotlin:

    • Description: Follow the steps outlined in the "Stetho setup and configuration in Android" section to set up Stetho in a Kotlin-based Android application.
    • Code (Kotlin - Application class):
      import com.facebook.stetho.Stetho
      
      class MyApplication : Application() {
          override fun onCreate() {
              super.onCreate()
              Stetho.initializeWithDefaults(this)
          }
      }