Stetho — mi ez, Android hibakeresése Chrome DevTools segítségével

Mi az a Stetho és hogyan működik

Stetho — egy Java-könyvtár, amely helyi WebSocket-kiszolgálót indít az Android-alkalmazáson belül. A Chrome DevTools az adb-porton keresztül csatlakozik ehhez a kiszolgálóhoz, hozzáférést szerezve az alkalmazás belső összetevőihez: adatbázisok, hálózati kérések, preferences és view-hierarchia. Minden kommunikáció a Chrome DevTools Protocol protokollon keresztül történik, ami lehetővé teszi a böngésző szabványos eszközeinek használatát további szoftver telepítése nélkül.

Architektúra és összetevők

A könyvtár modulokból áll: stetho (mag), stetho-okhttp (forgalom elfogása az OkHttp segítségével), stetho-urlconnection (elfogás a HttpURLConnection segítségével) és stetho-js-rhino (JavaScript-bővítmények támogatása). A mag UNIX-socketet nyit, amelyhez a Chrome adb forward segítségével csatlakozik. Minden inspector külön bővítményként van megvalósítva, amelyet a Stetho inicializálásakor regisztrálnak.

Követelmények és korlátozások

A Stetho támogatja az Android 4.4+ (API 19) rendszert, és csak debug-buildekben működik. Az Android 11+ rendszerű eszközökön kifejezett INTERNET-engedély szükséges a manifestben. A könyvtárat 2020 óta hivatalosan nem támogatja a Facebook, de a kód nyitva marad, és legacy-projektekben használják. Új projektekhez a Google az Android Studio Profiler és a Network Inspector használatát javasolja.

A Stetho csatlakoztatása és konfigurálása Android-projektben

Csatlakoztatás a Gradle-függőségen keresztül történik a debugImplementation zászlóval, hogy a Stetho csak debug-buildben működjön. Az inicializálás a Application.onCreate() metódusban történik egyetlen Stetho.initializeWithDefaults(this) hívással. A Network Inspectorhoz az OkHttp-val való integráció szükséges Interceptor segítségével.

// build.gradle (alkalmazás) — a Stetho csatlakoztatása
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Inicializálás az Application osztályban
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

A Network Interceptor konfigurálása

A hálózati kérések OkHttp-n keresztüli elfogásához adja hozzá a StethoInterceptor-t az interceptorok láncához. A Stetho automatikusan naplózza az URL-t, a kérés és válasz fejléceit, az állapotkódot és a végrehajtási időt. Az adatok a Chrome DevTools Network fülén jelennek meg, miután a chrome://inspect segítségével csatlakozott az eszközhöz.

Network Inspector: HTTP-forgalom elfogása

A Stetho Network Inspector-e az alkalmazás összes HTTP-kérését időrendi sorrendben jeleníti meg. Minden kéréshez elérhető: metódus, URL, állapotkód, a kérés és válasz fejlécei, a kérés és válasz törzse (beleértve a JSON-t és a bináris adatokat). A Preview fül a válasz törzsét formázott formában mutatja.

A kérések szűrése és keresése

A Chrome DevTools támogatja a kérések szűrését típus (XHR, JS, CSS, Doc), állapotkód és tartomány szerint. A keresőmező URL és tartalom szerint szűr. Mobil fejlesztéshez hasznos az API-tartomány szerint csoportosítani a kéréseket, és ellenőrizni a hívások sorrendjét az alkalmazás képernyőinek tesztelésekor.

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

// A kérés végrehajtása
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: munka a SQLite-tal

A Stetho Database Inspector-e a Chrome DevTools segítségével csatlakozik az alkalmazás SQLite-adatbázisaihoz. A Resources → Web SQL fülön megjelenik az összes megnyitott adatbázis, azok táblái és tartalma. Elérhető a táblák szerkezetének, az indexeknek a megtekintése és tetszőleges SQL-lekérdezések végrehajtása.

SQL-lekérdezések végrehajtása a DevTools segítségével

A Chrome DevTools konzoljában közvetlenül az alkalmazás adatbázisán hajthatók végre SQL-lekérdezések: SELECT, INSERT, UPDATE, DELETE. Ez hasznos az adatok tisztításához tesztelés előtt, a migrációk helyességének ellenőrzéséhez és a hibás rekordok kézi javításához az alkalmazás újraépítése nélkül. Minden változás azonnal látható az eszközön.

Dumpapp és egyéni bővítmények

Dumpapp — a Stetho shell-interfésze, amely lehetővé teszi egyéni parancsok végrehajtását adb segítségével. A Dumpapp-bővítményeket a Stetho inicializálásakor regisztrálják, és az alkalmazás bármely állapotát exportálhatják: gyorsítótár, beállítások, a DI-konténer állapota. A parancsok a következőképpen hajthatók végre: adb forward tcp:12345 localabstract:stetho_dumpapp.

Egyéni Dumpapp-bővítmény létrehozása

A bővítmény a DumperContext interfészt valósítja meg, és egyéni InspectorModules segítségével regisztrálják a Stetho.initialize-n keresztül. Az alábbi példa a SharedPreferences dumpjához való bővítményt mutat: az adatok JSON-ba szerializálódnak, és adb-parancs segítségével a terminálban jelennek meg.

// Egyéni Dumpapp-bővítmény a SharedPreferences-hez
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: összehasonlítás

Android Studio beépített profilozó eszközöket kínál: Network Profiler, Database Inspector és View Inspector, amelyek az Android Studio 4.1+ verzióban jelentek meg. A Stetho népszerű volt ezen eszközök bevezetése előtt, és továbbra is aktuális az OkHttp-t használó, Chrome DevTools-integrációt igénylő projekteknél.

Mikor válasszuk a Stetho-t

Stetho legacy-projektekben indokolt, ahol az OkHttp már használatban van, és a csapat hozzászokott a Chrome DevTools-hoz. Új projektekhez az Android Studio Inspector a hibakeresési forgatókönyvek nagy részét lefedi. A Chrome DevTools azonban továbbra is kényelmesebb a SQLite-lekérdezésekhez: az SQL-automatikus kiegészítéssel ellátott beépített konzol gyorsabb, mint az IDE-ben történő egymást követő kattintások.

A View Hierarchy ellenőrzése a Stetho segítségével

View Hierarchy a Stetho-ban a Chrome DevTools Elements fülén DOM-szerű faként jelenik meg. Minden View HTML-elemként jelenik meg attribútumokkal: id, layout_width, layout_height, padding, margin, visibility és szöveg. A fában bekövetkező változások valós időben szinkronizálódnak a képernyő elforgatásakor vagy az UI frissítésekor.

Tulajdonságok megtekintése és módosítása

Ha kiválaszt egy elemet a fában, megtekintheti annak tulajdonságait a Styles panelen — hasonlóan a weboldalak ellenőrzéséhez. A Stetho megjeleníti a számított méreteket, a margókat, a háttérszínt és az állapotot (pressed, focused, enabled). Egyes tulajdonságok DevTools-ban történő módosítása azonnal alkalmazódik az alkalmazásra, ami újraépítés nélkül gyorsítja az UI-paraméterek beállítását.

Memóriaszivárgások keresése a View Inspector segítségével

A Stetho segít azonosítani a View-val kapcsolatos memóriaszivárgásokat: ha az Activity a finish() után nem semmisül meg, annak gyökér View-ja a fában marad. Az Elements fül rendszeres ellenőrzésével észrevehetők a fantom Activity-k, és megtalálható a szivárgás forrása — általában a Context statikus hivatkozásai vagy a be nem zárt párbeszédablakok.

Gyakorlati hibakeresési technikák

Stetho hatékony a JSON-szerializáció ellenőrzésére, mielőtt a kérés a szerverre kerül. Nyissa meg a Network Inspector-t, keresse meg a kérést, és a Raw módban tekintse meg a törzset az adatszerkezet és a mezők helyességének ellenőrzéséhez.

A SQLiteOpenHelper hibakeresése

A Stetho megjeleníti az összes, SQLiteOpenHelper segítségével létrehozott adatbázist. Ha az adatbázis nem jelenik meg a Chrome DevTools-ban — ellenőrizze, hogy a getWritableDatabase() legalább egyszer meghívásra került az alkalmazás kódjában.

Az Interceptor sorrendje az OkHttp-ban

A Stetho-nak az OkHttp-lánc utolsó interceptorjának kell lennie, hogy lássa a módosított kéréseket. Helyes sorrend: AuthInterceptor first, majd LoggingInterceptor, végül StethoInterceptor.

Gyakorlati hibakeresési technikák a Stetho-val

Stetho hatékony a JSON-szerializáció helyességének ellenőrzésére, mielőtt a kérés a szerverre kerül. Nyissa meg a Network Inspector-t, keresse meg a kérést, és a Raw módban tekintse meg a kérés törzsét, hogy megbizonyosodjon a mezők szerkezetének és az adattípusok helyességéről.

A SQLiteOpenHelper és a ContentProvider hibakeresése

A Stetho megjeleníti az összes, SQLiteOpenHelper segítségével létrehozott adatbázist. Ha az adatbázis nem jelenik meg a Chrome DevTools-ban — ellenőrizze, hogy a getWritableDatabase() metódus legalább egyszer meghívásra került az alkalmazás kódjában. A migrációkhoz hajtsa végre az ALTER TABLE-t az SQL-konzolban, és ellenőrizze az eredményt SELECT-lekérdezéssel.

Az Interceptor sorrendje az OkHttp-láncban

A Stetho-nak az OkHttp-lánc utolsó interceptorjának kell lennie, hogy megjelenítse a végleges módosított kéréseket. Helyes sorrend: AuthInterceptor első, majd LoggingInterceptor, végül StethoInterceptor a helyes naplózáshoz.