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

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

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

शुरू करें

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

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

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

कोई व्यू चुनना या अलग करना

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

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

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

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

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

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

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

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

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

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

3D मोड

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

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

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

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

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

लिखने की सुविधा की जांच करें

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

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

एट्रिब्यूट की जांच करने वाला टूल देखें

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

adb shell settings put global debug_view_attributes 1

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

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

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

adb shell settings delete global debug_view_attributes

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

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

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

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