Stetho — was ist das, Debugging von Android über Chrome DevTools

Was ist Stetho und wie funktioniert es

Stetho ist eine Java-Bibliothek, die einen lokalen WebSocket-Server innerhalb der Android-Anwendung startet. Chrome DevTools verbindet sich über einen adb-Port mit diesem Server und erhält Zugriff auf die internen Komponenten der Anwendung: Datenbanken, Netzwerkanfragen, Preferences und die View-Hierarchie. Die gesamte Kommunikation läuft über das Chrome DevTools Protocol, wodurch die Standardtools des Browsers ohne Installation zusätzlicher Software genutzt werden können.

Architektur und Komponenten

Die Bibliothek besteht aus Modulen: stetho (Kern), stetho-okhttp (Traffic-Abfangen über OkHttp), stetho-urlconnection (Abfangen über HttpURLConnection) und stetho-js-rhino (Unterstützung für JavaScript-Plugins). Der Kern öffnet einen UNIX-Socket, mit dem sich Chrome über adb forward verbindet. Jeder Inspector ist als separates Plugin implementiert, das bei der Initialisierung von Stetho registriert wird.

Anforderungen und Einschränkungen

Stetho unterstützt Android 4.4+ (API 19) und funktioniert nur in Debug-Builds. Auf Geräten mit Android 11+ ist eine explizite INTERNET-Berechtigung im Manifest erforderlich. Die Bibliothek wird seit 2020 offiziell nicht mehr von Facebook unterstützt, aber der Code bleibt offen und wird in Legacy-Projekten verwendet. Für neue Projekte empfiehlt Google Android Studio Profiler und Network Inspector.

Verbindung und Konfiguration von Stetho in einem Android-Projekt

Die Verbindung erfolgt über eine Gradle-Abhängigkeit mit dem Flag debugImplementation, damit Stetho nur im Debug-Build funktioniert. Die Initialisierung erfolgt in der Methode Application.onCreate() mit einem einzigen Aufruf von Stetho.initializeWithDefaults(this). Für den Network Inspector ist eine Integration mit OkHttp über einen Interceptor erforderlich.

// build.gradle (app) — Stetho hinzufügen
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Initialisierung in der Application-Klasse
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Konfiguration des Network Interceptors

Fügen Sie zum Abfangen von Netzwerkanfragen über OkHttp StethoInterceptor zur Interceptor-Kette hinzu. Stetho protokolliert automatisch URL, Anforderungs- und Antwort-Header, Statuscode und Ausführungszeit. Die Daten werden nach dem Verbinden mit dem Gerät über chrome://inspect im Network-Tab von Chrome DevTools angezeigt.

Network Inspector: Abfangen von HTTP-Traffic

Der Network Inspector von Stetho zeigt alle HTTP-Anfragen der Anwendung in chronologischer Reihenfolge. Für jede Anfrage sind verfügbar: Methode, URL, Statuscode, Anforderungs- und Antwort-Header, Anforderungs- und Antwort-Body (einschließlich JSON und Binärdaten). Der Tab Preview zeigt den Antwort-Body in formatierter Form.

Filtern und Suchen von Anfragen

Chrome DevTools unterstützt das Filtern von Anfragen nach Typ (XHR, JS, CSS, Doc), Statuscode und Domain. Das Suchfeld filtert nach URL und Inhalt. Für die mobile Entwicklung ist es nützlich, Anfragen nach API-Domain zu gruppieren und die Reihenfolge der Aufrufe beim Testen der Bildschirme der Anwendung zu prüfen.

// OkHttp-Client mit Stetho-Interceptor
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// Eine Anfrage ausführen
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: Arbeiten mit SQLite

Der Database Inspector von Stetho verbindet sich über Chrome DevTools mit den SQLite-Datenbanken der Anwendung. Im Tab Resources → Web SQL werden alle geöffneten Datenbanken, ihre Tabellen und Inhalte angezeigt. Verfügbar sind das Anzeigen der Tabellenstruktur, Indizes und das Ausführen beliebiger SQL-Abfragen.

SQL-Abfragen über DevTools ausführen

In der Konsole von Chrome DevTools können Sie SQL-Abfragen direkt gegen die Datenbank der Anwendung ausführen: SELECT, INSERT, UPDATE, DELETE. Dies ist nützlich zum Bereinigen von Daten vor Tests, zum Prüfen der Korrektheit von Migrationen und zum manuellen Korrigieren fehlerhafter Datensätze ohne Neuaufbau der Anwendung. Alle Änderungen sind sofort auf dem Gerät sichtbar.

Dumpapp und benutzerdefinierte Plugins

Dumpapp ist die Shell-Schnittstelle von Stetho, mit der benutzerdefinierte Befehle über adb ausgeführt werden können. Dumpapp-Plugins werden bei der Initialisierung von Stetho registriert und können jeden Zustand der Anwendung exportieren: Cache, Einstellungen, Zustand des DI-Containers. Befehle werden als adb forward tcp:12345 localabstract:stetho_dumpapp ausgeführt.

Erstellen eines benutzerdefinierten Dumpapp-Plugins

Das Plugin implementiert die Schnittstelle DumperContext und wird über Stetho.initialize mit einem benutzerdefinierten InspectorModules registriert. Das folgende Beispiel zeigt ein Plugin zum Dumpen von SharedPreferences: Die Daten werden in JSON serialisiert und über einen adb-Befehl im Terminal ausgegeben.

// Benutzerdefiniertes Dumpapp-Plugin für SharedPreferences
public class PrefsDumper implements DumperContext {
    @Override
    public String getName() {
        return "prefs";
    }
    @Override
    public void dump(DumperContext ctx) {
        SharedPreferences sp = ctx.getContext()
            .getSharedPreferences("app_prefs", Context.MODE_PRIVATE);
        ctx.getStdout().println(sp.getAll().toString());
    }
}

Stetho vs. Android Studio Inspector: Vergleich

Android Studio bietet integrierte Profiling-Tools: Network Profiler, Database Inspector und View Inspector, die mit Android Studio 4.1+ eingeführt wurden. Stetho war vor der Einführung dieser Tools beliebt und bleibt für Projekte relevant, die OkHttp verwenden und eine Integration mit Chrome DevTools benötigen.

Wann Stetho wählen

Stetho ist in Legacy-Projekten gerechtfertigt, in denen OkHttp bereits verwendet wird und das Team an Chrome DevTools gewöhnt ist. Für neue Projekte deckt Android Studio Inspector die meisten Debugging-Szenarien ab. Allerdings ist Chrome DevTools für SQLite-Abfragen weiterhin bequemer: Die integrierte Konsole mit SQL-Autovervollständigung ist schneller als sequenzielle Klicks in der IDE.

Inspektion der View-Hierarchie über Stetho

Die View Hierarchy wird in Stetho im Tab Elements von Chrome DevTools als DOM-ähnlicher Baum angezeigt. Jede View wird als HTML-Element mit Attributen dargestellt: id, layout_width, layout_height, padding, margin, visibility und Text. Änderungen im Baum werden in Echtzeit synchronisiert, wenn der Bildschirm gedreht oder die UI aktualisiert wird.

Eigenschaften anzeigen und ändern

Wenn Sie ein Element im Baum auswählen, können Sie seine Eigenschaften im Panel Styles anzeigen — ähnlich wie bei der Inspektion von Webseiten. Stetho zeigt berechnete Größen, Innenabstände, Hintergrundfarbe und Zustand (pressed, focused, enabled). Das Ändern einiger Eigenschaften in DevTools wird sofort auf die Anwendung angewendet, was die Auswahl von UI-Parametern ohne Neuaufbau beschleunigt.

Speicherlecks über View Inspector finden

Stetho hilft, Speicherlecks im Zusammenhang mit View zu erkennen: Wenn eine Activity nach finish() nicht zerstört wird, bleibt ihre Root-View im Baum. Durch regelmäßiges Prüfen des Elements-Tabs können Sie Phantom-Activities bemerken und die Quelle des Lecks finden — meist statische Referenzen auf Context oder nicht geschlossene Dialoge.

Praktische Debugging-Techniken

Stetho ist effektiv zum Prüfen der JSON-Serialisierung vor dem Senden an den Server. Öffnen Sie den Network Inspector, finden Sie die Anfrage und zeigen Sie den Body im Raw-Modus an, um die Datenstruktur und die Korrektheit der Felder zu prüfen.

Debugging von SQLiteOpenHelper

Stetho zeigt alle Datenbanken an, die über SQLiteOpenHelper erstellt wurden. Wenn die Datenbank nicht in Chrome DevTools erscheint, prüfen Sie, ob getWritableDatabase() mindestens einmal im Code der Anwendung aufgerufen wurde.

Interceptor-Reihenfolge in OkHttp

Stetho muss der letzte Interceptor in der OkHttp-Kette sein, um modifizierte Anfragen zu sehen. Die richtige Reihenfolge: AuthInterceptor zuerst, dann LoggingInterceptor, dann StethoInterceptor zuletzt.

Praktische Debugging-Techniken mit Stetho

Stetho ist effektiv zum Prüfen der Korrektheit der JSON-Serialisierung vor dem Senden an den Server. Öffnen Sie den Network Inspector, finden Sie die Anfrage und zeigen Sie den Anforderungs-Body im Raw-Modus an, um die Korrektheit der Feldstruktur und der Datentypen sicherzustellen.

Debugging von SQLiteOpenHelper und ContentProvider

Stetho zeigt alle Datenbanken an, die über SQLiteOpenHelper erstellt wurden. Wenn die Datenbank nicht in Chrome DevTools erscheint, prüfen Sie, ob die Methode getWritableDatabase() mindestens einmal im Code der Anwendung aufgerufen wurde. Für Migrationen führen Sie ALTER TABLE über die SQL-Konsole aus und prüfen Sie das Ergebnis mit einer SELECT-Abfrage.

Interceptor-Reihenfolge in der OkHttp-Kette

Stetho muss der letzte Interceptor in der OkHttp-Kette sein, um die endgültigen modifizierten Anfragen anzuzeigen. Die richtige Reihenfolge: AuthInterceptor zuerst, dann LoggingInterceptor, dann StethoInterceptor zuletzt für korrektes Protokollieren.