Stetho — co to jest, debugowanie Androida przez Chrome DevTools

Co to jest Stetho i jak działa

Stetho — to biblioteka Java, która uruchamia lokalny serwer WebSocket wewnątrz aplikacji Android. Chrome DevTools łączy się z tym serwerem przez port adb, uzyskując dostęp do wewnętrznych komponentów aplikacji: baz danych, zapytań sieciowych, preferences i hierarchii widoków. Cała komunikacja przebiega przez protokół Chrome DevTools Protocol, co pozwala korzystać ze standardowych narzędzi przeglądarki bez instalowania dodatkowego oprogramowania.

Architektura i komponenty

Biblioteka składa się z modułów: stetho (rdzeń), stetho-okhttp (przechwytywanie ruchu przez OkHttp), stetho-urlconnection (przechwytywanie przez HttpURLConnection) oraz stetho-js-rhino (obsługa wtyczek JavaScript). Rdzeń otwiera gniazdo UNIX, do którego Chrome łączy się przez adb forward. Każdy inspektor jest zaimplementowany jako osobna wtyczka rejestrowana podczas inicjalizacji Stetho.

Wymagania i ograniczenia

Stetho obsługuje Android 4.4+ (API 19) i działa tylko w wersjach debug. Na urządzeniach z Android 11+ wymagane jest jawne uprawnienie INTERNET w manifeście. Biblioteka nie jest oficjalnie wspierana przez Facebook od 2020 roku, ale kod pozostaje otwarty i jest używany w projektach legacy. Do nowych projektów Google zaleca Android Studio Profiler i Network Inspector.

Podłączenie i konfiguracja Stetho w projekcie Android

Podłączenie wykonuje się przez zależność Gradle z flagą debugImplementation, aby Stetho działał tylko w wersji debug. Inicjalizacja odbywa się w metodzie Application.onCreate() jednym wywołaniem Stetho.initializeWithDefaults(this). Do Network Inspector wymagana jest integracja z OkHttp przez Interceptor.

// build.gradle (aplikacja) — podłączenie Stetho
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Inicjalizacja w klasie Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Konfiguracja Network Interceptor

Do przechwytywania zapytań sieciowych przez OkHttp dodaj StethoInterceptor do łańcucha przechwytywaczy. Stetho automatycznie loguje URL, nagłówki zapytania i odpowiedzi, kod statusu oraz czas wykonania. Dane wyświetlają się w zakładce Network w Chrome DevTools po podłączeniu urządzenia przez chrome://inspect.

Network Inspector: przechwytywanie ruchu HTTP

Network Inspector Stetho wyświetla wszystkie zapytania HTTP aplikacji w kolejności chronologicznej. Dla każdego zapytania dostępne są: metoda, URL, kod statusu, nagłówki zapytania i odpowiedzi, treść zapytania i odpowiedzi (w tym JSON i dane binarne). Zakładka Preview pokazuje treść odpowiedzi w sformatowanej postaci.

Filtrowanie i wyszukiwanie zapytań

Chrome DevTools obsługuje filtrowanie zapytań według typu (XHR, JS, CSS, Doc), kodu statusu i domeny. Pole wyszukiwania filtruje po URL i zawartości. Przy tworzeniu aplikacji mobilnych warto grupować zapytania według domeny API i sprawdzać kolejność wywołań podczas testowania ekranów aplikacji.

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

// Wykonanie żądania
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: praca z SQLite

Database Inspector Stetho łączy się z bazami danych SQLite aplikacji przez Chrome DevTools. W zakładce Resources → Web SQL wyświetlane są wszystkie otwarte bazy danych, ich tabele i zawartość. Dostępny jest podgląd struktury tabel, indeksów oraz wykonywanie dowolnych zapytań SQL.

Wykonywanie zapytań SQL przez DevTools

W konsoli Chrome DevTools można wykonywać zapytania SQL bezpośrednio do bazy aplikacji: SELECT, INSERT, UPDATE, DELETE. Jest to przydatne do czyszczenia danych przed testowaniem, weryfikacji poprawności migracji oraz ręcznego poprawiania nieprawidłowych rekordów bez przebudowy aplikacji. Wszystkie zmiany są natychmiast widoczne na urządzeniu.

Dumpapp i niestandardowe wtyczki

Dumpapp — to interfejs powłoki Stetho, który pozwala wykonywać niestandardowe polecenia przez adb. Wtyczki Dumpapp są rejestrowane podczas inicjalizacji Stetho i mogą eksportować dowolny stan aplikacji: pamięć podręczną, ustawienia, stan kontenera DI. Polecenia wykonuje się jako adb forward tcp:12345 localabstract:stetho_dumpapp.

Tworzenie niestandardowej wtyczki Dumpapp

Wtyczka implementuje interfejs DumperContext i jest rejestrowana przez Stetho.initialize z niestandardowym InspectorModules. Poniższy przykład pokazuje wtyczkę do zrzutu SharedPreferences: dane są serializowane do JSON i wyprowadzane do terminala przez polecenie adb.

// Niestandardowa wtyczka Dumpapp dla 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: porównanie

Android Studio udostępnia wbudowane narzędzia profilowania: Network Profiler, Database Inspector i View Inspector, które pojawiły się w Android Studio 4.1+. Stetho był popularny przed wprowadzeniem tych narzędzi i pozostaje aktualny dla projektów używających OkHttp i wymagających integracji z Chrome DevTools.

Kiedy wybierać Stetho

Stetho jest uzasadniony w projektach legacy, w których OkHttp już jest używany, a zespół przyzwyczaił się do Chrome DevTools. Do nowych projektów Android Studio Inspector pokrywa większość scenariuszy debugowania. Jednak Chrome DevTools wciąż jest wygodniejszy do zapytań SQLite: wbudowana konsola z autouzupełnianiem SQL działa szybciej niż kolejne kliknięcia w IDE.

Inspekcja View Hierarchy przez Stetho

View Hierarchy w Stetho jest wyświetlane w zakładce Elements Chrome DevTools jako drzewo podobne do DOM. Każdy View jest przedstawiony jako element HTML z atrybutami: id, layout_width, layout_height, padding, margin, visibility i tekst. Zmiany w drzewie są synchronizowane w czasie rzeczywistym przy obrocie ekranu lub aktualizacji UI.

Przeglądanie i zmiana właściwości

Po wybraniu elementu w drzewie można przeglądać jego właściwości na panelu Styles — podobnie jak przy inspekcji stron internetowych. Stetho wyświetla obliczone rozmiary, odstępy, kolor tła i stan (pressed, focused, enabled). Zmiana niektórych właściwości w DevTools natychmiast stosuje się do aplikacji, co przyspiesza dobieranie parametrów UI bez przebudowy.

Wykrywanie wycieków pamięci przez View Inspector

Stetho pomaga wykryć wycieki pamięci związane z View: jeśli Activity nie jest niszczone po finish(), jej główny View pozostaje w drzewie. Poprzez regularne sprawdzanie zakładki Elements można zauważyć fantomowe Activity i znaleźć źródło wycieku — zwykle są to statyczne referencje do Context lub niezamknięte dialogi.

Praktyczne techniki debugowania

Stetho jest skuteczny do sprawdzania serializacji JSON przed wysłaniem na serwer. Otwórz Network Inspector, znajdź zapytanie i przejrzyj treść w trybie Raw, aby sprawdzić strukturę danych i poprawność pól.

Debugowanie SQLiteOpenHelper

Stetho wyświetla wszystkie bazy utworzone przez SQLiteOpenHelper. Jeśli baza nie pojawia się w Chrome DevTools — sprawdź, czy getWritableDatabase() został wywołany przynajmniej raz w kodzie aplikacji.

Kolejność Interceptor w OkHttp

Stetho powinien być ostatnim interceptor w łańcuchu OkHttp, aby widzieć zmodyfikowane zapytania. Właściwa kolejność: AuthInterceptor first, następnie LoggingInterceptor, a na końcu StethoInterceptor.

Praktyczne techniki debugowania ze Stetho

Stetho jest skuteczny do sprawdzania poprawności serializacji JSON przed wysłaniem na serwer. Otwórz Network Inspector, znajdź zapytanie i przejrzyj treść zapytania w trybie Raw, aby upewnić się co do poprawności struktury pól i typów danych.

Debugowanie SQLiteOpenHelper i ContentProvider

Stetho wyświetla wszystkie bazy danych utworzone przez SQLiteOpenHelper. Jeśli baza nie pojawia się w Chrome DevTools — sprawdź, czy metoda getWritableDatabase() została wywołana przynajmniej raz w kodzie aplikacji. Do migracji wykonuj ALTER TABLE przez konsolę SQL i weryfikuj wynik zapytaniem SELECT.

Kolejność Interceptor w łańcuchu OkHttp

Stetho powinien być ostatnim interceptor w łańcuchu OkHttp, aby wyświetlać końcowe zmodyfikowane zapytania. Właściwa sekwencja: AuthInterceptor pierwszy, następnie LoggingInterceptor, a na końcu StethoInterceptor dla poprawnego logowania.