Stetho — ما هو، تصحيح أخطاء أندرويد عبر Chrome DevTools

ما هو Stetho وكيف يعمل

Stetho مكتبة Java تشغل خادم WebSocket محليًا داخل تطبيق أندرويد. يتصل Chrome DevTools بهذا الخادم عبر منفذ adb، ويحصل على الوصول إلى المكونات الداخلية للتطبيق: قواعد البيانات وطلبات الشبكة والتفضيلات وبنية العرض (view hierarchy). كل الاتصال يتم عبر بروتوكول Chrome DevTools، ما يسمح باستخدام أدوات المتصفح القياسية دون تثبيت برامج إضافية.

البنية والمكونات

تتكون المكتبة من وحدات: stetho (النواة)، وstetho-okhttp (اعتراض الحركة عبر OkHttp)، وstetho-urlconnection (الاعتراض عبر HttpURLConnection) وstetho-js-rhino (دعم إضافات JavaScript). تفتح النواة مقبس UNIX يتصل به Chrome عبر adb forward. يتم تنفيذ كل فاحص (inspector) كإضافة منفصلة تُسجل عند تهيئة Stetho.

المتطلبات والقيود

يدعم Stetho Android 4.4+ (API 19) ويعمل فقط في إصدارات التصحيح (debug). على الأجهزة التي تعمل بنظام Android 11+ يلزم إذن INTERNET صريح في البيان (manifest). لم تعد المكتبة مدعومة رسميًا من فيسبوك منذ عام 2020، لكن الكود يبقى مفتوحًا ويُستخدم في المشاريع القديمة (legacy). للمشاريع الجديدة توصي جوجل بـ Android Studio Profiler وNetwork Inspector.

ربط وتكوين Stetho في مشروع أندرويد

يتم الربط عبر تبعية Gradle مع علامة debugImplementation حتى يعمل Stetho في إصدار التصحيح فقط. تتم التهيئة في طريقة Application.onCreate() باستدعاء واحد Stetho.initializeWithDefaults(this). بالنسبة لـ Network Inspector يلزم التكامل مع OkHttp عبر Interceptor.

// build.gradle (app) — إضافة 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 وترويسات الطلب والاستجابة ورمز الحالة ووقت التنفيذ. تُعرض البيانات في تبويب Network في Chrome DevTools بعد الاتصال بالجهاز عبر chrome://inspect.

Network Inspector: اعتراض حركة مرور HTTP

يعرض Network Inspector في Stetho جميع طلبات HTTP للتطبيق بترتيب زمني. لكل طلب تتوفر: الطريقة، وعنوان URL، ورمز الحالة، وترويسات الطلب والاستجابة، وجسم الطلب والاستجابة (بما في ذلك بيانات JSON والبيانات الثنائية). يعرض تبويب Preview جسم الاستجابة بصيغة منسقة.

تصفية وبحث الطلبات

يدعم Chrome DevTools تصفية الطلبات حسب النوع (XHR, JS, CSS, Doc) ورمز الحالة والمجال. يحذف حقل البحث حسب عنوان URL والمحتوى. للتطوير عبر الجوال من المفيد تجميع الطلبات حسب مجال API والتحقق من تسلسل الاستدعاءات عند اختبار شاشات التطبيق.

// عميل OkHttp مع معترض 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 بقواعد بيانات SQLite الخاصة بالتطبيق عبر Chrome DevTools. في تبويب Resources ← Web SQL تُعرض جميع قواعد البيانات المفتوحة وجداولها ومحتوياتها. يتوفر عرض بنية الجداول والفهارس وتنفيذ استعلامات SQL عشوائية.

تنفيذ استعلامات SQL عبر DevTools

في وحدة تحكم Chrome DevTools يمكن تنفيذ استعلامات SQL مباشرة على قاعدة التطبيق: SELECT وINSERT وUPDATE وDELETE. هذا مفيد لتنظيف البيانات قبل الاختبار والتحقق من صحة عمليات الترحيل وتصحيح السجلات غير الصحيحة يدويًا دون إعادة بناء التطبيق. جميع التغييرات تظهر فورًا على الجهاز.

Dumpapp والإضافات المخصصة

Dumpapp هو واجهة shell الخاصة بـ 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 مبرر في المشاريع القديمة حيث يُستخدم 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 والنص. تتم مزامنة التغييرات في الشجرة في الوقت الفعلي عند تدوير الشاشة أو تحديث الواجهة.

عرض الخصائص وتغييرها

باختيار عنصر في الشجرة، يمكن عرض خصائصه في لوحة Styles، على غرار فحص صفحات الويب. يعرض Stetho الأبعاد المحسوبة والهوامش الداخلية ولون الخلفية والحالة (pressed, focused, enabled). يُطبَّق تغيير بعض الخصائص في DevTools فورًا على التطبيق، ما يسرع اختيار معلمات الواجهة دون إعادة البناء.

البحث عن تسربات الذاكرة عبر View Inspector

يساعد Stetho في اكتشاف تسربات الذاكرة المرتبطة بـ View: إذا لم تُدمر Activity بعد finish()، يبقى View الجذري الخاص بها في الشجرة. عبر الفحص المنتظم لتبويب Elements يمكن ملاحظة Activities وهمية وإيجاد مصدر التسرب، وعادةً ما تكون مراجع ثابتة إلى Context أو حوارات غير مغلقة.

أساليب تصحيح عملية

Stetho فعّال للتحقق من تسلسل JSON قبل إرساله إلى الخادم. افتح Network Inspector وابحث عن الطلب واعرض الجسم في وضع Raw للتحقق من بنية البيانات وصحة الحقول.

تصحيح SQLiteOpenHelper

يعرض Stetho جميع قواعد البيانات التي أُنشئت عبر SQLiteOpenHelper. إذا لم تظهر القاعدة في Chrome DevTools، تحقق من استدعاء getWritableDatabase() مرة واحدة على الأقل في كود التطبيق.

ترتيب المعترضات في OkHttp

يجب أن يكون Stetho آخر معترض في سلسلة OkHttp لرؤية الطلبات المعدلة. الترتيب الصحيح: AuthInterceptor أولًا، ثم LoggingInterceptor، ثم StethoInterceptor أخيرًا.

أساليب تصحيح عملية مع Stetho

Stetho فعّال للتحقق من صحة تسلسل JSON قبل إرساله إلى الخادم. افتح Network Inspector وابحث عن الطلب واعرض جسم الطلب في وضع Raw للتأكد من صحة بنية الحقول وأنواع البيانات.

تصحيح SQLiteOpenHelper وContentProvider

يعرض Stetho جميع قواعد البيانات التي أُنشئت عبر SQLiteOpenHelper. إذا لم تظهر القاعدة في Chrome DevTools، تحقق من استدعاء طريقة getWritableDatabase() مرة واحدة على الأقل في كود التطبيق. لعمليات الترحيل نفذ ALTER TABLE عبر وحدة تحكم SQL وتحقق من النتيجة باستعلام SELECT.

ترتيب المعترضات في سلسلة OkHttp

يجب أن يكون Stetho آخر معترض في سلسلة OkHttp لعرض الطلبات المعدلة النهائية. التسلسل الصحيح: AuthInterceptor أولًا، ثم LoggingInterceptor، ثم StethoInterceptor أخيرًا لتسجيل صحيح.