Stetho — qu'est-ce que c'est, débogage d'Android via Chrome DevTools

Qu'est-ce que Stetho et comment ça fonctionne

Stetho est une bibliothèque Java qui exécute un serveur WebSocket local à l'intérieur de l'application Android. Chrome DevTools se connecte à ce serveur via un port adb, obtenant l'accès aux composants internes de l'application : bases de données, requêtes réseau, preferences et la hiérarchie des vues. Toute la communication passe par le protocole Chrome DevTools, ce qui permet d'utiliser les outils standard du navigateur sans installer de logiciel supplémentaire.

Architecture et composants

La bibliothèque se compose de modules : stetho (noyau), stetho-okhttp (interception du trafic via OkHttp), stetho-urlconnection (interception via HttpURLConnection) et stetho-js-rhino (support des plugins JavaScript). Le noyau ouvre un socket UNIX auquel Chrome se connecte via adb forward. Chaque inspecteur est implémenté comme un plugin séparé, enregistré lors de l'initialisation de Stetho.

Exigences et limites

Stetho prend en charge Android 4.4+ (API 19) et ne fonctionne que dans les builds de débogage. Sur les appareils sous Android 11+, une permission INTERNET explicite est requise dans le manifeste. La bibliothèque n'est officiellement plus prise en charge par Facebook depuis 2020, mais le code reste ouvert et est utilisé dans des projets hérités. Pour les nouveaux projets, Google recommande Android Studio Profiler et Network Inspector.

Connexion et configuration de Stetho dans un projet Android

La connexion s'effectue via une dépendance Gradle avec le drapeau debugImplementation pour que Stetho ne fonctionne que dans le build de débogage. L'initialisation se fait dans la méthode Application.onCreate() par un seul appel à Stetho.initializeWithDefaults(this). Pour Network Inspector, une intégration avec OkHttp via un Interceptor est requise.

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

// Initialisation dans la classe Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Configuration du Network Interceptor

Pour intercepter les requêtes réseau via OkHttp, ajoutez StethoInterceptor à la chaîne d'intercepteurs. Stetho journalise automatiquement l'URL, les en-têtes de requête et de réponse, le code de statut et le temps d'exécution. Les données sont affichées dans l'onglet Network de Chrome DevTools après connexion à l'appareil via chrome://inspect.

Network Inspector : interception du trafic HTTP

Le Network Inspector de Stetho affiche toutes les requêtes HTTP de l'application dans l'ordre chronologique. Pour chaque requête sont disponibles : la méthode, l'URL, le code de statut, les en-têtes de requête et de réponse, le corps de la requête et de la réponse (y compris JSON et les données binaires). L'onglet Preview affiche le corps de la réponse sous forme formatée.

Filtrage et recherche des requêtes

Chrome DevTools prend en charge le filtrage des requêtes par type (XHR, JS, CSS, Doc), code de statut et domaine. Le champ de recherche filtre par URL et contenu. Pour le développement mobile, il est utile de regrouper les requêtes par domaine d'API et de vérifier la séquence des appels lors des tests des écrans de l'application.

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

// Exécution d'une requête
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector : travail avec SQLite

Le Database Inspector de Stetho se connecte aux bases de données SQLite de l'application via Chrome DevTools. Dans l'onglet Resources → Web SQL, toutes les bases ouvertes, leurs tables et leur contenu sont affichés. La visualisation de la structure des tables, des index et l'exécution de requêtes SQL arbitraires sont disponibles.

Exécution de requêtes SQL via DevTools

Dans la console de Chrome DevTools, vous pouvez exécuter des requêtes SQL directement sur la base de l'application : SELECT, INSERT, UPDATE, DELETE. Cela est utile pour nettoyer les données avant les tests, vérifier la justesse des migrations et corriger manuellement des enregistrements incorrects sans reconstruire l'application. Toutes les modifications sont immédiatement visibles sur l'appareil.

Dumpapp et plugins personnalisés

Dumpapp est l'interface shell de Stetho qui permet d'exécuter des commandes personnalisées via adb. Les plugins Dumpapp sont enregistrés lors de l'initialisation de Stetho et peuvent exporter n'importe quel état de l'application : cache, paramètres, état du conteneur DI. Les commandes sont exécutées comme adb forward tcp:12345 localabstract:stetho_dumpapp.

Création d'un plugin Dumpapp personnalisé

Le plugin implémente l'interface DumperContext et est enregistré via Stetho.initialize avec un InspectorModules personnalisé. L'exemple ci-dessous montre un plugin pour vider SharedPreferences : les données sont sérialisées en JSON et affichées dans le terminal via une commande adb.

// Plugin Dumpapp personnalisé pour 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 : comparaison

Android Studio fournit des outils de profilage intégrés : Network Profiler, Database Inspector et View Inspector, introduits dans Android Studio 4.1+. Stetho était populaire avant l'introduction de ces outils et reste pertinent pour les projets qui utilisent OkHttp et nécessitent une intégration avec Chrome DevTools.

Quand choisir Stetho

Stetho est justifié dans les projets hérités où OkHttp est déjà utilisé et où l'équipe est habituée à Chrome DevTools. Pour les nouveaux projets, Android Studio Inspector couvre la plupart des scénarios de débogage. Cependant, Chrome DevTools reste plus pratique pour les requêtes SQLite : la console intégrée avec autocomplétion SQL est plus rapide que les clics séquentiels dans l'IDE.

Inspection de la hiérarchie des vues via Stetho

La View Hierarchy dans Stetho est affichée dans l'onglet Elements de Chrome DevTools comme un arbre de type DOM. Chaque View est représentée comme un élément HTML avec des attributs : id, layout_width, layout_height, padding, margin, visibility et texte. Les modifications dans l'arbre sont synchronisées en temps réel lors de la rotation de l'écran ou de la mise à jour de l'UI.

Afficher et modifier les propriétés

En sélectionnant un élément dans l'arbre, vous pouvez afficher ses propriétés dans le panneau Styles, de manière similaire à l'inspection de pages web. Stetho affiche les tailles calculées, les espacements, la couleur de fond et l'état (pressed, focused, enabled). La modification de certaines propriétés dans DevTools est immédiatement appliquée à l'application, ce qui accélère le choix des paramètres UI sans reconstruction.

Recherche de fuites mémoire via View Inspector

Stetho aide à détecter les fuites mémoire liées aux View : si une Activity n'est pas détruite après finish(), sa View racine reste dans l'arbre. En vérifiant régulièrement l'onglet Elements, vous pouvez remarquer des Activities fantômes et trouver la source de la fuite — généralement des références statiques à Context ou des dialogues non fermés.

Techniques pratiques de débogage

Stetho est efficace pour vérifier la sérialisation JSON avant de l'envoyer au serveur. Ouvrez Network Inspector, trouvez la requête et affichez le corps en mode Raw pour vérifier la structure des données et l'exactitude des champs.

Débogage de SQLiteOpenHelper

Stetho affiche toutes les bases créées via SQLiteOpenHelper. Si la base n'apparaît pas dans Chrome DevTools, vérifiez que getWritableDatabase() a été appelé au moins une fois dans le code de l'application.

Ordre des intercepteurs dans OkHttp

Stetho doit être le dernier interceptor dans la chaîne OkHttp pour voir les requêtes modifiées. L'ordre correct : AuthInterceptor d'abord, puis LoggingInterceptor, puis StethoInterceptor en dernier.

Techniques pratiques de débogage avec Stetho

Stetho est efficace pour vérifier l'exactitude de la sérialisation JSON avant de l'envoyer au serveur. Ouvrez Network Inspector, trouvez la requête et affichez le corps de la requête en mode Raw pour vous assurer de l'exactitude de la structure des champs et des types de données.

Débogage de SQLiteOpenHelper et ContentProvider

Stetho affiche toutes les bases de données créées via SQLiteOpenHelper. Si la base n'apparaît pas dans Chrome DevTools, vérifiez que la méthode getWritableDatabase() a été appelée au moins une fois dans le code de l'application. Pour les migrations, exécutez ALTER TABLE via la console SQL et vérifiez le résultat avec une requête SELECT.

Ordre des intercepteurs dans la chaîne OkHttp

Stetho doit être le dernier interceptor dans la chaîne OkHttp pour afficher les requêtes modifiées finales. La séquence correcte : AuthInterceptor d'abord, puis LoggingInterceptor, puis StethoInterceptor en dernier pour une journalisation correcte.