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

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

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

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

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

शुरू करें

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

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

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

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

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

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

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

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

लेआउट बॉर्डर छिपाना और लेबल देखना

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

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

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

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

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

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

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

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

स्टैंडअलोन लेआउट इंस्पेक्टर

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

स्टैंडअलोन मोड में, लाइव अपडेट की सुविधा चालू करें. इसके लिए, लेआउट इंस्पेक्टर टूलबार में जाकर, लाइव अपडेट विकल्प पर क्लिक करें.

अन्य संसाधन

कॉन्टेंट देखना