Stetho — vad är det, felsökning av Android via Chrome DevTools

Vad är Stetho och hur fungerar det

Stetho — är ett Java-bibliotek som startar en lokal WebSocket-server i Android-appen. Chrome DevTools ansluter till denna server via adb-porten och får åtkomst till appens interna komponenter: databaser, nätverksförfrågningar, preferences och view-hierarki. All kommunikation sker via protokollet Chrome DevTools Protocol, vilket gör att du kan använda webbläsarens standardverktyg utan att installera ytterligare programvara.

Arkitektur och komponenter

Biblioteket består av moduler: stetho (kärnan), stetho-okhttp (fånga trafik via OkHttp), stetho-urlconnection (fånga via HttpURLConnection) och stetho-js-rhino (stöd för JavaScript-plugins). Kärnan öppnar en UNIX-socket som Chrome ansluter till via adb forward. Varje inspektör är implementerad som en separat plugin som registreras vid initieringen av Stetho.

Krav och begränsningar

Stetho stödjer Android 4.4+ (API 19) och fungerar endast i debug-byggen. På enheter med Android 11+ krävs ett explicit INTERNET-tillstånd i manifestet. Biblioteket stöds inte officiellt av Facebook sedan 2020, men koden förblir öppen och används i legacy-projekt. För nya projekt rekommenderar Google Android Studio Profiler och Network Inspector.

Ansluta och konfigurera Stetho i ett Android-projekt

Anslutning görs via ett Gradle-beroende med flaggan debugImplementation, så att Stetho bara fungerar i debug-bygget. Initieringen sker i metoden Application.onCreate() med ett enda anrop Stetho.initializeWithDefaults(this). För Network Inspector krävs integration med OkHttp via en Interceptor.

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

// Initiering i Application-klassen
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Konfigurera Network Interceptor

För att fånga nätverksförfrågningar via OkHttp lägger du till StethoInterceptor i interceptor-kedjan. Stetho loggar automatiskt URL:en, rubriker för förfrågan och svar, statuskod och exekveringstid. Data visas på fliken Network i Chrome DevTools efter anslutning till enheten via chrome://inspect.

Network Inspector: fånga HTTP-trafik

Stethos Network Inspector visar alla HTTP-förfrågningar från appen i kronologisk ordning. För varje förfrågan finns: metod, URL, statuskod, rubriker för förfrågan och svar, brödtext för förfrågan och svar (inklusive JSON och binärdata). Fliken Preview visar svarstexten i formaterad form.

Filtrera och söka efter förfrågningar

Chrome DevTools stödjer filtrering av förfrågningar efter typ (XHR, JS, CSS, Doc), statuskod och domän. Sökfältet filtrerar efter URL och innehåll. För mobilutveckling är det användbart att gruppera förfrågningar efter API-domän och kontrollera anropsordningen när du testar appens skärmar.

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

// Utför förfrågan
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: arbeta med SQLite

Stethos Database Inspector ansluter till appens SQLite-databaser via Chrome DevTools. På fliken Resources → Web SQL visas alla öppnade databaser, deras tabeller och innehåll. Visning av tabellstrukturer, index och exekvering av godtyckliga SQL-frågor är tillgängligt.

Köra SQL-frågor via DevTools

I Chrome DevTools konsol kan du köra SQL-frågor direkt mot appens databas: SELECT, INSERT, UPDATE, DELETE. Detta är användbart för att rensa data före testning, kontrollera migreringars korrekthet och manuellt korrigera felaktiga poster utan att bygga om appen. Alla ändringar syns omedelbart på enheten.

Dumpapp och anpassade plugins

Dumpapp — är Stethos shell-gränssnitt som gör att du kan köra anpassade kommandon via adb. Dumpapp-plugins registreras vid initieringen av Stetho och kan exportera vilket tillstånd som helst i appen: cache, inställningar, DI-containerns tillstånd. Kommandon körs som adb forward tcp:12345 localabstract:stetho_dumpapp.

Skapa en anpassad Dumpapp-plugin

Pluginen implementerar gränssnittet DumperContext och registreras via Stetho.initialize med en anpassad InspectorModules. Exemplet nedan visar en plugin för dump av SharedPreferences: data serialiseras till JSON och visas i terminalen via ett adb-kommando.

// Anpassad 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: jämförelse

Android Studio erbjuder inbyggda profileringsverktyg: Network Profiler, Database Inspector och View Inspector, som dök upp i Android Studio 4.1+. Stetho var populärt innan dessa verktyg introducerades och förblir aktuellt för projekt som använder OkHttp och kräver integration med Chrome DevTools.

När du ska välja Stetho

Stetho är motiverat i legacy-projekt där OkHttp redan används och teamet är vana vid Chrome DevTools. För nya projekt täcker Android Studio Inspector de flesta felsökningsscenarier. Chrome DevTools är dock fortfarande bekvämare för SQLite-frågor: den inbyggda konsolen med automatisk SQL-komplettering är snabbare än upprepade klick i IDE.

Inspektera View Hierarchy via Stetho

View Hierarchy visas i Stetho på fliken Elements i Chrome DevTools som ett DOM-liknande träd. Varje View representeras som ett HTML-element med attribut: id, layout_width, layout_height, padding, margin, visibility och text. Ändringar i trädet synkroniseras i realtid när skärmen roteras eller UI uppdateras.

Visa och ändra egenskaper

Genom att välja ett element i trädet kan du visa dess egenskaper på panelen Styles — på samma sätt som när du inspekterar webbsidor. Stetho visar beräknade mått, marginaler, bakgrundsfärg och tillstånd (pressed, focused, enabled). Ändring av vissa egenskaper i DevTools tillämpas omedelbart på appen, vilket påskyndar justeringen av UI-parametrar utan ombyggnad.

Hitta minnesläckor via View Inspector

Stetho hjälper till att upptäcka minnesläckor relaterade till View: om en Activity inte förstörs efter finish() förblir dess rot-View i trädet. Genom att regelbundet kontrollera fliken Elements kan du lägga märke till fantom-Activitys och hitta källan till läckan — vanligtvis statiska referenser till Context eller ej stängda dialogrutor.

Praktiska felsökningstekniker

Stetho är effektivt för att kontrollera JSON-serialisering innan den skickas till servern. Öppna Network Inspector, hitta förfrågan och visa brödtexten i Raw-läge för att kontrollera datastrukturen och fältens korrekthet.

Felsöka SQLiteOpenHelper

Stetho visar alla databaser som skapats via SQLiteOpenHelper. Om databasen inte visas i Chrome DevTools — kontrollera att getWritableDatabase() har anropats minst en gång i appkoden.

Interceptor-ordning i OkHttp

Stetho måste vara den sista interceptorn i OkHttp-kedjan för att se ändrade förfrågningar. Korrekt ordning: AuthInterceptor first, sedan LoggingInterceptor, och sist StethoInterceptor.

Praktiska felsökningstekniker med Stetho

Stetho är effektivt för att kontrollera korrektheten av JSON-serialisering innan den skickas till servern. Öppna Network Inspector, hitta förfrågan och visa förfrågans brödtext i Raw-läge för att säkerställa korrektheten av fältstrukturen och datatyperna.

Felsöka SQLiteOpenHelper och ContentProvider

Stetho visar alla databaser som skapats via SQLiteOpenHelper. Om databasen inte visas i Chrome DevTools — kontrollera att metoden getWritableDatabase() har anropats minst en gång i appkoden. För migreringar, utför ALTER TABLE via SQL-konsolen och verifiera resultatet med en SELECT-fråga.

Interceptor-ordning i OkHttp-kedjan

Stetho måste vara den sista interceptorn i OkHttp-kedjan för att visa slutliga ändrade förfrågningar. Korrekt sekvens: AuthInterceptor först, sedan LoggingInterceptor, och sist StethoInterceptor för korrekt loggning.