लेआउट इंस्पेक्टर की मदद से अपना लेआउट डीबग करें

Android Studio में मौजूद लेआउट इंस्पेक्टर की मदद से, एम्युलेटर या फ़िज़िकल डिवाइस पर चल रहे किसी ऐप्लिकेशन के लेआउट की जांच की जा सकती है और उसे डीबग किया जा सकता है. इससे, हर कॉम्पोनेंट के एट्रिब्यूट की जांच की जा सकती है. साथ ही, अपने ऐप्लिकेशन के लेआउट की तुलना डिज़ाइन मॉकअप से की जा सकती है. इसके अलावा, अपने ऐप्लिकेशन का बड़ा व्यू भी दिखाया जा सकता है.

लेआउट इंस्पेक्टर का इस्तेमाल करके, यह भी देखा जा सकता है कि किसी कंपोज़ेबल को कितनी बार फिर से कंपोज़ किया गया है या स्किप किया गया है. इससे, आपके ऐप्लिकेशन में मौजूद समस्याओं की पहचान की जा सकती है. उदाहरण के लिए, कोडिंग से जुड़ी कुछ गड़बड़ियों की वजह से, यूज़र इंटरफ़ेस (यूआई) को बार-बार कंपोज़ किया जा सकता है. इससे, परफ़ॉर्मेंस खराब हो सकती है. कोडिंग से जुड़ी कुछ गड़बड़ियों की वजह से, यूज़र इंटरफ़ेस (यूआई) को फिर से कंपोज़ नहीं किया जा सकता. इसलिए, यूज़र इंटरफ़ेस (यूआई) में किए गए बदलाव स्क्रीन पर नहीं दिख सकते.

ज़्यादा जानकारी के लिए, Compose के यूज़र इंटरफ़ेस (यूआई) को डीबग करना लेख पढ़ें.

पहली इमेज. Jetchat ऐप्लिकेशन के लिए, एंबेड किया गया लेआउट इंस्पेक्टर.

शुरू करें

लेआउट इंस्पेक्टर शुरू करने के लिए, अपना ऐप्लिकेशन चलाएं. इसके बाद, Running Devices विंडो पर जाएं और Toggle Layout Inspector एम्बेड किए गए लेआउट इंस्पेक्टर बटन को टॉगल करें पर क्लिक करें. अगर एक से ज़्यादा डिवाइसों या प्रोजेक्ट के बीच स्विच किया जाता है, तो लेआउट इंस्पेक्टर, कनेक्ट किए गए डिवाइस के फ़ोरग्राउंड में चल रही डीबग की जा सकने वाली प्रोसेस से अपने-आप कनेक्ट हो जाता है.

यहां कुछ सामान्य टास्क करने का तरीका बताया गया है:

  • हैरारकी देखने और हर कॉम्पोनेंट के एट्रिब्यूट की जांच करने के लिए, Component Tree और Attributes टूल विंडो का इस्तेमाल करें. एट्रिब्यूट ऐक्सेस करने के लिए, लेआउट इंस्पेक्टर को गतिविधि रीस्टार्ट करने की ज़रूरत पड़ सकती है.
  • कॉम्पोनेंट चुनने के लिए, पहले Toggle Deep Inspect डीप
इंस्पेक्ट बटन को टॉगल करें को चालू करें. इसके बाद, कॉम्पोनेंट पर क्लिक करें. इसके अलावा, कॉम्पोनेंट पर दो बार क्लिक करके, अपने कोड पर जाएं.
  • ऐप्लिकेशन के साथ इंटरैक्ट करने के लिए, Toggle Deep Inspect डीप
इंस्पेक्ट बटन को टॉगल करें को बंद करें.
  • असल डिवाइसों की जांच करने के लिए, डिवाइस मिररिंग की सुविधा चालू करें.
  • अपने ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को अपडेट करते समय, लाइव अपडेट की सुविधा चालू करने के लिए, पक्का करें कि लाइव एडिट की सुविधा चालू हो.

किसी कॉम्पोनेंट को चुनना या अलग करना

आम तौर पर, कोई कॉम्पोनेंट कुछ ऐसा दिखाता है जिसे उपयोगकर्ता देख सकता है और जिसके साथ इंटरैक्ट कर सकता है. Component Tree में, आपके ऐप्लिकेशन की हैरारकी (व्यू और व्यू ग्रुप के लेआउट का क्रम) रीयल टाइम में दिखती है. इसमें हर कंपोज़ेबल कॉम्पोनेंट शामिल होता है. इससे, आपके ऐप्लिकेशन के लेआउट को डीबग करने में मदद मिलती है, क्योंकि इसमें आपके ऐप्लिकेशन में मौजूद एलिमेंट और उनसे जुड़ी वैल्यू देखी जा सकती हैं.

किसी कॉम्पोनेंट को चुनने के लिए, Component Tree या Layout Display में उस पर क्लिक करें. चुने गए कॉम्पोनेंट के सभी लेआउट एट्रिब्यूट, Attributes पैनल में दिखते हैं.

अगर आपके लेआउट में ओवरलैप होने वाले कॉम्पोनेंट शामिल हैं, तो Deep Inspect मोड 'ज़्यादा जानकारी देखें' बटन को टॉगल करें में राइट क्लिक करने पर, आपको किसी इलाके में मौजूद सभी कॉम्पोनेंट दिख सकते हैं. सामने मौजूद न होने वाले कॉम्पोनेंट को चुनने के लिए, Component Tree में उस पर क्लिक करें.

कॉम्प्लेक्स लेआउट के साथ काम करने के लिए, अलग-अलग कॉम्पोनेंट को अलग किया जा सकता है. इससे, Component Tree में लेआउट का सिर्फ़ सबसेट दिखता है और Layout Display में रेंडर होता है. किसी कॉम्पोनेंट को अलग करने के लिए, Component Tree में उस पर राइट क्लिक करें. इसके बाद, Show Only Subtree या Show Only Parents को चुनें. पूरा व्यू देखने के लिए, कॉम्पोनेंट पर राइट क्लिक करें और Show All को चुनें.

लेआउट बॉर्डर और व्यू लेबल छिपाना

लेआउट एलिमेंट के लिए, बाउंडिंग बॉक्स या कॉम्पोनेंट लेबल छिपाने के लिए, Layout Display में सबसे ऊपर मौजूद, View Options विकल्प देखें
बटन पर क्लिक करें. इसके बाद, Show Borders या Show View Label को टॉगल करें.

लेआउट हैरारकी के स्नैपशॉट कैप्चर करना

लेआउट इंस्पेक्टर की मदद से, चल रहे ऐप्लिकेशन के लेआउट हैरारकी के स्नैपशॉट सेव किए जा सकते हैं. इससे, उन्हें दूसरों के साथ शेयर किया जा सकता है या बाद में रेफ़रंस के तौर पर इस्तेमाल किया जा सकता है.

स्नैपशॉट में वह डेटा कैप्चर होता है जो आम तौर पर लेआउट इंस्पेक्टर का इस्तेमाल करते समय दिखता है. इसमें, आपके लेआउट की पूरी जानकारी, Compose, View या हाइब्रिड लेआउट का कॉम्पोनेंट ट्री, और आपके यूज़र इंटरफ़ेस (यूआई) के हर कॉम्पोनेंट के लिए पूरी जानकारी वाले एट्रिब्यूट शामिल होते हैं. स्नैपशॉट सेव करने के लिए, Snapshot Export/Import स्नैपशॉट
एक्सपोर्ट/इंपोर्ट पर क्लिक करें. इसके बाद, Export Snapshot पर क्लिक करें.

पहले से सेव किए गए लेआउट इंस्पेक्टर के स्नैपशॉट को लोड करने के लिए, Import Snapshot पर क्लिक करें.

ऐप्लिकेशन के लेआउट की तुलना, रेफ़रंस इमेज के ओवरले से करना

अपने ऐप्लिकेशन के लेआउट की तुलना, रेफ़रंस इमेज से करने के लिए, जैसे कि यूज़र इंटरफ़ेस (यूआई) मॉकअप, लेआउट इंस्पेक्टर में बिटमैप इमेज ओवरले लोड किया जा सकता है.

  • ओवरले लोड करने के लिए, Layout Inspector टूलबार में मौजूद, Load Overlay विकल्प चुनें. ओवरले को लेआउट के हिसाब से स्केल किया जाता है.
  • ओवरले की पारदर्शिता को अडजस्ट करने के लिए, Overlay Alpha स्लाइडर का इस्तेमाल करें.
  • ओवरले हटाने के लिए, Clear Overlay पर क्लिक करें.

अलग से उपलब्ध लेआउट इंस्पेक्टर

बेहतर परफ़ॉर्मेंस के लिए, हमारा सुझाव है कि लेआउट इंस्पेक्टर को उसके डिफ़ॉल्ट एंबेड किए गए मोड में इस्तेमाल करें. अगर आपको लेआउट इंस्पेक्टर को अन-एंबेड करना है, तो File (macOS पर Android Studio) > Settings > Tools > Layout Inspector पर जाएं. इसके बाद, Enable embedded Layout Inspector चेकबॉक्स से सही का निशान हटाएं.

अलग से उपलब्ध मोड में, लाइव अपडेट की सुविधा चालू करने के लिए, Layout Inspector टूलबार में मौजूद, Live Updates विकल्प पर क्लिक करें.

अन्य संसाधन

Views का कॉन्टेंट