Stetho — ce este, depanarea Android prin Chrome DevTools

Ce este Stetho și cum funcționează

Stetho — este o bibliotecă Java care pornește un server local WebSocket în interiorul aplicației Android. Chrome DevTools se conectează la acest server prin portul adb, obținând acces la componentele interne ale aplicației: baze de date, cereri de rețea, preferences și ierarhia view. Toată comunicarea trece prin protocolul Chrome DevTools Protocol, ceea ce permite utilizarea instrumentelor standard ale browserului fără instalarea de software suplimentar.

Arhitectură și componente

Biblioteca este formată din module: stetho (nucleul), stetho-okhttp (interceptarea traficului prin OkHttp), stetho-urlconnection (interceptarea prin HttpURLConnection) și stetho-js-rhino (suport pentru pluginuri JavaScript). Nucleul deschide un socket UNIX la care Chrome se conectează prin adb forward. Fiecare inspector este implementat ca un plugin separat, înregistrat la inițializarea Stetho.

Cerințe și limitări

Stetho suportă Android 4.4+ (API 19) și funcționează doar în build-urile de debug. Pe dispozitivele cu Android 11+ este necesară permisiunea explicită INTERNET în manifest. Biblioteca nu este susținută oficial de Facebook din 2020, dar codul rămâne deschis și este folosit în proiectele legacy. Pentru proiectele noi, Google recomandă Android Studio Profiler și Network Inspector.

Conectarea și configurarea Stetho în proiectul Android

Conectarea se face prin dependența Gradle cu flag-ul debugImplementation, pentru ca Stetho să funcționeze doar în build-ul de debug. Inițializarea are loc în metoda Application.onCreate() printr-un singur apel Stetho.initializeWithDefaults(this). Pentru Network Inspector este necesară integrarea cu OkHttp prin Interceptor.

// build.gradle (aplicație) — conectarea Stetho
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Inițializare în clasa Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Configurarea Network Interceptor

Pentru interceptarea cererilor de rețea prin OkHttp, adăugați StethoInterceptor în lanțul de interceptori. Stetho loghează automat URL-ul, antetele cererii și răspunsului, codul de status și timpul de execuție. Datele se afișează în tab-ul Network din Chrome DevTools după conectarea la dispozitiv prin chrome://inspect.

Network Inspector: interceptarea traficului HTTP

Network Inspector al Stetho afișează toate cererile HTTP ale aplicației în ordine cronologică. Pentru fiecare cerere sunt disponibile: metoda, URL-ul, codul de status, antetele cererii și răspunsului, corpul cererii și răspunsului (inclusiv JSON și date binare). Tab-ul Preview afișează corpul răspunsului într-o formă formatată.

Filtrarea și căutarea cererilor

Chrome DevTools suportă filtrarea cererilor după tip (XHR, JS, CSS, Doc), cod de status și domeniu. Câmpul de căutare filtrează după URL și conținut. Pentru dezvoltarea mobilă este util să grupați cererile după domeniul API și să verificați secvența de apeluri la testarea ecranelor aplicației.

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

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

Database Inspector: lucrul cu SQLite

Database Inspector al Stetho se conectează la bazele de date SQLite ale aplicației prin Chrome DevTools. În tab-ul Resources → Web SQL sunt afișate toate bazele de date deschise, tabelele lor și conținutul. Este disponibilă vizualizarea structurii tabelelor, a indecșilor și executarea de interogări SQL arbitrare.

Executarea interogărilor SQL prin DevTools

În consola Chrome DevTools puteți executa interogări SQL direct către baza aplicației: SELECT, INSERT, UPDATE, DELETE. Acest lucru este util pentru curățarea datelor înainte de testare, verificarea corectitudinii migrărilor și corectarea manuală a înregistrărilor incorecte fără recompilarea aplicației. Toate modificările sunt imediat vizibile pe dispozitiv.

Dumpapp și pluginurile personalizate

Dumpapp — este interfața shell a Stetho care permite executarea de comenzi personalizate prin adb. Pluginurile Dumpapp se înregistrează la inițializarea Stetho și pot exporta orice stare a aplicației: cache, setări, starea containerului DI. Comenzile se execută ca adb forward tcp:12345 localabstract:stetho_dumpapp.

Crearea unui plugin personalizat Dumpapp

Pluginul implementează interfața DumperContext și se înregistrează prin Stetho.initialize cu un InspectorModules personalizat. Exemplul de mai jos arată un plugin pentru dump-ul SharedPreferences: datele sunt serializate în JSON și afișate în terminal prin comanda adb.

// Plugin personalizat Dumpapp pentru 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: comparație

Android Studio oferă instrumente de profilare integrate: Network Profiler, Database Inspector și View Inspector, apărute în Android Studio 4.1+. Stetho a fost popular până la introducerea acestor instrumente și rămâne relevant pentru proiectele care folosesc OkHttp și necesită integrare cu Chrome DevTools.

Când să alegeți Stetho

Stetho este justificat în proiectele legacy unde OkHttp este deja folosit și echipa este obișnuită cu Chrome DevTools. Pentru proiectele noi, Android Studio Inspector acoperă majoritatea scenariilor de depanare. Totuși, Chrome DevTools este în continuare mai comod pentru interogările SQLite: consola integrată cu autocompletare SQL este mai rapidă decât click-urile succesive în IDE.

Inspecția View Hierarchy prin Stetho

View Hierarchy în Stetho este afișat în tab-ul Elements din Chrome DevTools ca un arbore asemănător cu DOM. Fiecare View este reprezentat ca un element HTML cu atribute: id, layout_width, layout_height, padding, margin, visibility și text. Modificările din arbore se sincronizează în timp real la rotirea ecranului sau la actualizarea UI.

Vizualizarea și modificarea proprietăților

Selectând un element în arbore, puteți vizualiza proprietățile sale în panoul Styles — similar inspecției paginilor web. Stetho afișează dimensiunile calculate, spațierile, culoarea de fundal și starea (pressed, focused, enabled). Modificarea unor proprietăți în DevTools se aplică imediat aplicației, ceea ce accelerează ajustarea parametrilor UI fără recompilare.

Căutarea scurgerilor de memorie prin View Inspector

Stetho ajută la detectarea scurgerilor de memorie legate de View: dacă Activity nu este distrusă după finish(), View-ul său rădăcină rămâne în arbore. Prin verificarea regulată a tab-ului Elements puteți observa Activity-uri fantomă și găsi sursa scurgerii — de obicei sunt referințe statice la Context sau dialoguri neînchise.

Tehnici practice de depanare

Stetho este eficient pentru verificarea serializării JSON înainte de trimiterea pe server. Deschideți Network Inspector, găsiți cererea și vizualizați corpul în modul Raw pentru a verifica structura datelor și corectitudinea câmpurilor.

Depanarea SQLiteOpenHelper

Stetho afișează toate bazele create prin SQLiteOpenHelper. Dacă baza nu apare în Chrome DevTools — verificați că getWritableDatabase() a fost apelat cel puțin o dată în codul aplicației.

Ordinea Interceptor în OkHttp

Stetho trebuie să fie ultimul interceptor din lanțul OkHttp pentru a vedea cererile modificate. Ordinea corectă: AuthInterceptor first, apoi LoggingInterceptor, iar StethoInterceptor la final.

Tehnici practice de depanare cu Stetho

Stetho este eficient pentru verificarea corectitudinii serializării JSON înainte de trimiterea pe server. Deschideți Network Inspector, găsiți cererea și vizualizați corpul cererii în modul Raw pentru a vă asigura de corectitudinea structurii câmpurilor și a tipurilor de date.

Depanarea SQLiteOpenHelper și ContentProvider

Stetho afișează toate bazele de date create prin SQLiteOpenHelper. Dacă baza nu apare în Chrome DevTools — verificați că metoda getWritableDatabase() a fost apelată cel puțin o dată în codul aplicației. Pentru migrări, executați ALTER TABLE prin consola SQL și verificați rezultatul cu o interogare SELECT.

Ordinea Interceptor în lanțul OkHttp

Stetho trebuie să fie ultimul interceptor din lanțul OkHttp pentru a afișa cererile finale modificate. Secvența corectă: AuthInterceptor primul, apoi LoggingInterceptor, iar StethoInterceptor la final pentru logarea corectă.