Stetho — qué es, depuración de Android a través de Chrome DevTools

Qué es Stetho y cómo funciona

Stetho es una biblioteca Java que ejecuta un servidor WebSocket local dentro de la aplicación Android. Chrome DevTools se conecta a este servidor a través de un puerto adb, obteniendo acceso a los componentes internos de la aplicación: bases de datos, peticiones de red, preferencias y la jerarquía de vistas. Toda la comunicación pasa por el Protocolo de Chrome DevTools, lo que permite usar las herramientas estándar del navegador sin instalar software adicional.

Arquitectura y componentes

La biblioteca consta de módulos: stetho (núcleo), stetho-okhttp (interceptación de tráfico a través de OkHttp), stetho-urlconnection (interceptación a través de HttpURLConnection) y stetho-js-rhino (soporte para plugins de JavaScript). El núcleo abre un socket UNIX al que Chrome se conecta mediante adb forward. Cada inspector se implementa como un plugin separado que se registra al inicializar Stetho.

Requisitos y limitaciones

Stetho admite Android 4.4+ (API 19) y solo funciona en builds de depuración. En dispositivos con Android 11+ se requiere un permiso INTERNET explícito en el manifiesto. La biblioteca no recibe soporte oficial de Facebook desde 2020, pero el código permanece abierto y se usa en proyectos legacy. Para proyectos nuevos Google recomienda Android Studio Profiler y Network Inspector.

Conexión y configuración de Stetho en un proyecto Android

Conexión mediante una dependencia de Gradle con la bandera debugImplementation para que Stetho funcione solo en el build de depuración. La inicialización ocurre en el método Application.onCreate() con una única llamada a Stetho.initializeWithDefaults(this). Para Network Inspector se requiere la integración con OkHttp a través de un Interceptor.

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

// Inicialización en la clase Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Configuración del Network Interceptor

Para interceptar peticiones de red a través de OkHttp, añada StethoInterceptor a la cadena de interceptores. Stetho registra automáticamente la URL, las cabeceras de la petición y la respuesta, el código de estado y el tiempo de ejecución. Los datos se muestran en la pestaña Network de Chrome DevTools después de conectar el dispositivo a través de chrome://inspect.

Network Inspector: interceptación del tráfico HTTP

Network Inspector de Stetho muestra todas las peticiones HTTP de la aplicación en orden cronológico. Para cada petición están disponibles: método, URL, código de estado, cabeceras de la petición y la respuesta, cuerpo de la petición y la respuesta (incluidos JSON y datos binarios). La pestaña Preview muestra el cuerpo de la respuesta en formato legible.

Filtrado y búsqueda de peticiones

Chrome DevTools admite el filtrado de peticiones por tipo (XHR, JS, CSS, Doc), código de estado y dominio. El campo de búsqueda filtra por URL y contenido. Para desarrollo móvil es útil agrupar las peticiones por dominio de API y comprobar la secuencia de llamadas al probar las pantallas de la aplicación.

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

// Ejecutar una petición
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: trabajo con SQLite

Database Inspector de Stetho se conecta a las bases de datos SQLite de la aplicación a través de Chrome DevTools. En la pestaña Resources → Web SQL se muestran todas las bases de datos abiertas, sus tablas y su contenido. Está disponible la visualización de la estructura de tablas, índices y la ejecución de consultas SQL arbitrarias.

Ejecución de consultas SQL a través de DevTools

En la consola de Chrome DevTools se pueden ejecutar consultas SQL directamente contra la base de la aplicación: SELECT, INSERT, UPDATE, DELETE. Esto es útil para limpiar datos antes de las pruebas, verificar la corrección de las migraciones y corregir manualmente registros incorrectos sin reconstruir la aplicación. Todos los cambios son visibles de inmediato en el dispositivo.

Dumpapp y plugins personalizados

Dumpapp es la interfaz shell de Stetho que permite ejecutar comandos personalizados a través de adb. Los plugins de Dumpapp se registran al inicializar Stetho y pueden exportar cualquier estado de la aplicación: caché, configuración, estado del contenedor DI. Los comandos se ejecutan como adb forward tcp:12345 localabstract:stetho_dumpapp.

Creación de un plugin Dumpapp personalizado

El plugin implementa la interfaz DumperContext y se registra a través de Stetho.initialize con un InspectorModules personalizado. El ejemplo siguiente muestra un plugin para el volcado de SharedPreferences: los datos se serializan a JSON y se muestran en la terminal mediante un comando adb.

// Plugin Dumpapp personalizado para 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: comparación

Android Studio ofrece herramientas de perfilado integradas: Network Profiler, Database Inspector y View Inspector, introducidas en Android Studio 4.1+. Stetho fue popular antes de la introducción de estas herramientas y sigue siendo relevante para proyectos que usan OkHttp y requieren integración con Chrome DevTools.

Cuándo elegir Stetho

Stetho está justificado en proyectos legacy donde OkHttp ya se usa y el equipo está acostumbrado a Chrome DevTools. Para proyectos nuevos Android Studio Inspector cubre la mayoría de los escenarios de depuración. Sin embargo, Chrome DevTools sigue siendo más cómodo para consultas SQLite: la consola integrada con autocompletado de SQL es más rápida que los clics secuenciales en el IDE.

Inspección de la jerarquía de vistas a través de Stetho

View Hierarchy en Stetho se muestra en la pestaña Elements de Chrome DevTools como un árbol tipo DOM. Cada View se representa como un elemento HTML con atributos: id, layout_width, layout_height, padding, margin, visibility y texto. Los cambios en el árbol se sincronizan en tiempo real al rotar la pantalla o actualizar la UI.

Ver y cambiar propiedades

Al seleccionar un elemento del árbol, puede ver sus propiedades en el panel Styles, de forma similar a la inspección de páginas web. Stetho muestra los tamaños calculados, los rellenos, el color de fondo y el estado (pressed, focused, enabled). Cambiar algunas propiedades en DevTools se aplica inmediatamente a la aplicación, lo que acelera la selección de parámetros de UI sin reconstruir.

Búsqueda de fugas de memoria con View Inspector

Stetho ayuda a detectar fugas de memoria relacionadas con View: si una Activity no se destruye después de finish(), su View raíz permanece en el árbol. Con una comprobación periódica de la pestaña Elements puede notar Activities fantasma y encontrar la fuente de la fuga, normalmente referencias estáticas a Context o diálogos sin cerrar.

Técnicas prácticas de depuración

Stetho es eficaz para verificar la serialización JSON antes de enviarla al servidor. Abra Network Inspector, encuentre la petición y vea el cuerpo en modo Raw para comprobar la estructura de datos y la corrección de los campos.

Depuración de SQLiteOpenHelper

Stetho muestra todas las bases creadas con SQLiteOpenHelper. Si la base no aparece en Chrome DevTools, compruebe que getWritableDatabase() se haya llamado al menos una vez en el código de la aplicación.

Orden de los interceptores en OkHttp

Stetho debe ser el último interceptor en la cadena de OkHttp para ver las peticiones modificadas. El orden correcto: AuthInterceptor primero, luego LoggingInterceptor y finalmente StethoInterceptor.

Técnicas prácticas de depuración con Stetho

Stetho es eficaz para verificar la corrección de la serialización JSON antes de enviarla al servidor. Abra Network Inspector, encuentre la petición y vea el cuerpo de la petición en modo Raw para asegurarse de que la estructura de los campos y los tipos de datos son correctos.

Depuración de SQLiteOpenHelper y ContentProvider

Stetho muestra todas las bases de datos creadas con SQLiteOpenHelper. Si la base no aparece en Chrome DevTools, compruebe que el método getWritableDatabase() se haya llamado al menos una vez en el código de la aplicación. Para las migraciones, ejecute ALTER TABLE a través de la consola SQL y verifique el resultado con una consulta SELECT.

Orden de los interceptores en la cadena de OkHttp

Stetho debe ser el último interceptor en la cadena de OkHttp para mostrar las peticiones modificadas finales. La secuencia correcta: AuthInterceptor primero, luego LoggingInterceptor y finalmente StethoInterceptor para un registro correcto.