Chrome DevTools में, टॉप लेयर एलिमेंट के लिए सहायता जोड़ी जा रही है. इससे डेवलपर के लिए, टॉप लेयर एलिमेंट का इस्तेमाल करने वाले अपने कोड को डीबग करना आसान हो जाएगा.
इस लेख में बताया गया है कि टॉप लेयर एलिमेंट क्या हैं, DevTools की मदद से टॉप लेयर के कॉन्टेंट को विज़ुअलाइज़ कैसे किया जाता है, ताकि टॉप लेयर एलिमेंट वाले डीओएम स्ट्रक्चर को समझने और उसे डीबग करने में मदद मिल सके. साथ ही, DevTools की टॉप लेयर के लिए सहायता को लागू करने का तरीका भी बताया गया है.
टॉप लेयर और टॉप लेयर एलिमेंट क्या हैं?
<dialog> को मॉडल के तौर पर खोलने पर संगठन में क्या होता है? 🤔
इसे एक सबसे ऊपरी लेयर में रखा जाता है. टॉप लेयर कॉन्टेंट, बाकी सभी कॉन्टेंट के ऊपर रेंडर होता है. उदाहरण के लिए, मॉडल डायलॉग का बाकी सभी डीओएम कॉन्टेंट के ऊपर दिखना ज़रूरी है, ताकि ब्राउज़र इस एलिमेंट को 'टॉप लेयर' में अपने-आप रेंडर कर सके मैन्युअल ज़ेड-इंडेक्स से मुकाबला करने के लिए मजबूर नहीं किया जाता. टॉप लेयर एलिमेंट, सबसे ज़्यादा z-इंडेक्स वाले एलिमेंट पर भी दिखता है.
सबसे ऊपर वाली लेयर को 'सबसे ऊंची स्टैकिंग लेयर' के तौर पर दिखाया जा सकता है. हर दस्तावेज़ से जुड़ा एक व्यूपोर्ट होता है, इसलिए पेज की सबसे ऊपरी लेयर भी एक होती है. सबसे ऊपर की लेयर के अंदर एक साथ कई एलिमेंट हो सकते हैं. ऐसा होने पर, वे एक-दूसरे के ऊपर स्टैक हो जाती हैं, यानी आखिरी वाला सबसे ऊपर. दूसरे शब्दों में, टॉप लेयर के सभी एलिमेंट को सबसे ऊपर की लेयर में, लास्ट इन, फ़र्स्ट आउट (LIFO) स्टैक में रखा जाता है.
<dialog> एलिमेंट ही ऐसा एलिमेंट नहीं है जिसे ब्राउज़र किसी टॉप लेयर में रेंडर करता है. फ़िलहाल, सबसे ऊपर की लेयर के एलिमेंट इस तरह हैं:
पॉपओवर, मॉडल डायलॉग, और फ़ुलस्क्रीन मोड में एलिमेंट.
इस डायलॉग बॉक्स की जांच करें:
<main>
<button onclick="window.dialog.showModal();">Open Dialog</button>
</main>
<dialog id="dialog"></dialog>
यहां एक डेमो दिया गया है, जिसमें कुछ डायलॉग दिखाए गए हैं, जिनमें उनके बैकग्राउंड पर अलग-अलग स्टाइल लागू की गई हैं. इसकी जानकारी नीचे दी गई है:
बैकड्रॉप क्या होता है?
अच्छी बात यह है कि टॉप लेयर एलिमेंट के नीचे, कॉन्टेंट को पसंद के मुताबिक बनाने का एक तरीका है.
सबसे ऊपर की लेयर के हर एलिमेंट में एक सीएसएस स्यूडो-एलिमेंट होता है. इसे बैकड्रॉप कहते हैं.
बैकड्रॉप, व्यूपोर्ट के आकार का एक बॉक्स है जिसे किसी भी ऊपरी लेयर एलिमेंट के ठीक नीचे रेंडर किया जाता है. ::backdrop नकली एलिमेंट की मदद से, एलिमेंट के नीचे मौजूद हर चीज़ को छिपाया जा सकता है, स्टाइल किया जा सकता है या पूरी तरह से छिपाया जा सकता है. ऐसा तब होता है, जब वह सबसे ऊपर की लेयर में सबसे ऊपर मौजूद हो.
जब एक से ज़्यादा एलिमेंट को मॉडल बनाया जाता है, तो ब्राउज़र ऐसे एलिमेंट के ठीक नीचे और फ़ुलस्क्रीन एलिमेंट के सबसे ऊपर बैकग्राउंड खींचता है.
यहां बताया गया है कि आप बैकड्रॉप कैसे शैली देते हैं:
/* The browser displays the backdrop only when the dialog.showModal() function opens the dialog.*/
dialog::backdrop {
background: rgba(255,0,0,.25);
}
केवल पहली बैकड्रॉप कैसे दिखाएं?
सबसे ऊपर की लेयर के हर एलिमेंट में एक ऐसा बैकग्राउंड होता है जो टॉप लेयर स्टैक से जुड़ा होता है. इन बैकड्रॉप को एक-दूसरे पर ओवरलैप करने के लिए डिज़ाइन किया गया है, इसलिए अगर किसी बैकग्राउंड की ओपैसिटी 100% नहीं है, तो उसके नीचे के बैकड्रॉप दिखाई देते हैं.
अगर टॉप लेयर स्टैक में सिर्फ़ पहला बैकग्राउंड दिखना ज़रूरी है, तो सबसे ऊपर की लेयर स्टैक में आइटम आइडेंटिफ़ायर का ट्रैक रखकर ऐसा किया जा सकता है.
अगर जोड़ा गया एलिमेंट, ऊपरी लेयर में मौजूद पहला एलिमेंट नहीं है, तो एलिमेंट को सबसे ऊपर की लेयर में रखे जाने पर कॉल किया जाने वाला फ़ंक्शन, ::backdrop पर hiddenBackdrop क्लास लागू करता है. ऊपरी लेयर से एलिमेंट को हटाने पर, यह क्लास हट जाती है.
इस डेमो में कोड को देखें:
DevTools में टॉप लेयर सहायता डिज़ाइन
टॉप लेयर के लिए DevTools की मदद से, डेवलपर को टॉप लेयर के कॉन्सेप्ट को समझने में मदद मिलती है. साथ ही, इससे यह समझने में मदद मिलती है कि टॉप लेयर के कॉन्टेंट में बदलाव कैसे होता है. इन सुविधाओं से डेवलपर को इन चीज़ों को पहचानने में मदद मिलती है:
- सबसे ऊपर की लेयर में मौजूद एलिमेंट और उनका क्रम.
- स्टैक में सबसे ऊपर मौजूद एलिमेंट, किसी भी समय पर सेट हो सकता है.
इसके अलावा, DevTools की टॉप लेयर के लिए सहायता सुविधा की मदद से, सबसे ऊपर मौजूद लेयर स्टैक में बैकग्राउंड के नकली एलिमेंट की पोज़िशन को विज़ुअलाइज़ किया जा सकता है. भले ही, यह ट्री एलिमेंट नहीं है, लेकिन यह सबसे ऊपर की लेयर के काम करने के तरीके में अहम भूमिका निभाता है. साथ ही, यह डेवलपर के लिए भी मददगार हो सकता है.
टॉप लेयर वाली सहायता सुविधाओं की मदद से, ये काम किए जा सकते हैं:
- किसी भी समय देखें कि टॉप लेयर स्टैक में कौनसे एलिमेंट मौजूद हैं. टॉप लेयर रिप्रज़ेंटेशन स्टैक, डाइनैमिक तौर पर बदलता है, क्योंकि टॉप लेयर में एलिमेंट जोड़े या हटाए जाते हैं.
- सबसे ऊपर मौजूद लेयर स्टैक में एलिमेंट की पोज़िशन देखें.
- सबसे ऊपर की लेयर के एलिमेंट या एलिमेंट से जाएं ट्री में बैकड्रॉप pseudo- Element या सबसे ऊपर की लेयर दिखाने वाले कंटेनर और पीछे के बैकड्रॉप में बैकग्राउंड pseudo-element.
आइए, देखते हैं कि इन सुविधाओं को कैसे इस्तेमाल किया जा सकता है!
सबसे ऊपर मौजूद लेयर वाला कंटेनर
सबसे ऊपर की लेयर के एलिमेंट को विज़ुअलाइज़ करने के लिए, DevTools एलिमेंट ट्री में एक टॉप लेयर कंटेनर जोड़ता है. यह क्लोज़िंग </html> टैग के बाद होता है.
इस कंटेनर की मदद से, सबसे ऊपर मौजूद लेयर स्टैक में मौजूद एलिमेंट को किसी भी समय देखा जा सकता है. सबसे ऊपर मौजूद कंटेनर कंटेनर, टॉप लेयर एलिमेंट और उनके बैकग्राउंड के लिंक की सूची होता है. टॉप लेयर रिप्रज़ेंटेशन स्टैक, डाइनैमिक तौर पर बदलता है, क्योंकि टॉप लेयर में एलिमेंट जोड़े या हटाए जाते हैं.
एलिमेंट ट्री या टॉप लेयर कंटेनर में टॉप लेयर एलिमेंट को ढूंढने के लिए, सबसे ऊपर मौजूद लेयर कंटेनर में, सबसे ऊपर मौजूद लेयर एलिमेंट पर मौजूद लिंक पर क्लिक करें. इससे एलिमेंट ट्री में उस एलिमेंट पर क्लिक किया जा सकेगा और वापस आ जाएगा.
टॉप लेयर कंटेनर एलिमेंट से टॉप लेयर ट्री एलिमेंट पर जाने के लिए, टॉप लेयर कंटेनर में एलिमेंट के बगल में मौजूद दिखाएं बटन पर क्लिक करें.
टॉप लेयर ट्री एलिमेंट से सबसे ऊपर मौजूद लेयर कंटेनर में मौजूद लिंक पर जाने के लिए, एलिमेंट के बगल में मौजूद टॉप लेयर बैज पर क्लिक करें.
टॉप-लेयर बैज के साथ-साथ किसी भी बैज को बंद किया जा सकता है. बैज को बंद करने के लिए, किसी भी बैज पर राइट क्लिक करें. इसके बाद, बैज की सेटिंग चुनें और उन बैज के बगल में मौजूद टिक को हटाएं जिन्हें आपको छिपाना है.
सबसे ऊपर मौजूद लेयर स्टैक में एलिमेंट का क्रम
सबसे ऊपर मौजूद लेयर कंटेनर, एलिमेंट को उसी तरह दिखाता है जैसे वे स्टैक में दिखते हैं. हालांकि, वे इनका क्रम उलटा करते हैं. स्टैक एलिमेंट का ऊपरी हिस्सा, टॉप लेयर कंटेनर की एलिमेंट सूची में सबसे आखिर में मौजूद होता है. इसका मतलब है कि टॉप लेयर कंटेनर सूची का आखिरी एलिमेंट, वह एलिमेंट है जिसके साथ फ़िलहाल दस्तावेज़ में इंटरैक्ट किया जा सकता है.
ट्री एलिमेंट के बगल में मौजूद बैज से पता चलता है कि एलिमेंट सबसे ऊपर की लेयर से जुड़े हैं या नहीं. साथ ही, उसमें स्टैक में किसी एलिमेंट की पोज़िशन नंबर भी शामिल है.
इस स्क्रीनशॉट में, सबसे ऊपर मौजूद लेयर स्टैक में दो एलिमेंट हैं. दूसरा एलिमेंट स्टैक के सबसे ऊपर है. अगर दूसरे एलिमेंट को हटाया जाता है, तो पहला एलिमेंट सबसे ऊपर चला जाता है.
ऊपरी लेयर कंटेनर में बैकड्रॉप
जैसा कि ऊपर बताया गया है, हर टॉप लेयर एलिमेंट में एक सीएसएस pseudo-element होता है, जिसे बैकड्रॉप कहते हैं. आप इस एलिमेंट को स्टाइल कर सकते हैं, इसलिए इसकी जांच करने और इसके बारे में जानने से भी मदद मिलेगी.
एलिमेंट ट्री में, बैकड्रॉप एलिमेंट उस एलिमेंट के क्लोज़िंग टैग से पहले रहता है जिससे वह जुड़ा है. हालांकि, टॉप लेयर कंटेनर में बैकड्रॉप लिंक उस टॉप लेयर एलिमेंट के ठीक ऊपर मौजूद होता है जिससे वह जुड़ा है.
डीओएम ट्री में किए गए बदलाव
DevTools में अलग-अलग डीओएम ट्री एलिमेंट बनाने और मैनेज करने के लिए ज़िम्मेदार क्लास, ElementsTreeElement में टॉप लेयर कंटेनर को लागू करने के लिए काफ़ी नहीं है.
टॉप लेयर कंटेनर को ट्री में नोड के रूप में दिखाने के लिए, हमने एक नई क्लास जोड़ी है जो DevTools ट्री एलिमेंट नोड बनाती है. इससे पहले, DevTools एलिमेंट ट्री बनाने की ज़िम्मेदारी वाली क्लास, हर TreeElement में DOMNode के साथ शुरू होती थी. यह क्लास, backendNodeId और बैकएंड से जुड़ी अन्य प्रॉपर्टी वाली क्लास होती है. वहीं, backendNodeId को बैकएंड पर असाइन किया जाता है.
टॉप लेयर कंटेनर नोड, जिसमें टॉप लेयर एलिमेंट के लिंक की सूची होती है. यह सामान्य ट्री एलिमेंट नोड के तौर पर काम करने के लिए ज़रूरी होता है. हालांकि, यह नोड 'वास्तविक' नहीं है DOM नोड और बैकएंड को टॉप लेयर कंटेनर नोड बनाने की ज़रूरत नहीं है.
टॉप लेयर को दिखाने वाला फ़्रंटएंड नोड बनाने के लिए, हमने एक नए तरह का फ़्रंटएंड नोड जोड़ा है. यह DOMNode के बिना बनाया जाता है. टॉप लेयर कंटेनर एलिमेंट ऐसा पहला फ़्रंटएंड नोड है जिसमें DOMNode नहीं है. इसका मतलब है कि यह सिर्फ़ फ़्रंटएंड पर मौजूद है और बैकएंड को इसकी जानकारी नहीं है कोई जानकारी नहीं है. अन्य नोड की तरह ही काम करने के लिए, हमने एक नई TopLayerContainer क्लास बनाई है. यह क्लास UI.TreeOutline.TreeElement क्लास को बढ़ाती है, जो फ़्रंटएंड नोड के व्यवहार के लिए ज़िम्मेदार होती है.
मनचाहे प्लेसमेंट को पाने के लिए, किसी एलिमेंट को रेंडर करने वाली क्लास, TopLayerContainer को <html> टैग के अगले सिबलिंग के तौर पर जोड़ देती है.
एक नया टॉप लेयर बैज बताता है कि एलिमेंट ऊपर की लेयर में है और TopLayerContainer एलिमेंट में इस एलिमेंट के शॉर्टकट के लिंक के तौर पर काम करता है.
शुरुआती डिज़ाइन
पहले, प्लान में टॉप लेयर के एलिमेंट को एलिमेंट के लिंक की सूची बनाने के बजाय, टॉप लेयर कंटेनर में डुप्लीकेट किया गया. DevTools में एलिमेंट के चाइल्ड फ़ेच करने की प्रोसेस के काम करने के तरीके की वजह से, हमने इस समाधान को लागू नहीं किया. हर एलिमेंट का एक पैरंट पॉइंटर होता है, जिसका इस्तेमाल बच्चों को फ़ेच करने के लिए किया जाता है. साथ ही, एक से ज़्यादा पॉइंटर का इस्तेमाल नहीं किया जा सकता. इसलिए, हमारे पास ऐसा नोड नहीं हो सकता जो सही तरीके से बड़ा हो जाए और जिसमें सभी बच्चे ट्री में एक से ज़्यादा जगहों पर शामिल हों. आम तौर पर, डुप्लीकेट सबट्री को ध्यान में रखकर यह सिस्टम नहीं बनाया गया था.
हमने जिस समझौता पर किया है वह उन नोड को डुप्लीकेट करने के बजाय फ़्रंटएंड DOM नोड के लिए लिंक बनाना था. DevTools में एलिमेंट के लिंक बनाने के लिए ज़िम्मेदार क्लास ShortcutTreeElement है. यह UI.TreeOutline.TreeElement को बढ़ा देती है. ShortcutTreeElement का व्यवहार, अन्य DevTools DOM ट्री एलिमेंट की तरह ही है. हालांकि, इसके बैकएंड पर इससे जुड़ा कोई नोड नहीं है. साथ ही, इसमें एक बटन है, जो ElementsTreeElement से लिंक करता है.
टॉप लेयर नोड के हर ShortcutTreeElement में एक चाइल्ड ShortcutTreeElement होता है, जो DevTools DOM ट्री में ::backdrop स्यूडो-एलिमेंट को दिखाने से लिंक होता है.
शुरुआती डिज़ाइन:
Chrome DevTools प्रोटोकॉल (सीडीपी) में बदलाव
टॉप लेयर सपोर्ट को लागू करने के लिए, Chrome DevTools प्रोटोकॉल (सीडीपी) में बदलाव करना ज़रूरी है. सीडीपी, DevTools और Chromium के बीच कम्यूनिकेशन प्रोटोकॉल के तौर पर काम करते हैं.
हमें आपको यह जानकारी जोड़नी होगी:
- किसी भी समय फ़्रंटएंड से कॉल करने का निर्देश.
- बैकएंड साइड से फ़्रंटएंड पर ट्रिगर होने वाला इवेंट.
सीडीपी: DOM.getTopLayerElements निर्देश
मौजूदा टॉप लेयर एलिमेंट को दिखाने के लिए, हमें एक नए एक्सपेरिमेंट के तौर पर सीडीपी कमांड की ज़रूरत है. यह कमांड, उन एलिमेंट के नोड आईडी की सूची दिखाता है जो सबसे ऊपर की लेयर में मौजूद हैं. DevTools इस निर्देश को तब कॉल करता है, जब DevTools खुले हों या सबसे ऊपर की लेयर के एलिमेंट में बदलाव हो. यह निर्देश इस तरह दिखता है:
# Returns NodeIds of the current top layer elements.
# Top layer renders closest to the user within a viewport, therefore, its elements always
# appear on top of all other content.
experimental command getTopLayerElements
returns
# NodeIds of the top layer elements.
array of NodeId nodeIds
सीडीपी: DOM.topLayerElementsUpdated इवेंट
टॉप लेयर एलिमेंट की अप-टू-डेट सूची पाने के लिए, हमें टॉप लेयर एलिमेंट में हर बदलाव की ज़रूरत होती है, ताकि एक्सपेरिमेंटल सीडीपी इवेंट को ट्रिगर किया जा सके. यह इवेंट, बदलाव के फ़्रंटएंड को सूचना देता है. इसके बाद, DOM.getTopLayerElements निर्देश को कॉल किया जाता है और एलिमेंट की नई सूची मिलती है.
इवेंट ऐसा दिखेगा:
# Called by the change of the top layer elements.
experimental event topLayerElementsUpdated
सीडीपी पर ध्यान देना
टॉप लेयर के सीडीपी सपोर्ट को लागू करने के कई विकल्प थे. जिस दूसरे विकल्प पर हमने विचार किया वह था, इवेंट बनाना. इससे, सिर्फ़ फ़्रंट एंड को टॉप लेयर एलिमेंट को जोड़ने या हटाने की सूचना देने के बजाय, टॉप लेयर एलिमेंट की सूची दिखेगी.
विकल्प के तौर पर, हम निर्देश देने के बजाय दो इवेंट बना सकते हैं: topLayerElementAdded और topLayerElementRemoved. इस मामले में, हमें एक एलिमेंट मिलेगा और फ़्रंट एंड पर टॉप लेयर एलिमेंट के अरे को मैनेज करना होगा.
वर्तमान में, फ़्रंटएंड इवेंट अपडेट किए गए तत्वों की सूची पाने के लिए getTopLayerElements आदेश को कॉल करता है. अगर हम एलिमेंट की सूची या कोई ऐसा एलिमेंट भेजते जिसकी वजह से हर बार इवेंट ट्रिगर होने पर बदलाव होता है, तो हम कमांड का इस्तेमाल करने से बच सकते हैं.
हालांकि, इस स्थिति में फ़्रंटएंड यह कंट्रोल नहीं कर पाएगा कि कौनसे एलिमेंट पुश किए जाएं.
हमने इसे इस तरह से लागू किया है, क्योंकि हमारी राय में यह बेहतर है कि फ़्रंटएंड यह तय कर सके कि टॉप लेयर नोड के लिए कब अनुरोध करना है. उदाहरण के लिए, अगर यूज़र इंटरफ़ेस (यूआई) में सबसे ऊपर की लेयर को छोटा किया गया है या उपयोगकर्ता किसी ऐसे DevTools पैनल का इस्तेमाल कर रहा है जिसमें एलिमेंट ट्री नहीं है, तो ट्री के अंदर ज़्यादा नोड जोड़ने की ज़रूरत नहीं है.