Stetho — یہ کیا ہے، Chrome DevTools کے ذریعے Android کی ڈیبگنگ

Stetho کیا ہے اور یہ کیسے کام کرتا ہے

Stetho ایک Java لائبریری ہے جو Android ایپلیکیشن کے اندر ایک لوکل 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 تجویز کرتا ہے۔

Android پروجیکٹ میں Stetho کو منسلک اور ترتیب دینا

منسلک ہونا debugImplementation فلیگ کے ساتھ Gradle انحصار کے ذریعے کیا جاتا ہے، تاکہ Stetho صرف debug-بلڈ میں کام کرے۔ ابتدائی کاری Application.onCreate() طریقے میں ایک ہی Stetho.initializeWithDefaults(this) کال کے ساتھ ہوتی ہے۔ Network Inspector کے لیے Interceptor کے ذریعے OkHttp کے ساتھ انضمام درکار ہے۔

// 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، درخواست اور جواب کے ہیڈرز، اسٹیٹس-کوڈ اور عمل کا وقت لاگ کرتا ہے۔ chrome://inspect کے ذریعے ڈیوائس سے منسلک ہونے کے بعد ڈیٹا Chrome DevTools کے Network ٹیب میں ظاہر ہوتا ہے۔

Network Inspector: HTTP ٹریفک روکنا

Stetho کا Network Inspector ایپ کی تمام HTTP درخواستیں تاریخی ترتیب میں دکھاتا ہے۔ ہر درخواست کے لیے دستیاب ہیں: طریقہ، URL، اسٹیٹس-کوڈ، درخواست اور جواب کے ہیڈرز، درخواست اور جواب کی باڈی (JSON اور بائنری ڈیٹا سمیت)۔ Preview ٹیب جواب کی باڈی کو فارمیٹ شدہ شکل میں دکھاتا ہے۔

درخواستوں کو فلٹر اور تلاش کرنا

Chrome DevTools قسم (XHR، JS، CSS، Doc)، اسٹیٹس-کوڈ اور ڈومین کے لحاظ سے درخواستوں کی فلٹرنگ کو سپورٹ کرتا ہے۔ تلاش کا خانہ URL اور مواد کے لحاظ سے فلٹر کرتا ہے۔ موبائل ڈیولپمنٹ کے لیے درخواستوں کو API ڈومین کے لحاظ سے گروپ کرنا اور ایپ کی اسکرینوں کی جانچ کے وقت کالز کی ترتیب کی تصدیق کرنا مفید ہے۔

// Stetho interceptor کے ساتھ OkHttp کلائنٹ
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 کے ساتھ کام

Stetho کا Database Inspector Chrome DevTools کے ذریعے ایپ کے SQLite ڈیٹا بیسز سے منسلک ہوتا ہے۔ Resources → Web SQL ٹیب میں تمام کھلے ڈیٹا بیسز، ان کی ٹیبلز اور مواد ظاہر ہوتا ہے۔ ٹیبل کی ساخت، انڈیکس دیکھنا اور صوابدیدی SQL کویئریاں چلانا دستیاب ہے۔

DevTools کے ذریعے SQL کویئریاں چلانا

Chrome DevTools کنسول میں آپ ایپ کے ڈیٹا بیس پر براہِ راست SQL کویئریاں چلا سکتے ہیں: SELECT، INSERT، UPDATE، DELETE۔ یہ جانچ سے پہلے ڈیٹا صاف کرنے، مائیگریشنز کی درستی کی تصدیق اور ایپ کو دوبارہ بنائے بغیر غلط ریکارڈز کو دستی طور پر درست کرنے کے لیے مفید ہے۔ تمام تبدیلیاں ڈیوائس پر فوری نظر آتی ہیں۔

Dumpapp اور حسبِ ضرورت پلگ انز

Dumpapp Stetho کا شیل انٹرفیس ہے جو adb کے ذریعے حسبِ ضرورت کمانڈز چلانے کی اجازت دیتا ہے۔ Dumpapp پلگ انز Stetho کی ابتدائی کاری پر رجسٹر ہوتے ہیں اور ایپ کی کوئی بھی حالت برآمد کر سکتے ہیں: کیش، سیٹنگز، DI-کنٹینر کی حالت۔ کمانڈز adb forward tcp:12345 localabstract:stetho_dumpapp کے طور پر چلائی جاتی ہیں۔

حسبِ ضرورت Dumpapp پلگ ان بنانا

پلگ ان DumperContext انٹرفیس نافذ کرتا ہے اور حسبِ ضرورت InspectorModules کے ساتھ Stetho.initialize کے ذریعے رجسٹر ہوتا ہے۔ نیچے دی گئی مثال SharedPreferences کے ڈمپ کے لیے پلگ ان دکھاتی ہے: ڈیٹا JSON میں سیریلائز ہو کر adb-کمانڈ کے ذریعے ٹرمینل میں آؤٹ پٹ ہوتا ہے۔

// SharedPreferences کے لیے حسبِ ضرورت Dumpapp پلگ ان
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 زیادہ تر ڈیبگنگ منظرناموں کا احاطہ کرتا ہے۔ تاہم، SQLite کویئریوں کے لیے Chrome DevTools اب بھی زیادہ آسان ہے: SQL آٹوکمپلیشن والا بلٹ ان کنسول IDE میں ترتیب وار کلکس سے تیز ہے۔

Stetho کے ذریعے View Hierarchy کا معائنہ

Stetho میں View Hierarchy Chrome DevTools کے Elements ٹیب میں 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() کو کم از کم ایک بار کال کیا گیا ہو۔

OkHttp میں Interceptor کی ترتیب

تبدیل شدہ درخواستیں دیکھنے کے لیے Stetho کو OkHttp زنجیر میں آخری interceptor ہونا چاہیے۔ درست ترتیب: پہلے AuthInterceptor، پھر LoggingInterceptor، پھر آخری StethoInterceptor۔

Stetho کے ساتھ عملی ڈیبگنگ تکنیکیں

Stetho سرور کو بھیجنے سے پہلے JSON سیریلائزیشن کی درستی کی جانچ کے لیے مؤثر ہے۔ Network Inspector کھولیں، درخواست تلاش کریں اور فیلڈز کی ساخت اور ڈیٹا کی اقسام کی درستی یقینی بنانے کے لیے درخواست کی باڈی کو Raw-موڈ میں دیکھیں۔

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

Stetho SQLiteOpenHelper کے ذریعے بنائے گئے تمام ڈیٹا بیسز دکھاتا ہے۔ اگر ڈیٹا بیس Chrome DevTools میں ظاہر نہ ہو، تو جانچیں کہ ایپ کوڈ میں getWritableDatabase() طریقے کو کم از کم ایک بار کال کیا گیا ہو۔ مائیگریشنز کے لیے SQL کنسول کے ذریعے ALTER TABLE چلائیں اور نتیجہ SELECT کویئری سے جانچیں۔

OkHttp زنجیر میں Interceptor کی ترتیب

حتمی تبدیل شدہ درخواستیں دکھانے کے لیے Stetho کو OkHttp زنجیر میں آخری interceptor ہونا چاہیے۔ درست ترتیب: درست لاگنگ کے لیے AuthInterceptor پہلے، پھر LoggingInterceptor، پھر آخری StethoInterceptor۔