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

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

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

शुरू करें

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

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

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

किसी व्यू को चुनना या अलग करना

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

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

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

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

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

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

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

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

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

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

3D मोड

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

लेआउट इंस्पेक्टर: 3D व्यू
दूसरी इमेज. लेआउट का घुमाया गया 3D व्यू.
लेआउट इंस्पेक्टर: लेयर के बीच का स्पेस दिखाने वाला व्यू
तीसरी इमेज. लेआउट की लेयर को बड़ा या छोटा करने के लिए, लेयर स्पेसिंग स्लाइडर का इस्तेमाल करें.

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

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

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

Compose की जांच करना

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

Compose के लिए लेआउट इंस्पेक्टर के बारे में ज़्यादा जानें

एट्रिब्यूट की जांच करने की सुविधा

लेआउट इंस्पेक्टर को ठीक से काम करने के लिए, यह ग्लोबल सेटिंग ज़रूरी है:

adb shell settings put global debug_view_attributes 1

इस विकल्प से, डिवाइस पर चल रही सभी प्रोसेस की जांच करने के लिए अतिरिक्त जानकारी जनरेट होती है.

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

फ़्लैग को बंद करने के लिए, यह adb कमांड चलाएं:

adb shell settings delete global debug_view_attributes

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

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

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

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