Stetho — wat is het, Android debuggen via Chrome DevTools

Wat is Stetho en hoe werkt het

Stetho — is een Java-bibliotheek die een lokale WebSocket-server binnen een Android-app start. Chrome DevTools verbindt met deze server via de adb-poort en krijgt toegang tot de interne onderdelen van de app: databases, netwerkverzoeken, preferences en view-hiërarchie. Alle communicatie verloopt via het protocol Chrome DevTools Protocol, waardoor standaard browserhulpmiddelen kunnen worden gebruikt zonder extra software te installeren.

Architectuur en onderdelen

De bibliotheek bestaat uit modules: stetho (kern), stetho-okhttp (verkeer onderscheppen via OkHttp), stetho-urlconnection (onderscheppen via HttpURLConnection) en stetho-js-rhino (ondersteuning voor JavaScript-plugins). De kern opent een UNIX-socket waarmee Chrome verbindt via adb forward. Elke inspector is geïmplementeerd als een afzonderlijke plugin die bij de initialisatie van Stetho wordt geregistreerd.

Vereisten en beperkingen

Stetho ondersteunt Android 4.4+ (API 19) en werkt alleen in debug-builds. Op apparaten met Android 11+ is een expliciete INTERNET-machtiging in het manifest vereist. De bibliotheek wordt sinds 2020 niet meer officieel ondersteund door Facebook, maar de code blijft open en wordt gebruikt in legacy-projecten. Voor nieuwe projecten raadt Google Android Studio Profiler en Network Inspector aan.

Stetho aansluiten en configureren in een Android-project

Aansluiten gebeurt via een Gradle-afhankelijkheid met de vlag debugImplementation, zodat Stetho alleen in debug-builds werkt. De initialisatie gebeurt in de methode Application.onCreate() met één aanroep Stetho.initializeWithDefaults(this). Voor Network Inspector is integratie met OkHttp via een Interceptor vereist.

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

// Initialisatie in de Application-klasse
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Network Interceptor configureren

Voeg StethoInterceptor toe aan de interceptor-keten om netwerkverzoeken via OkHttp te onderscheppen. Stetho logt automatisch de URL, headers van verzoek en antwoord, statuscode en uitvoeringstijd. De gegevens worden weergegeven in het tabblad Network in Chrome DevTools na verbinding met het apparaat via chrome://inspect.

Network Inspector: HTTP-verkeer onderscheppen

Network Inspector van Stetho toont alle HTTP-verzoeken van de app in chronologische volgorde. Voor elk verzoek zijn beschikbaar: methode, URL, statuscode, headers van verzoek en antwoord, body van verzoek en antwoord (inclusief JSON en binaire gegevens). Het tabblad Preview toont de antwoord-body in een opgemaakte vorm.

Verzoeken filteren en zoeken

Chrome DevTools ondersteunt filteren van verzoeken op type (XHR, JS, CSS, Doc), statuscode en domein. Het zoekveld filtert op URL en inhoud. Voor mobiele ontwikkeling is het nuttig om verzoeken te groeperen op API-domein en de volgorde van aanroepen te controleren bij het testen van app-schermen.

// OkHttp-client met Stetho-interceptor
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// Verzoek uitvoeren
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: werken met SQLite

Database Inspector van Stetho verbindt met de SQLite-databases van de app via Chrome DevTools. In het tabblad Resources → Web SQL worden alle geopende databases, hun tabellen en inhoud weergegeven. Bekijken van tabelstructuur, indexen en het uitvoeren van willekeurige SQL-query's is beschikbaar.

SQL-query's uitvoeren via DevTools

In de console van Chrome DevTools kunnen SQL-query's rechtstreeks op de database van de app worden uitgevoerd: SELECT, INSERT, UPDATE, DELETE. Dit is nuttig voor het opschonen van gegevens vóór het testen, het controleren van de juistheid van migraties en het handmatig corrigeren van onjuiste records zonder de app opnieuw te bouwen. Alle wijzigingen zijn onmiddellijk zichtbaar op het apparaat.

Dumpapp en aangepaste plugins

Dumpapp — is de shell-interface van Stetho waarmee aangepaste opdrachten via adb kunnen worden uitgevoerd. Dumpapp-plugins worden bij de initialisatie van Stetho geregistreerd en kunnen elke toestand van de app exporteren: cache, instellingen, toestand van de DI-container. Opdrachten worden uitgevoerd als adb forward tcp:12345 localabstract:stetho_dumpapp.

Een aangepaste Dumpapp-plugin maken

De plugin implementeert de interface DumperContext en wordt geregistreerd via Stetho.initialize met een aangepaste InspectorModules. Het onderstaande voorbeeld toont een plugin voor het dumpen van SharedPreferences: de gegevens worden geserialiseerd naar JSON en via een adb-opdracht in de terminal weergegeven.

// Aangepaste Dumpapp-plugin voor 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: vergelijking

Android Studio biedt ingebouwde profileringstools: Network Profiler, Database Inspector en View Inspector, die in Android Studio 4.1+ verschenen. Stetho was populair vóór de introductie van deze tools en blijft relevant voor projecten die OkHttp gebruiken en integratie met Chrome DevTools vereisen.

Wanneer kiezen voor Stetho

Stetho is gerechtvaardigd in legacy-projecten waar OkHttp al wordt gebruikt en het team gewend is aan Chrome DevTools. Voor nieuwe projecten dekt Android Studio Inspector de meeste debugscenario's. Toch blijft Chrome DevTools handiger voor SQLite-query's: de ingebouwde console met automatische SQL-aanvulling is sneller dan achtereenvolgende klikken in de IDE.

View Hierarchy inspecteren via Stetho

View Hierarchy wordt in Stetho weergegeven in het tabblad Elements van Chrome DevTools als een DOM-achtige boom. Elke View wordt voorgesteld als een HTML-element met attributen: id, layout_width, layout_height, padding, margin, visibility en tekst. Wijzigingen in de boom worden in realtime gesynchroniseerd bij het draaien van het scherm of het bijwerken van de UI.

Eigenschappen bekijken en wijzigen

Door een element in de boom te selecteren, kunnen de eigenschappen in het paneel Styles worden bekeken — vergelijkbaar met het inspecteren van webpagina's. Stetho toont berekende afmetingen, marges, achtergrondkleur en status (pressed, focused, enabled). Het wijzigen van sommige eigenschappen in DevTools wordt onmiddellijk op de app toegepast, wat het bepalen van UI-parameters zonder herbouwen versnelt.

Geheugenlekken zoeken via View Inspector

Stetho helpt bij het opsporen van geheugenlekken die verband houden met View: als een Activity na finish() niet wordt vernietigd, blijft de root-View in de boom. Door het tabblad Elements regelmatig te controleren kunnen fantoom-Activity's worden opgemerkt en de bron van het lek worden gevonden — meestal statische verwijzingen naar Context of niet-gesloten dialogen.

Praktische debug-technieken

Stetho is effectief voor het controleren van JSON-serialisatie vóór verzending naar de server. Open Network Inspector, vind het verzoek en bekijk de body in Raw-modus om de datastructuur en de juistheid van velden te controleren.

SQLiteOpenHelper debuggen

Stetho toont alle databases die via SQLiteOpenHelper zijn gemaakt. Als de database niet verschijnt in Chrome DevTools — controleer of getWritableDatabase() ten minste één keer in de app-code is aangeroepen.

Interceptor-volgorde in OkHttp

Stetho moet de laatste interceptor in de OkHttp-keten zijn om gewijzigde verzoeken te zien. Juiste volgorde: AuthInterceptor first, daarna LoggingInterceptor, en StethoInterceptor als laatste.

Praktische debug-technieken met Stetho

Stetho is effectief voor het controleren van de juistheid van JSON-serialisatie vóór verzending naar de server. Open Network Inspector, vind het verzoek en bekijk de body van het verzoek in Raw-modus om zeker te zijn van de juistheid van de veldstructuur en datatypen.

SQLiteOpenHelper en ContentProvider debuggen

Stetho toont alle databases die via SQLiteOpenHelper zijn gemaakt. Als de database niet verschijnt in Chrome DevTools — controleer of de methode getWritableDatabase() ten minste één keer in de app-code is aangeroepen. Voor migraties voert u ALTER TABLE uit via de SQL-console en controleert u het resultaat met een SELECT-query.

Interceptor-volgorde in de OkHttp-keten

Stetho moet de laatste interceptor in de OkHttp-keten zijn om de uiteindelijke gewijzigde verzoeken weer te geven. Juiste volgorde: AuthInterceptor eerst, daarna LoggingInterceptor, en StethoInterceptor als laatste voor correcte logging.