Compose के यूज़र इंटरफ़ेस (यूआई) को डीबग करना

Compose यूज़र इंटरफ़ेस को डीबग करने के लिए, Android Studio में टूल उपलब्ध हैं.

लेआउट इंस्पेक्टर

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

रीकंपोज़िशन की संख्या देखना

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

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

पहली इमेज. रीकंपोज़िशन, लेआउट इंस्पेक्टर में हाइलाइट किए जाते हैं.

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

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

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

तीसरी इमेज. लेआउट इंस्पेक्टर में कंपोज़िशन और स्किप काउंटर चालू करें.

कॉम्पोज़ सिमैंटिक्स

Compose में, सेमेटिक्स आपके यूज़र इंटरफ़ेस (यूआई) के बारे में, किसी ऐसे वैकल्पिक तरीके से बताते हैं जिसे सुलभता सेवाओं और जांच फ़्रेमवर्क के लिए समझा जा सकता है. Compose लेआउट में सेमेटिक जानकारी की जांच करने के लिए, लेआउट इंस्पेक्टर का इस्तेमाल किया जा सकता है.

चौथी इमेज. लेआउट इंस्पेक्टर का इस्तेमाल करके दिखाई गई सेमैनटिक जानकारी.

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

यूज़र इंटरफ़ेस (यूआई) की जांच करना

Jetpack Compose में ज़्यादा अडैप्टिव और ऐक्सेस किए जा सकने वाले यूज़र इंटरफ़ेस (यूआई) बनाने में आपकी मदद करने के लिए, Android Studio में Compose की झलक में यूआई की जांच करने का मोड उपलब्ध है. यह सुविधा, व्यू के लिए सुलभता जांचने वाले ऐप्लिकेशन से मिलती-जुलती है.

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

इस सुविधा को ऐक्सेस करने के लिए, 'लिखें' पेज पर मौजूद, यूज़र इंटरफ़ेस की जांच करने वाले आइकॉन पर क्लिक करें:

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