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 अंतिम।