Stetho — apa itu, debugging Android melalui Chrome DevTools

Apa itu Stetho dan cara kerjanya

Stetho — adalah pustaka Java yang menjalankan server WebSocket lokal di dalam aplikasi Android. Chrome DevTools terhubung ke server ini melalui port adb, mendapatkan akses ke komponen internal aplikasi: database, permintaan jaringan, preferences, dan hierarki view. Seluruh komunikasi berjalan melalui protokol Chrome DevTools Protocol, yang memungkinkan penggunaan alat standar browser tanpa menginstal perangkat lunak tambahan.

Arsitektur dan komponen

Pustaka ini terdiri dari modul: stetho (inti), stetho-okhttp (menyadap lalu lintas melalui OkHttp), stetho-urlconnection (menyadap melalui HttpURLConnection), dan stetho-js-rhino (dukungan plugin JavaScript). Inti membuka socket UNIX yang dihubungi Chrome melalui adb forward. Setiap inspektor diimplementasikan sebagai plugin terpisah yang didaftarkan saat inisialisasi Stetho.

Persyaratan dan batasan

Stetho mendukung Android 4.4+ (API 19) dan hanya berfungsi pada build debug. Pada perangkat dengan Android 11+ diperlukan izin INTERNET yang eksplisit di manifest. Pustaka ini tidak lagi didukung secara resmi oleh Facebook sejak 2020, tetapi kodenya tetap terbuka dan digunakan di proyek legacy. Untuk proyek baru, Google merekomendasikan Android Studio Profiler dan Network Inspector.

Menghubungkan dan mengonfigurasi Stetho di proyek Android

Menghubungkan dilakukan melalui dependensi Gradle dengan flag debugImplementation, agar Stetho hanya bekerja pada build debug. Inisialisasi terjadi di metode Application.onCreate() dengan satu panggilan Stetho.initializeWithDefaults(this). Untuk Network Inspector diperlukan integrasi dengan OkHttp melalui Interceptor.

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

// Inisialisasi di kelas Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

Mengonfigurasi Network Interceptor

Untuk menyadap permintaan jaringan melalui OkHttp, tambahkan StethoInterceptor ke rantai interceptor. Stetho secara otomatis mencatat URL, header permintaan dan respons, kode status, dan waktu eksekusi. Data ditampilkan di tab Network pada Chrome DevTools setelah terhubung ke perangkat melalui chrome://inspect.

Network Inspector: menyadap lalu lintas HTTP

Network Inspector Stetho menampilkan semua permintaan HTTP aplikasi dalam urutan kronologis. Untuk setiap permintaan tersedia: metode, URL, kode status, header permintaan dan respons, body permintaan dan respons (termasuk JSON dan data biner). Tab Preview menampilkan body respons dalam bentuk terformat.

Memfilter dan mencari permintaan

Chrome DevTools mendukung pemfilteran permintaan berdasarkan jenis (XHR, JS, CSS, Doc), kode status, dan domain. Kolom pencarian memfilter berdasarkan URL dan konten. Untuk pengembangan seluler, berguna untuk mengelompokkan permintaan berdasarkan domain API dan memeriksa urutan panggilan saat menguji layar aplikasi.

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

// Menjalankan permintaan
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: bekerja dengan SQLite

Database Inspector Stetho terhubung ke database SQLite aplikasi melalui Chrome DevTools. Di tab Resources → Web SQL ditampilkan semua database yang terbuka, tabel, dan isinya. Tersedia tampilan struktur tabel, indeks, dan eksekusi query SQL bebas.

Menjalankan query SQL melalui DevTools

Di konsol Chrome DevTools dapat menjalankan query SQL langsung ke database aplikasi: SELECT, INSERT, UPDATE, DELETE. Ini berguna untuk membersihkan data sebelum pengujian, memeriksa kebenaran migrasi, dan memperbaiki catatan yang salah secara manual tanpa membangun ulang aplikasi. Semua perubahan langsung terlihat di perangkat.

Dumpapp dan plugin kustom

Dumpapp — adalah antarmuka shell Stetho yang memungkinkan menjalankan perintah kustom melalui adb. Plugin Dumpapp didaftarkan saat inisialisasi Stetho dan dapat mengekspor keadaan apa pun dari aplikasi: cache, pengaturan, keadaan container DI. Perintah dijalankan sebagai adb forward tcp:12345 localabstract:stetho_dumpapp.

Membuat plugin Dumpapp kustom

Plugin mengimplementasikan antarmuka DumperContext dan didaftarkan melalui Stetho.initialize dengan InspectorModules kustom. Contoh di bawah menunjukkan plugin untuk dump SharedPreferences: data diserialisasi ke JSON dan ditampilkan di terminal melalui perintah adb.

// Plugin Dumpapp kustom untuk 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: perbandingan

Android Studio menyediakan alat profiling bawaan: Network Profiler, Database Inspector, dan View Inspector yang muncul di Android Studio 4.1+. Stetho populer sebelum diperkenalkannya alat-alat ini dan tetap relevan untuk proyek yang menggunakan OkHttp dan memerlukan integrasi dengan Chrome DevTools.

Kapan memilih Stetho

Stetho tepat digunakan di proyek legacy yang sudah memakai OkHttp dan tim terbiasa dengan Chrome DevTools. Untuk proyek baru, Android Studio Inspector mencakup sebagian besar skenario debugging. Namun, Chrome DevTools tetap lebih nyaman untuk query SQLite: konsol bawaan dengan pelengkapan otomatis SQL lebih cepat daripada klik berurutan di IDE.

Menginspeksi View Hierarchy melalui Stetho

View Hierarchy di Stetho ditampilkan di tab Elements Chrome DevTools sebagai pohon mirip DOM. Setiap View direpresentasikan sebagai elemen HTML dengan atribut: id, layout_width, layout_height, padding, margin, visibility, dan teks. Perubahan di pohon disinkronkan secara real-time saat layar diputar atau UI diperbarui.

Melihat dan mengubah properti

Dengan memilih elemen di pohon, Anda dapat melihat propertinya di panel Styles — mirip dengan inspeksi halaman web. Stetho menampilkan ukuran terhitung, spasi, warna latar, dan keadaan (pressed, focused, enabled). Mengubah beberapa properti di DevTools langsung diterapkan ke aplikasi, mempercepat penyesuaian parameter UI tanpa membangun ulang.

Mencari kebocoran memori melalui View Inspector

Stetho membantu menemukan kebocoran memori terkait View: jika Activity tidak dihancurkan setelah finish(), View akarnya tetap di pohon. Dengan memeriksa tab Elements secara rutin, Anda dapat melihat Activity hantu dan menemukan sumber kebocoran — biasanya referensi statis ke Context atau dialog yang tidak ditutup.

Teknik debugging praktis

Stetho efektif untuk memeriksa serialisasi JSON sebelum dikirim ke server. Buka Network Inspector, temukan permintaan, dan lihat body dalam mode Raw untuk memeriksa struktur data dan kebenaran kolom.

Men-debug SQLiteOpenHelper

Stetho menampilkan semua database yang dibuat melalui SQLiteOpenHelper. Jika database tidak muncul di Chrome DevTools — periksa bahwa getWritableDatabase() telah dipanggil setidaknya sekali di kode aplikasi.

Urutan Interceptor di OkHttp

Stetho harus menjadi interceptor terakhir di rantai OkHttp agar dapat melihat permintaan yang dimodifikasi. Urutan yang benar: AuthInterceptor first, lalu LoggingInterceptor, kemudian StethoInterceptor terakhir.

Teknik debugging praktis dengan Stetho

Stetho efektif untuk memeriksa kebenaran serialisasi JSON sebelum dikirim ke server. Buka Network Inspector, temukan permintaan, dan lihat body permintaan dalam mode Raw untuk memastikan kebenaran struktur kolom dan tipe data.

Men-debug SQLiteOpenHelper dan ContentProvider

Stetho menampilkan semua database yang dibuat melalui SQLiteOpenHelper. Jika database tidak muncul di Chrome DevTools — periksa bahwa metode getWritableDatabase() telah dipanggil setidaknya sekali di kode aplikasi. Untuk migrasi, jalankan ALTER TABLE melalui konsol SQL dan periksa hasilnya dengan query SELECT.

Urutan Interceptor di rantai OkHttp

Stetho harus menjadi interceptor terakhir di rantai OkHttp untuk menampilkan permintaan akhir yang dimodifikasi. Urutan yang benar: AuthInterceptor pertama, lalu LoggingInterceptor, kemudian StethoInterceptor terakhir untuk pencatatan yang benar.