लेयर पैनल: अपनी वेबसाइट की लेयर के बारे में जानें

लेयर पैनल की मदद से, अपनी वेबसाइट के कॉम्पोनेंट और ब्राउज़र के कॉन्टेंट को रेंडर करने के तरीके को समझा जा सकता है. रेंडरिंग से जुड़ी समस्याओं की पहचान करने, स्क्रोलिंग से जुड़ी गड़बड़ियों को ठीक करने, और ऐनिमेशन को ऑप्टिमाइज़ करने के लिए, अपनी वेबसाइट के 3D डायग्राम का विश्लेषण करें.

खास जानकारी

ये काम करने के लिए, लेयर पैनल का इस्तेमाल करें:

• दस्तावेज़ की लेयर देखें.
• दस्तावेज़ की लेयर की जांच करना.
• डीओएम में बदलाव होने पर ब्रेकपॉइंट सेट करें.
• पेंट प्रोफ़ाइलर की जानकारी देखें.
• धीरे-धीरे स्क्रोल होने वाले एलिमेंट की पहचान करना.

लेयर पैनल खोलें

लेयर पैनल खोलने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. इसे दबाकर कमांड मेन्यू खोलें:
   • macOS: Command+Shift+P
   • Windows, Linux, ChromeOS: Control+Shift+P
3. Layers टाइप करें. इसके बाद, लेयर पैनल दिखाएं को चुनें और Enter दबाएं.

इसके अलावा, सबसे ऊपर दाएं कोने में, more_vert ज़्यादा विकल्प > ज़्यादा टूल > लेयर पैनल को चुनें.

इसके अलावा, परफ़ॉर्मेंस पैनल की मदद से किसी लेयर टैब में, किसी रिकॉर्डिंग के हर फ़्रेम की लेयर देखी जा सकती हैं. ज़्यादा जानने के लिए, लेयर जानकारी देखना देखें.

दस्तावेज़ की लेयर देखना

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

किसी लेयर को वेब पेज और डायग्राम में हाइलाइट करने के लिए, उस पर कर्सर घुमाएं. पेज पर एक टूलटिप दिखेगा, जिसमें यह जानकारी होगी:

• लेयर के सिलेक्टर.
• लेयर के डाइमेंशन, पिक्सल में.
• जहां ज़रूरी हो वहां सीएसएस ग्रिड या फ़्लेक्स को दिखाने वाला आइकॉन.

दस्तावेज़ की लेयर की जांच करना

जानकारी पैनल में ज़्यादा जानकारी देखने के लिए, किसी लेयर पर क्लिक करें.

लेयर के आधार पर, नीचे दी गई जानकारी दिखेगी:

• साइज़
• कंपोज़िट करने की वजहें
• स्टोरेज का अनुमान
• पेंट की संख्या
• धीमे स्क्रोल करने वाले रीजन
• स्टिकी पोज़िशन कंस्ट्रेंट

इस डायग्राम में दिखाया गया है कि इस पेज के लिए लेयर को कैसे स्टैक और व्यवस्थित किया गया है. इसमें वे एलिमेंट भी शामिल हैं जो व्यूपोर्ट के बाहर मौजूद हैं.

डायग्राम को एक जगह से दूसरी जगह ले जाने के लिए:

• डायग्राम को एक से दूसरी जगह ले जाने के लिए, WASD का इस्तेमाल करें. ऊपर पैन करने के लिए W, बाईं ओर पैन करने के लिए A, नीचे पैन करने के लिए S, और दाईं ओर पैन करने के लिए D दबाएं.
• पैन मोड drag_pan पर क्लिक करें या X दबाएं और X और Y ऐक्सिस पर चलने के लिए खींचें और छोड़ें.
• घुमाने के मोड 360 पर क्लिक करें या V दबाकर, Z ऐक्सिस के साथ घुमाने के लिए खींचें और छोड़ें.
• डायग्राम को उसकी ओरिजनल पोज़िशन पर रीसेट करने के लिए, ट्रांसफ़ॉर्म रीसेट करें zoom_in_map पर क्लिक करें या 0 दबाएं.
• shift + + या माउसव्हील ऊपर दबाकर ज़ूम इन करें.
• shift + - या माउसव्हील नीचे दबाकर ज़ूम आउट करें.

एलिमेंट पैनल में किसी लेयर का डीओएम एलिमेंट देखने के लिए, डायग्राम या लेयर ट्री में किसी लेयर पर राइट क्लिक करें. इसके बाद, एलिमेंट पैनल में दिखाएं पर क्लिक करें.

इसके अलावा, लेयर पैनल में ऐसी कुछ लेयर छिपी होती हैं जिनमें कॉन्टेंट होस्ट या ड्रॉ नहीं किया जाता. इन लेयर को दिखाने के लिए, लेयर ट्री पर दायां क्लिक करें और इंटरनल लेयर दिखाएं चुनें.

डीओएम में बदलाव के ब्रेकपॉइंट सेट करना

लेयर पैनल की मदद से, DOM में बदलाव के ब्रेकपॉइंट सेट किए जा सकते हैं.

डीओएम में बदलाव होने पर ब्रेकपॉइंट सेट करने के लिए, यह तरीका अपनाएं:

1. लेयर ट्री में किसी लेयर पर राइट क्लिक करें.
2. Break on पर कर्सर घुमाएं. इसके बाद, सबट्री में बदलाव, एट्रिब्यूट में बदलाव या नोड हटाना चुनें.

डीओएम में बदलाव के ब्रेकपॉइंट की सूची यहां देखें:

• एलिमेंट > डीओएम ब्रेकपॉइंट टैब.
• सोर्स > डीओएम ब्रेकपॉइंट सेक्शन को छोटा किया जा सकता है.

ब्रेकपॉइंट के टाइप के बारे में ज़्यादा जानने के लिए, DOM में बदलाव के ब्रेकपॉइंट के टाइप देखें.

Paint प्रोफ़ाइलर की जानकारी देखें

लेयर पैनल की मदद से, किसी लेयर के बारे में पेंट की पूरी जानकारी देखी जा सकती है. साथ ही, वेबपेज के कॉन्टेंट को 3D डायग्राम पर रेंडर किया जा सकता है.

पेंट प्रोफ़ाइलर चालू करने के लिए, यह तरीका अपनाएं:

1. ऐक्शन बार में, check_box Paints चेकबॉक्स को चुनें.
2. लेयर ट्री से कोई लेयर चुनें.
3. जानकारी पैनल में सबसे नीचे, पेंट प्रोफ़ाइलर पर क्लिक करें. ध्यान दें कि सभी लेयर के लिए यह विकल्प उपलब्ध नहीं होगा.

प्रोफ़ाइलर टैब खुलेगा, जिसमें पेंट रिकॉर्ड और एक हिस्टोग्राम होगा, जो पेंट की लागत के वितरण को दिखाता है.

पेंट को चालू करने पर, वेबपेज का ज़्यादातर कॉन्टेंट डायग्राम पर रेंडर हो जाएगा.

धीमे स्क्रोल होने वाले एलिमेंट की पहचान करना

कुछ वेबसाइटें, एलिमेंट पर स्क्रोल या टच इवेंट का पता लगाने के लिए JavaScript का इस्तेमाल करती हैं. ऐसा करने से, स्क्रोल करने की स्पीड पर बुरा असर पड़ सकता है. स्क्रोलिंग से जुड़े इवेंट लिसनर वाली उन लेयर की पहचान करने के लिए जिनसे परफ़ॉर्मेंस पर असर पड़ सकता है, check_box Slow scroll rects चेकबॉक्स पर क्लिक करें.

जिन लेयर की वजह से स्क्रोल करने में देरी हो सकती है उन्हें गुलाबी रंग से हाइलाइट किया जाता है.