Stetho — що це таке, дебаггінг Android через Chrome DevTools

Що таке Stetho та як він працює

Stetho — це Java-бібліотека, яка запускає локальний WebSocket-сервер усередині Android-додатка. Chrome DevTools підключається до цього сервера через adb-порт, отримуючи доступ до внутрішніх компонентів додатка: баз даних, мережевих запитів, preferences та view-ієрархії. Вся комунікація йде через протокол Chrome DevTools Protocol, що дозволяє використовувати стандартні інструменти браузера без встановлення додаткового ПЗ.

Архітектура та компоненти

Бібліотека складається з модулів: stetho (ядро), stetho-okhttp (перехоплення трафіку через OkHttp), stetho-urlconnection (перехоплення через HttpURLConnection) та stetho-js-rhino (підтримка JavaScript-плагінів). Ядро відкриває UNIX-сокет, до якого Chrome підключається через adb forward. Кожен інспектор реалізований як окремий плагін, який реєструється під час ініціалізації Stetho.

Вимоги та обмеження

Stetho підтримує Android 4.4+ (API 19) і працює лише в debug-збірках. На пристроях з Android 11+ потрібен явний дозвіл INTERNET у маніфесті. Бібліотека офіційно не підтримується Facebook з 2020 року, але код залишається відкритим і використовується в легасі-проєктах. Для нових проєктів Google рекомендує Android Studio Profiler та Network Inspector.

Підключення та налаштування Stetho в Android-проєкті

Підключення виконується через Gradle-залежність із прапором debugImplementation, щоб Stetho працював лише в debug-збірці. Ініціалізація відбувається в методі Application.onCreate() одним викликом Stetho.initializeWithDefaults(this). Для Network Inspector потрібна інтеграція з OkHttp через Interceptor.

// build.gradle (app) — підключення Stetho
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// Ініціалізація в класі Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Налаштування Network Interceptor

Для перехоплення мережевих запитів через OkHttp додайте StethoInterceptor у ланцюжок перехоплювачів. Stetho автоматично логує URL, заголовки запиту та відповіді, статус-код і час виконання. Дані відображаються у вкладці Network у Chrome DevTools після підключення до пристрою через chrome://inspect.

Network Inspector: перехоплення HTTP трафіку

Network Inspector Stetho відображає всі HTTP-запити додатка в хронологічному порядку. Для кожного запиту доступні: метод, URL, статус-код, заголовки запиту та відповіді, тіло запиту та відповіді (включно з JSON та бінарними даними). Вкладка Preview показує тіло відповіді у відформатованому вигляді.

Фільтрація та пошук запитів

Chrome DevTools підтримує фільтрацію запитів за типом (XHR, JS, CSS, Doc), статус-кодом і доменом. Поле пошуку фільтрує за URL та вмістом. Для мобільної розробки корисно групувати запити за доменом API та перевіряти послідовність викликів під час тестування екранів додатка.

// OkHttp-клієнт з Stetho interceptor
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// Виконання запиту
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: робота з SQLite

Database Inspector Stetho підключається до SQLite-баз даних додатка через Chrome DevTools. У вкладці Resources → Web SQL відображаються всі відкриті бази даних, їхні таблиці та вміст. Доступний перегляд структури таблиць, індексів і виконання довільних SQL-запитів.

Виконання SQL-запитів через DevTools

У консолі Chrome DevTools можна виконувати SQL-запити безпосередньо до бази додатка: SELECT, INSERT, UPDATE, DELETE. Це корисно для очищення даних перед тестуванням, перевірки коректності міграцій та ручного виправлення некоректних записів без перезбірки додатка. Усі зміни одразу видно на пристрої.

Dumpapp та кастомні плагіни

Dumpapp — це shell-інтерфейс Stetho, який дозволяє виконувати кастомні команди через adb. Плагіни Dumpapp реєструються під час ініціалізації Stetho і можуть експортувати будь-який стан додатка: кеш, налаштування, стан DI-контейнера. Команди виконуються як adb forward tcp:12345 localabstract:stetho_dumpapp.

Створення кастомного Dumpapp-плагіна

Плагін реалізує інтерфейс DumperContext і реєструється через Stetho.initialize з кастомним InspectorModules. Приклад нижче показує плагін для дампу SharedPreferences: дані серіалізуються в JSON і виводяться в термінал через adb-команду.

// Кастомний Dumpapp-плагін для 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: порівняння

Android Studio надає вбудовані інструменти профілювання: Network Profiler, Database Inspector та View Inspector, що з'явилися в Android Studio 4.1+. Stetho був популярний до впровадження цих інструментів і залишається актуальним для проєктів, які використовують OkHttp і потребують інтеграції з Chrome DevTools.

Коли вибирати Stetho

Stetho виправданий у легасі-проєктах, де OkHttp уже використовується і команда звикла до Chrome DevTools. Для нових проєктів Android Studio Inspector покриває більшість сценаріїв дебаггінгу. Однак Chrome DevTools, як і раніше, зручніший для SQLite-запитів: вбудована консоль з автодоповненням SQL швидша, ніж послідовні кліки в IDE.

Інспекція View Hierarchy через Stetho

View Hierarchy у Stetho відображається у вкладці Elements Chrome DevTools як DOM-подібне дерево. Кожен View представлений як HTML-елемент з атрибутами: id, layout_width, layout_height, padding, margin, visibility та текст. Зміни в дереві синхронізуються у реальному часі при повороті екрана або оновленні UI.

Перегляд і зміна властивостей

Вибравши елемент у дереві, можна переглянути його властивості на панелі Styles — аналогічно інспекції веб-сторінок. Stetho відображає обчислені розміри, відступи, колір фону та стан (pressed, focused, enabled). Зміна деяких властивостей у DevTools одразу застосовується до додатка, що прискорює підбір параметрів UI без перезбірки.

Пошук витоків пам'яті через View Inspector

Stetho допомагає виявити витоки пам'яті, пов'язані з View: якщо Activity не знищується після finish(), її кореневий View залишається в дереві. Через регулярну перевірку вкладки Elements можна помітити фантомні Activity і знайти джерело витоку — зазвичай це статичні посилання на Context або незакриті діалоги.

Практичні прийоми дебаггінгу

Stetho ефективний для перевірки JSON-серіалізації перед відправленням на сервер. Відкрийте Network Inspector, знайдіть запит і перегляньте тіло в Raw-режимі для перевірки структури даних і коректності полів.

Відлагодження SQLiteOpenHelper

Stetho відображає всі бази, створені через SQLiteOpenHelper. Якщо база не з'являється в Chrome DevTools — перевірте, що getWritableDatabase() було викликано хоча б один раз у коді додатка.

Порядок Interceptor в OkHttp

Stetho має бути останнім interceptor у ланцюжку OkHttp, щоб бачити модифіковані запити. Правильний порядок: спочатку AuthInterceptor, потім LoggingInterceptor, потім StethoInterceptor останнім.

Практичні прийоми дебаггінгу зі Stetho

Stetho ефективний для перевірки коректності JSON-серіалізації перед відправленням на сервер. Відкрийте Network Inspector, знайдіть запит і перегляньте тіло запиту в Raw-режимі, щоб переконатися в правильності структури полів і типів даних.

Відлагодження SQLiteOpenHelper та ContentProvider

Stetho відображає всі бази даних, створені через SQLiteOpenHelper. Якщо база не з'являється в Chrome DevTools — перевірте, що метод getWritableDatabase() було викликано хоча б один раз у коді додатка. Для міграцій виконуйте ALTER TABLE через консоль SQL і перевіряйте результат запитом SELECT.

Порядок Interceptor у ланцюжку OkHttp

Stetho має бути останнім interceptor у ланцюжку OkHttp, щоб відображати фінальні модифіковані запити. Правильна послідовність: AuthInterceptor першим, потім LoggingInterceptor, потім StethoInterceptor останнім для коректного логування.