Stetho

To use Stetho in your Android project, add the core dependency to your build configuration. You can also optionally add network inspection helpers or JavaScript console support.

Core Dependency: Required for basic Stetho functionality.

Network Helpers:

• stetho-okhttp3: For OkHttp 3.x users.
• stetho-urlconnection: For HttpURLConnection users.

JavaScript Console:

• stetho-js-rhino: Enables a JavaScript console via Rhino.

// Gradle
implementation 'com.facebook.stetho:stetho:1.6.0'
implementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
implementation 'com.facebook.stetho:stetho-urlconnection:1.6.0'
implementation 'com.facebook.stetho:stetho-js-rhino:1.6.0'

<!-- Maven -->
<dependency>
  <groupId>com.facebook.stetho</groupId>
  <artifactId>stetho</artifactId>
  <version>1.6.0</version>
</dependency>

To use the JavaScript console in Stetho, add the stetho-js-rhino dependency to your project. You must also include the main stetho dependency.

Gradle:

implementation 'com.facebook.stetho:stetho-js-rhino:1.4.2'

Maven:

<dependency>
  <groupId>com.facebook.stetho</groupId>
  <artifactId>stetho-js-rhino</artifactId>
  <version>1.4.2</version>
</dependency>

The Rhino JavaScript integration is automatically detected by Stetho once the dependency is added. To configure the JavaScript environment (e.g., adding custom variables or classes), use Stetho.newInitializerBuilder with an InspectorModulesProvider that utilizes JsRuntimeReplFactoryBuilder.

    Stetho.initialize(Stetho.newInitializerBuilder(context)
        .enableWebKitInspector(new InspectorModulesProvider() {
          @Override
          public Iterable<ChromeDevtoolsDomain> get() {
            return new DefaultInspectorModulesBuilder(context).runtimeRepl(
                new JsRuntimeReplFactoryBuilder(context)
                    // Pass to JavaScript: var foo = "bar";
                    .addVariable("foo", "bar")
                    .build()
            ).finish();
          }
        })
        .build();

If your application uses OkHttp 3.x, you can inspect network traffic by adding the StethoInterceptor to your OkHttpClient builder.

Best Practice: Add the Stetho interceptor after all other interceptors. Since interceptors can modify requests and responses, placing Stetho last ensures you see the actual traffic being sent/received by the network.

new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build()

For applications using HttpURLConnection, use StethoURLConnectionManager to integrate Stetho.

Caveat: You must explicitly add Accept-Encoding: gzip to your request headers and manually handle compressed responses. This is required for Stetho to correctly report compressed payload sizes.

To enable the debug bridge, call Stetho.initializeWithDefaults(this) within your Application class's onCreate method.

Important: You must ensure your custom Application class is registered in your AndroidManifest.xml using the android:name attribute, otherwise the device will not appear in chrome://inspect.

public class MyApplication extends Application {
  public void onCreate() {
    super.onCreate();
    Stetho.initializeWithDefaults(this);
  }
}

<!-- AndroidManifest.xml -->
<application
        android:name="MyApplication"
        ...>
 </application>

Once enabled, you can run live JavaScript commands from the console. The runtime includes built-in utilities like importClass, importPackage, and a console.log() method. By default, your application's package is also imported, allowing access to resources like R.string.app.

importPackage(android.widget);
importPackage(android.os);
var handler = new Handler(Looper.getMainLooper());
handler.post(function() {
  Toast.makeText(context, "Hello from JavaScript", Toast.LENGTH_LONG).show();
});

The scraper.js tool can be used to generate Java class definitions based on the Chrome DevTools protocol (protocol.json). By providing a specific class name (e.g., Debugger.FunctionDetails), the scraper parses the protocol file and produces the corresponding Java source code with Jackson annotations (@JsonProperty).

To use the scraper, run the following command from your terminal:

node scraper.js protocol.json Debugger.FunctionDetails

Arguments:

• protocol.json: The path to the protocol definition file (typically downloaded from Google Code).
• Debugger.FunctionDetails: The specific namespace and class you wish to generate.

Note: If the domain is not explicitly specified in the command, it is assumed to be implicit based on the protocol file content.

You can extend the dumpapp command-line tool by providing custom DumperPlugin implementations. Instead of using initializeWithDefaults, use Stetho.initialize with a custom InitializerBuilder to register your plugins via a DumperPluginsProvider.

Stetho.initialize(Stetho.newInitializerBuilder(context)
    .enableDumpapp(new DumperPluginsProvider() {
      @Override
      public Iterable<DumperPlugin> get() {
        return new Stetho.DefaultDumperPluginsBuilder(context)
            .provide(new MyDumperPlugin())
            .finish();
      }
    })
    .enableWebKitInspector(Stetho.defaultInspectorModulesProvider(context))
    .build())