Stetho: Debugging en Android igual que en Web

Recientemente tuve la oportunidad de participar en una charla brindada por el equipo de trabajo de Android en Facebook acerca de cómo trabajan, procesos y tecnologías que usan en la construcción de una de las aplicaciones más usadas y descargadas a nivel mundial.

Pero este artículo no es sobre esto, sino sobre un tema que fue arrojado al público presente como un "tip" de trabajo y me sorprendió ver que realmente muy pocos conocían. Y es el uso de Stetho.

Stetho surge justamente como una de los tantos proyectos del equipo de desarrollo de Facebook con la intención de mejorar su forma de trabajo, concretamente, de debugging de aplicaciones Android. Así es como también hay otros proyectos que han surgido por parte de ellos como React, redex, Fresco, makeitopen, etc (https://code.facebook.com/projects/).

Cuando te encuentras trabajando en un proyecto Android ¿quién no se ha encontrado con el problema de realizar un buen proceso de debug de servicios rest y poder analizar los elementos que la app transfiere por HTTP ¿quién no se ha encontrado con el problema de poder acceder a los datos de SQLite?...y no tener que hacer cosas como acceder a los archivos, descargarse la base al escritorio y abrirla con un motor de SQLite local para poder ver lo que la app pudo guardar o no.

Para hacer una analogía práctica Stetho nos da el mismo el mismo beneficio que el "inspect" que usamos en Chrome cuando desarrollamos web..., de hecho, la solución se basa en el mismo concepto. Aquí en el screenshot se puede visualizar un ejemplo de esto que hablo. Todos los elementos de la app, bajo la misma consola de desarrollo que tiene Google Chrome.

Stetho Inspect

¿cómo se usa esto?

Primero debemos agregar Stetho al Gradle:

compile 'com.facebook.stetho:stetho:1.4.2'

Sugiero también agregar:

compile 'com.facebook.stetho:stetho-js-rhino:1.4.2'

Nota: Esta es una de las opciones que Stetho tiene y es la más general. Luego tiene otras inclusiones particulares relacionadas al debuggin de HTTP. Para más detalles de esto ver los ejemplos y código en el sitio.

Luego, inicializamos el comoponente con esta línea:

public class MyApplication extends Application {
  public void onCreate() {
    super.onCreate();
    Stetho.initializeWithDefaults(this);
  }
}

Y listo!

Para probar su funcionamiento, debemos correr nuestro proyecto sea en un equipo o en un emulador y abrir Chrome. Una vez ahí, debemos colocar:

chrome://inspect/#devices

Ahí aparecerá nuestra aplicación y un link que dice "inspect", al hacer clic se abrirá otra pantalla con el conocido inspect de Chrome pero con todo el contenido de nuestra aplicación.

Chrome Inspect

Entre las acciones más importantes y que en lo particular a mí me han sido de gran utilizar, puedo inspeccionar los recursos pudiendo acceder a los archivos de SharedPreferences y sobre todo a la base de datos de SQLite:

Stetho Inspect SharedPreferences, SQLite

No solo puedo ver la o las bases de datos que mi aplicación esté usando sino también las tablas y acceder a la edición del contenido mediante la escritura de consultas SQL. El otro punto que me ha sido de gran utilidad es el poder inspeccionar la interface de usuario igual que cuando hacemos debug de una página web. Stetho me muestra el árbol de componentes pudiendo acceder al detalle de cada uno:

Stetho Inspect UI

Hay mucho más para investigar, pero Facebook lo tienen muy bien explicado en sus respectivas URL de referencia, espero lo usen y les sea tan útil como a mi.

http://facebook.github.io/stetho/

https://github.com/facebook/stetho