Stetho — چیست، دیباگ کردن اندروید از طریق Chrome DevTools

Stetho چیست و چگونه کار می‌کند

Stetho — یک کتابخانه جاوا است که یک سرور WebSocket محلی را در داخل برنامه اندروید اجرا می‌کند. Chrome DevTools از طریق پورت adb به این سرور متصل می‌شود و به اجزای داخلی برنامه دسترسی پیدا می‌کند: پایگاه‌های داده، درخواست‌های شبکه، preferences و سلسله‌مراتب view. تمام ارتباطات از طریق پروتکل Chrome DevTools Protocol انجام می‌شود که امکان استفاده از ابزارهای استاندارد مرورگر را بدون نصب نرم‌افزار اضافی فراهم می‌کند.

معماری و اجزا

کتابخانه از ماژول‌هایی تشکیل شده است: stetho (هسته)، stetho-okhttp (رهگیری ترافیک از طریق OkHttp)، stetho-urlconnection (رهگیری از طریق HttpURLConnection) و stetho-js-rhino (پشتیبانی از افزونه‌های JavaScript). هسته یک سوکت UNIX باز می‌کند که Chrome از طریق adb forward به آن متصل می‌شود. هر بازرس به‌عنوان یک افزونه جداگانه پیاده‌سازی می‌شود که هنگام راه‌اندازی Stetho ثبت می‌گردد.

نیازمندی‌ها و محدودیت‌ها

Stetho از Android 4.4+ (API 19) پشتیبانی می‌کند و فقط در ساخت‌های debug کار می‌کند. در دستگاه‌های دارای Android 11+ مجوز صریح INTERNET در مانیفست الزامی است. کتابخانه از سال 2020 رسماً توسط Facebook پشتیبانی نمی‌شود، اما کد آن باز می‌ماند و در پروژه‌های legacy استفاده می‌شود. برای پروژه‌های جدید، Google توصیه می‌کند از Android Studio Profiler و Network Inspector استفاده کنید.

نصب و پیکربندی Stetho در پروژه اندروید

نصب از طریق وابستگی Gradle با پرچم debugImplementation انجام می‌شود تا Stetho فقط در ساخت debug کار کند. راه‌اندازی در متد Application.onCreate() با یک فراخوانی Stetho.initializeWithDefaults(this) انجام می‌شود. برای Network Inspector یکپارچه‌سازی با OkHttp از طریق Interceptor الزامی است.

// build.gradle (برنامه) — نصب Stetho
dependencies {
    debugImplementation 'com.facebook.stetho:stetho:1.6.0'
    debugImplementation 'com.facebook.stetho:stetho-okhttp3:1.6.0'
}

// راه‌اندازی در کلاس Application
public class App extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Stetho.initializeWithDefaults(this);
    }
}

پیکربندی Network Interceptor

برای رهگیری درخواست‌های شبکه از طریق OkHttp، StethoInterceptor را به زنجیره رهگیرها اضافه کنید. Stetho به‌صورت خودکار URL، هدرهای درخواست و پاسخ، کد وضعیت و زمان اجرا را ثبت می‌کند. داده‌ها پس از اتصال به دستگاه از طریق chrome://inspect در تب Network در Chrome DevTools نمایش داده می‌شوند.

Network Inspector: رهگیری ترافیک HTTP

Network Inspector Stetho همه درخواست‌های HTTP برنامه را به ترتیب زمانی نمایش می‌دهد. برای هر درخواست در دسترس هستند: متد، URL، کد وضعیت، هدرهای درخواست و پاسخ، بدنه درخواست و پاسخ (از جمله JSON و داده‌های باینری). تب Preview بدنه پاسخ را به‌صورت قالب‌بندی‌شده نمایش می‌دهد.

فیلتر کردن و جستجوی درخواست‌ها

Chrome DevTools از فیلتر کردن درخواست‌ها بر اساس نوع (XHR، JS، CSS، Doc)، کد وضعیت و دامنه پشتیبانی می‌کند. فیلد جستجو بر اساس URL و محتوا فیلتر می‌کند. برای توسعه موبایل مفید است که درخواست‌ها را بر اساس دامنه API گروه‌بندی کنید و ترتیب فراخوانی‌ها را هنگام تست صفحه‌های برنامه بررسی کنید.

// کلاینت OkHttp با interceptor Stetho
OkHttpClient client = new OkHttpClient.Builder()
    .addNetworkInterceptor(new StethoInterceptor())
    .build();

// اجرای درخواست
Request request = new Request.Builder()
    .url("https://api.example.com/users")
    .build();
client.newCall(request).enqueue(callback);

Database Inspector: کار با SQLite

Database Inspector Stetho از طریق Chrome DevTools به پایگاه‌های داده SQLite برنامه متصل می‌شود. در تب Resources ← Web SQL همه پایگاه‌های داده باز، جداول و محتوای آن‌ها نمایش داده می‌شود. مشاهده ساختار جداول، ایندکس‌ها و اجرای پرس‌وجوهای دلخواه SQL در دسترس است.

اجرای پرس‌وجوهای SQL از طریق DevTools

در کنسول Chrome DevTools می‌توان پرس‌وجوهای SQL را مستقیماً روی پایگاه داده برنامه اجرا کرد: SELECT، INSERT، UPDATE، DELETE. این برای پاک‌سازی داده‌ها قبل از تست، بررسی صحت مهاجرت‌ها و اصلاح دستی رکوردهای نادرست بدون بازسازی برنامه مفید است. همه تغییرات فوراً روی دستگاه قابل مشاهده هستند.

Dumpapp و افزونه‌های سفارشی

Dumpapp — رابط شل Stetho است که امکان اجرای دستورات سفارشی از طریق adb را فراهم می‌کند. افزونه‌های Dumpapp هنگام راه‌اندازی Stetho ثبت می‌شوند و می‌توانند هر وضعیت برنامه را صادر کنند: کش، تنظیمات، وضعیت کانتینر DI. دستورات به‌صورت adb forward tcp:12345 localabstract:stetho_dumpapp اجرا می‌شوند.

ایجاد افزونه سفارشی Dumpapp

این افزونه رابط DumperContext را پیاده‌سازی می‌کند و از طریق Stetho.initialize با InspectorModules سفارشی ثبت می‌شود. مثال زیر افزونه‌ای برای خروجی SharedPreferences نشان می‌دهد: داده‌ها به JSON سریالایز می‌شوند و از طریق دستور adb در ترمینال نمایش داده می‌شوند.

// افزونه سفارشی Dumpapp برای 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 در برابر Android Studio Inspector: مقایسه

Android Studio ابزارهای پروفایل داخلی فراهم می‌کند: Network Profiler، Database Inspector و View Inspector که از Android Studio 4.1+ اضافه شده‌اند. Stetho قبل از معرفی این ابزارها محبوب بود و برای پروژه‌هایی که از OkHttp استفاده می‌کنند و نیاز به یکپارچه‌سازی با Chrome DevTools دارند همچنان مرتبط است.

چه زمانی Stetho را انتخاب کنیم

Stetho در پروژه‌های legacy که OkHttp از قبل استفاده می‌شود و تیم به Chrome DevTools عادت دارد توجیه‌پذیر است. برای پروژه‌های جدید، Android Studio Inspector بیشتر سناریوهای دیباگ را پوشش می‌دهد. با این حال، Chrome DevTools همچنان برای پرس‌وجوهای SQLite راحت‌تر است: کنسول داخلی با تکمیل خودکار SQL سریع‌تر از کلیک‌های متوالی در IDE است.

بازرسی View Hierarchy از طریق Stetho

View Hierarchy در Stetho در تب Elements در Chrome DevTools به‌صورت درختی شبیه به DOM نمایش داده می‌شود. هر View به‌عنوان عنصر HTML با ویژگی‌ها نمایش داده می‌شود: id، layout_width، layout_height، padding، margin، visibility و متن. تغییرات درخت هنگام چرخش صفحه یا به‌روزرسانی UI به‌صورت زنده همگام‌سازی می‌شوند.

مشاهده و تغییر ویژگی‌ها

با انتخاب یک عنصر در درخت، می‌توان ویژگی‌های آن را در پنل Styles مشاهده کرد — مشابه بازرسی صفحات وب. Stetho اندازه‌های محاسبه‌شده، فاصله‌ها، رنگ پس‌زمینه و وضعیت (pressed، focused، enabled) را نمایش می‌دهد. تغییر برخی ویژگی‌ها در DevTools فوراً روی برنامه اعمال می‌شود که انتخاب پارامترهای UI را بدون بازسازی تسریع می‌کند.

جستجوی نشت حافظه از طریق View Inspector

Stetho به تشخیص نشت حافظه مربوط به View کمک می‌کند: اگر Activity پس از finish() از بین نرود، View ریشه آن در درخت باقی می‌ماند. با بررسی منظم تب Elements می‌توان Activityهای فانتوم را مشاهده کرد و منبع نشت را یافت — معمولاً این ارجاعات استاتیک به Context یا دیالوگ‌های بسته‌نشده هستند.

تکنیک‌های عملی دیباگ

Stetho برای بررسی سریالایز JSON قبل از ارسال به سرور مؤثر است. Network Inspector را باز کنید، درخواست را پیدا کنید و برای بررسی ساختار داده و صحت فیلدها، بدنه را در حالت Raw مشاهده کنید.

دیباگ کردن SQLiteOpenHelper

Stetho همه پایگاه‌های داده ایجادشده از طریق SQLiteOpenHelper را نمایش می‌دهد. اگر پایگاه داده در Chrome DevTools ظاهر نمی‌شود — بررسی کنید که getWritableDatabase() حداقل یک بار در کد برنامه فراخوانی شده باشد.

ترتیب Interceptor در OkHttp

Stetho باید آخرین interceptor در زنجیره OkHttp باشد تا درخواست‌های اصلاح‌شده را ببیند. ترتیب صحیح: AuthInterceptor first، سپس LoggingInterceptor، و در پایان StethoInterceptor.

تکنیک‌های عملی دیباگ با Stetho

Stetho برای بررسی صحت سریالایز JSON قبل از ارسال به سرور مؤثر است. Network Inspector را باز کنید، درخواست را پیدا کنید و برای اطمینان از صحت ساختار فیلدها و انواع داده، بدنه درخواست را در حالت Raw مشاهده کنید.

دیباگ کردن SQLiteOpenHelper و ContentProvider

Stetho همه پایگاه‌های داده ایجادشده از طریق SQLiteOpenHelper را نمایش می‌دهد. اگر پایگاه داده در Chrome DevTools ظاهر نمی‌شود — بررسی کنید که متد getWritableDatabase() حداقل یک بار در کد برنامه فراخوانی شده باشد. برای مهاجرت‌ها، ALTER TABLE را از طریق کنسول SQL اجرا کنید و نتیجه را با پرس‌وجوی SELECT بررسی کنید.

ترتیب Interceptor در زنجیره OkHttp

Stetho باید آخرین interceptor در زنجیره OkHttp باشد تا درخواست‌های نهایی اصلاح‌شده را نمایش دهد. ترتیب صحیح: AuthInterceptor اول، سپس LoggingInterceptor، و برای ثبت صحیح در پایان StethoInterceptor.