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

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

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

शुरू करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3D मोड

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

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

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

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

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

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

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

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

गतिविधि के फिर से शुरू होने से बचें

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

  1. adb shell settings put global debug_view_attributes_application_package <processname>

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

  2. adb shell settings put global debug_view_attributes 1

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

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

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

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

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

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

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

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