Stetho — ano ito, pagde-debug ng Android sa pamamagitan ng Chrome DevTools

Ano ang Stetho at paano ito gumagana

Stetho — ay isang Java library na nagpapatakbo ng lokal na WebSocket server sa loob ng Android app. Ang Chrome DevTools ay kumokonekta sa server na ito sa pamamagitan ng adb port, na nakakakuha ng access sa mga panloob na bahagi ng app: mga database, mga network request, preferences, at view hierarchy. Ang lahat ng komunikasyon ay dumadaan sa protocol na Chrome DevTools Protocol, na nagpapahintulot sa paggamit ng mga karaniwang tool ng browser nang walang pag-install ng karagdagang software.

Arkitektura at mga bahagi

Ang library ay binubuo ng mga module: stetho (core), stetho-okhttp (pagsasagap ng traffic sa pamamagitan ng OkHttp), stetho-urlconnection (pagsasagap sa pamamagitan ng HttpURLConnection), at stetho-js-rhino (suporta para sa JavaScript plugins). Ang core ay nagbubukas ng UNIX socket na kinokonekta ng Chrome sa pamamagitan ng adb forward. Ang bawat inspector ay ipinapatupad bilang isang hiwalay na plugin na nirerehistro sa inisyalisasyon ng Stetho.

Mga kinakailangan at limitasyon

Sinusuportahan ng Stetho ang Android 4.4+ (API 19) at gumagana lamang sa mga debug build. Sa mga device na may Android 11+ kinakailangan ang malinaw na INTERNET permission sa manifest. Hindi na opisyal na sinusuportahan ang library ng Facebook mula noong 2020, ngunit nananatiling bukas ang code at ginagamit sa mga legacy project. Para sa mga bagong project, inirerekomenda ng Google ang Android Studio Profiler at Network Inspector.

Pagkonekta at pag-configure ng Stetho sa Android project

Pagkonekta ay ginagawa sa pamamagitan ng Gradle dependency na may flag na debugImplementation, upang ang Stetho ay gumana lamang sa debug build. Ang inisyalisasyon ay nangyayari sa method na Application.onCreate() na may isang tawag na Stetho.initializeWithDefaults(this). Para sa Network Inspector kinakailangan ang integrasyon sa OkHttp sa pamamagitan ng Interceptor.

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

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

Pag-configure ng Network Interceptor

Para sa pagsasagap ng mga network request sa pamamagitan ng OkHttp, idagdag ang StethoInterceptor sa chain ng mga interceptor. Awtomatikong nilo-log ng Stetho ang URL, headers ng request at response, status code, at oras ng pagpapatupad. Ang data ay ipinapakita sa tab na Network sa Chrome DevTools pagkatapos kumonekta sa device sa pamamagitan ng chrome://inspect.

Network Inspector: pagsasagap ng HTTP traffic

Network Inspector ng Stetho ay nagpapakita ng lahat ng HTTP request ng app sa kronolohikal na pagkakasunod-sunod. Para sa bawat request ay available: method, URL, status code, headers ng request at response, body ng request at response (kasama ang JSON at binary data). Ang tab na Preview ay nagpapakita ng body ng response sa naka-format na anyo.

Pag-filter at paghahanap ng mga request

Sinusuportahan ng Chrome DevTools ang pag-filter ng mga request ayon sa uri (XHR, JS, CSS, Doc), status code, at domain. Ang search field ay nag-filter ayon sa URL at nilalaman. Para sa mobile development, kapaki-pakinabang na i-grupo ang mga request ayon sa API domain at suriin ang pagkakasunod-sunod ng mga tawag kapag nagte-test ng mga screen ng app.

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

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

Database Inspector: pagtatrabaho sa SQLite

Database Inspector ng Stetho ay kumokonekta sa SQLite database ng app sa pamamagitan ng Chrome DevTools. Sa tab na Resources → Web SQL ay ipinapakita ang lahat ng bukas na database, ang kanilang mga table, at nilalaman. Available ang pagtingin sa istruktura ng mga table, index, at pagpapatakbo ng mga arbitraryong SQL query.

Pagpapatakbo ng mga SQL query sa pamamagitan ng DevTools

Sa console ng Chrome DevTools ay maaaring magpatakbo ng SQL query nang direkta sa database ng app: SELECT, INSERT, UPDATE, DELETE. Ito ay kapaki-pakinabang para sa paglilinis ng data bago ang pagsubok, pag-check ng kawastuhan ng mga migrasyon, at manu-manong pag-aayos ng mga maling record nang hindi binubuo muli ang app. Ang lahat ng pagbabago ay agad na nakikita sa device.

Dumpapp at mga custom plugin

Dumpapp — ay ang shell interface ng Stetho na nagpapahintulot sa pagpapatakbo ng mga custom command sa pamamagitan ng adb. Ang mga Dumpapp plugin ay nirerehistro sa inisyalisasyon ng Stetho at maaaring mag-export ng anumang estado ng app: cache, mga setting, estado ng DI container. Ang mga command ay pinapatakbo bilang adb forward tcp:12345 localabstract:stetho_dumpapp.

Paggawa ng custom Dumpapp plugin

Ang plugin ay nagpapatupad ng interface na DumperContext at nirerehistro sa pamamagitan ng Stetho.initialize na may custom na InspectorModules. Ang halimbawa sa ibaba ay nagpapakita ng plugin para sa dump ng SharedPreferences: ang data ay sine-serialize sa JSON at ipinapakita sa terminal sa pamamagitan ng adb command.

// Custom Dumpapp plugin para sa 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: paghahambing

Android Studio ay nagbibigay ng mga built-in na profiling tool: Network Profiler, Database Inspector, at View Inspector, na lumitaw sa Android Studio 4.1+. Ang Stetho ay sikat bago ang pagpapakilala ng mga tool na ito at nananatiling may kaugnayan para sa mga project na gumagamit ng OkHttp at nangangailangan ng integrasyon sa Chrome DevTools.

Kailan pumili ng Stetho

Stetho ay makatuwiran sa mga legacy project kung saan ginagamit na ang OkHttp at sanay ang team sa Chrome DevTools. Para sa mga bagong project, ang Android Studio Inspector ay sumasaklaw sa karamihan ng mga debugging scenario. Gayunpaman, ang Chrome DevTools ay mas maginhawa pa rin para sa mga SQLite query: ang built-in na console na may auto-completion ng SQL ay mas mabilis kaysa sa sunud-sunod na pag-click sa IDE.

Pag-iinspect ng View Hierarchy sa pamamagitan ng Stetho

View Hierarchy sa Stetho ay ipinapakita sa tab na Elements ng Chrome DevTools bilang isang puno na katulad ng DOM. Ang bawat View ay kinakatawan bilang isang HTML element na may mga attribute: id, layout_width, layout_height, padding, margin, visibility, at text. Ang mga pagbabago sa puno ay sine-sync sa real time kapag umiikot ang screen o nag-a-update ang UI.

Pagtingin at pagbabago ng mga property

Sa pagpili ng isang element sa puno, maaari mong tingnan ang mga property nito sa panel na Styles — katulad ng pag-iinspect ng mga web page. Stetho ay nagpapakita ng mga kalkuladong sukat, mga puwang, kulay ng background, at estado (pressed, focused, enabled). Ang pagbabago ng ilang property sa DevTools ay agad na inilalapat sa app, na nagpapabilis sa pagpili ng mga UI parameter nang walang pag-rebuild.

Paghahanap ng mga memory leak sa pamamagitan ng View Inspector

Ang Stetho ay tumutulong sa pagtuklas ng memory leak na may kaugnayan sa View: kung ang Activity ay hindi nawasak pagkatapos ng finish(), ang root View nito ay nananatili sa puno. Sa pamamagitan ng regular na pagsusuri ng tab na Elements ay maaaring mapansin ang mga phantom Activity at mahanap ang pinagmulan ng leak — kadalasan ito ay mga static na reference sa Context o hindi saradong mga dialog.

Mga praktikal na debugging technique

Stetho ay epektibo para sa pag-check ng JSON serialization bago ipadala sa server. Buksan ang Network Inspector, hanapin ang request, at tingnan ang body sa Raw mode para ma-verify ang istruktura ng data at kawastuhan ng mga field.

Pag-debug ng SQLiteOpenHelper

Ipinapakita ng Stetho ang lahat ng database na ginawa sa pamamagitan ng SQLiteOpenHelper. Kung hindi lumalabas ang database sa Chrome DevTools — suriin na ang getWritableDatabase() ay tinawag kahit isang beses sa code ng app.

Pagkakasunod-sunod ng Interceptor sa OkHttp

Ang Stetho ay dapat na huling interceptor sa chain ng OkHttp upang makita ang mga nabagong request. Tamang pagkakasunod-sunod: AuthInterceptor first, pagkatapos LoggingInterceptor, pagkatapos ang huling StethoInterceptor.

Mga praktikal na debugging technique gamit ang Stetho

Stetho ay epektibo para sa pag-check ng kawastuhan ng JSON serialization bago ipadala sa server. Buksan ang Network Inspector, hanapin ang request, at tingnan ang body ng request sa Raw mode upang matiyak ang kawastuhan ng istruktura ng mga field at mga uri ng data.

Pag-debug ng SQLiteOpenHelper at ContentProvider

Ipinapakita ng Stetho ang lahat ng database na ginawa sa pamamagitan ng SQLiteOpenHelper. Kung hindi lumalabas ang database sa Chrome DevTools — suriin na ang method na getWritableDatabase() ay tinawag kahit isang beses sa code ng app. Para sa mga migrasyon, patakbuhin ang ALTER TABLE sa pamamagitan ng SQL console at suriin ang resulta gamit ang SELECT query.

Pagkakasunod-sunod ng Interceptor sa chain ng OkHttp

Ang Stetho ay dapat na huling interceptor sa chain ng OkHttp upang ipakita ang mga huling nabagong request. Tamang pagkakasunod-sunod: AuthInterceptor una, pagkatapos LoggingInterceptor, pagkatapos ang huling StethoInterceptor para sa tamang pag-log.