DevTools के नए स्क्रोल बैज की मदद से, स्क्रोल से जुड़ी समस्याओं को डीबग करना अब और भी आसान हो गया है! इस पोस्ट में बताया गया है कि स्क्रोल किए जा सकने वाले एलिमेंट क्या होते हैं, उन्हें ढूंढना क्यों मुश्किल हो सकता है, और इस नई सुविधा से उन्हें तुरंत ढूंढने में कैसे मदद मिलती है. हम आपको यह भी बताएंगे कि हमने स्क्रोल बैज को कैसे बनाया.
स्क्रोल किया जा सकने वाला एलिमेंट क्या होता है?
अगर किसी एलिमेंट में मौजूद कॉन्टेंट को स्क्रोल किया जा सकता है, तो वह स्क्रोल किया जा सकने वाला एलिमेंट (या स्क्रोल कंटेनर) होता है. इससे कोई फ़र्क़ नहीं पड़ता कि उसमें स्क्रोल बार हैं या नहीं.
स्क्रोल किए जा सकने वाले एलिमेंट को ढूंढना मुश्किल क्यों है?
स्क्रोल से जुड़ी समस्याओं को डीबग करना मुश्किल होता है. स्क्रोल किए जा सकने वाले एलिमेंट को साफ़ तौर पर दिखाने वाले टूल के बिना, पेज पर मौजूद जानकारी को ढूंढना मुश्किल हो जाता है. खास तौर पर, जटिल पेजों पर, जब स्क्रोलबार मौजूद न हों.
स्क्रोल करने वाले एलिमेंट को मैन्युअल तरीके से ढूंढना, कई बार कोशिश करने के बाद अपनी गलतियों से सीखकर ही हो सकता है:
- आपने कोई एलिमेंट चुना और उसकी स्टाइल में बदलाव किया.
- क्या स्क्रोलबार गायब हो गया? अगर ऐसा नहीं होता है, तो यह प्रोसेस दोहराएं.
पेश है स्क्रोल बैज
Chrome 130 में, स्क्रोल किए जा सकने वाले एलिमेंट ढूंढने के लिए, एलिमेंट पैनल में नए स्क्रोल बैज का इस्तेमाल किया जा सकता है!
उदाहरण के लिए, नए स्क्रोल बैज का इस्तेमाल करके यह पता लगाने की कोशिश करें कि किस एलिमेंट की वजह से स्क्रोलबार दिख रहे हैं. यहां दिए गए उदाहरण में ऐसा किया गया है.
नए स्क्रोल बैज को तकनीकी तौर पर लागू करना
इसे लागू करने की प्रोसेस को दो हिस्सों में बांटा गया है:
- स्क्रोल किए जा सकने वाले एलिमेंट की पहचान करना.
Blink’s(Chrome का रेंडर इंजन) सिग्नल का इस्तेमाल करके, उन एलिमेंट की पहचान करें जिन्हें स्क्रोल किया जा सकता है या पेज में हुए बदलाव की वजह से, स्क्रोल किया जा सकता है. - स्क्रोल बैज दिखाना. सिग्नल मिलने के बाद, हम एलिमेंट पैनल में स्क्रोल किए जा सकने वाले एलिमेंट के बगल में एक नया बैज शामिल करते हैं. यह बैज, मौजूदा ग्रिड बैज की तरह ही होता है.
स्क्रोल किए जा सकने वाले एलिमेंट की पहचान करना
स्क्रोल किए जा सकने वाले एलिमेंट की पहचान करने के लिए, हमने Blink में IsUserScrollable तरीके का इस्तेमाल किया. इस तरीके से यह तय किया जाता है कि कोई नोड स्क्रोल किया जा सकता है या नहीं. इसके लिए, यह देखा जाता है कि वह X या Y ऐक्सिस के साथ ओवरफ़्लो करता है या नहीं. इससे पता चलता है कि कॉन्टेंट, कंटेनर के डाइमेंशन से ज़्यादा है और उसे स्क्रोल किया जा सकता है. हम इस तरीके का इस्तेमाल तब करते हैं, जब DevTools में कोई नया एलिमेंट लोड होता है. इससे स्क्रोल किए जा सकने वाले कंटेनर की पहचान की जा सकती है.
पहले से लोड किए गए एलिमेंट की स्क्रोल करने की सुविधा की स्थिति को डाइनैमिक तौर पर अपडेट करने के लिए, हमें Blink रेंडरिंग इंजन के कोडबेस में गहराई से जाना पड़ा. इससे, यह ट्रैक किया जा सका कि किसी नोड के लिए स्क्रोल किया जा सकने वाला एरिया कहां जोड़ा गया है या हटाया गया है.
ओवरफ़्लो को मैनेज करने वाला मुख्य लॉजिक, PaintLayerScrollableArea कॉम्पोनेंट से मैनेज किया जाता है. खास तौर पर, UpdateScrollableAreaSet तरीका यह पता लगाने के लिए ज़िम्मेदार है कि ओवरफ़्लो कब हुआ या उसे कब ठीक किया गया.
इस जानकारी को DevTools के बैकएंड पर भेजा जाता है. इसके लिए, उस नोड का रेफ़रंस भेजा जाता है जिसने अपना ScrollableArea बदला है.
इसके बाद, बैकएंड IsUserScrollable तरीके का इस्तेमाल करके, नोड की नई स्थिति की फिर से जांच करता है. स्क्रोल किए जा सकने की पुष्टि करने के बाद, Chrome DevTools Protocol का इस्तेमाल करके फ़्रंटएंड को सिग्नल भेजा जाता है. इससे यह पक्का होता है कि यूज़र इंटरफ़ेस (यूआई) में, स्क्रोल किए जा सकने वाले कॉन्टेंट में किए गए बदलावों को सही तरीके से दिखाया गया है.
स्क्रोल बैज दिखाना
DevTools फ़्रंटएंड में नया बैज जोड़ने के लिए, हमने ElementsTreeOutline में एक हैंडलर का तरीका बनाया है. इसमें, ऐसे एलिमेंट का nodeId मिला जिसकी वजह से किसी इवेंट के हिसाब से, स्क्रोल करने की स्थिति बदल गई थी.
उस हैंडलर में, हम nodeId का इस्तेमाल करके ElementsTreeElement ऑब्जेक्ट को वापस लाते हैं और उसे स्क्रोल बैज अपडेट करने का निर्देश देते हैं.
स्क्रोल बैज को अपडेट करने के लिए, यह जांचना ज़रूरी है कि एलिमेंट को स्क्रोल किया जा सकता है या नहीं. साथ ही, यह भी देखना ज़रूरी है कि उस पर पहले से कोई स्क्रोल बैज है या नहीं. इन शर्तों के आधार पर, ये कार्रवाइयां की जाती हैं:
- अगर एलिमेंट को स्क्रोल किया जा सकता है और उसमें अब तक स्क्रोल बैज नहीं है, तो एक बैज जोड़ा जाता है.
- अगर एलिमेंट को स्क्रोल नहीं किया जा सकता, लेकिन उसमें स्क्रोल बैज मौजूद है, तो मौजूदा बैज हटा दिया जाता है.
स्क्रोल किए जा सकने वाले टॉप लेवल दस्तावेज़ को मैनेज करने के लिए खास लॉजिक
जब टॉप-लेवल दस्तावेज़ स्क्रोल किया जा सकता है, तो हमारे पास एक खास मामला होता है. ऐसा इसलिए होता है, क्योंकि हम मुख्य दस्तावेज़ के लिए #document एलिमेंट नहीं दिखाते—सिर्फ़ iframes के लिए दिखाते हैं. इसलिए, हम सीधे #document एलिमेंट पर बैज नहीं दिखा सकते
हमने </html> एलिमेंट पर स्क्रोल बैज दिखाने का फ़ैसला लिया है. इसमें Quirks mode में मौजूद वे एलिमेंट भी शामिल हैं जहां document.scrollingElement(), <body> या null दिखाता है. इस फ़ैसले से, स्क्रोल किए जा सकने वाले दस्तावेज़ों और स्क्रोल किए जा सकने वाले बॉडी एलिमेंट के बीच भ्रम की स्थिति को रोका जा सकता है. खास तौर पर, उन पेजों पर जहां बॉडी को अलग से स्क्रोल किया जा सकता है.
हमें लगता है कि यह डेवलपर को यह दिखाने का सबसे आसान तरीका है कि किन एलिमेंट को स्क्रोल किया जा सकता है.
Chrome DevTools प्रोटोकॉल (सीडीपी) में हुए बदलाव
नया स्क्रोल बैज जोड़ने के लिए, Chrome DevTools Protocol (CDP) में बदलाव करना ज़रूरी था. सीडीपी, DevTools और Chrome के बीच कम्यूनिकेशन प्रोटोकॉल के तौर पर काम करता है.
हमें दो मामलों को कवर करने के लिए प्रोटोकॉल में बदलाव करना पड़ा:
- क्या DevTools में लोड होने पर, इस नोड को स्क्रोल किया जा सकता है?
- क्या इस नोड ने स्क्रोल करने की स्थिति को अपडेट कर दिया है?
क्या DevTools में लोड होने पर, इस नोड को स्क्रोल किया जा सकता है?
हमने DOM.Node डेटा टाइप में isScrollable नाम की एक नई प्रॉपर्टी जोड़ी है. यह प्रॉपर्टी, DevTools के फ़्रंटएंड में हर बार नया नोड लोड होने पर भेजी जाती है.
हमने इस प्रॉपर्टी को सिर्फ़ तब पॉप्युलेट करने का फ़ैसला लिया है, जब यह सही हो. इससे, ग़ैर-ज़रूरी डेटा लोड होने से बचा जा सकेगा. इसलिए, जब प्रॉपर्टी नहीं भेजी जाती है, तो हम यह मान लेते हैं कि एलिमेंट स्क्रोल नहीं किया जा सकता.
क्या इस नोड ने स्क्रोल किए जा सकने की स्थिति अपडेट की है?
यह पता लगाने के लिए कि किसी नोड ने स्क्रोल किए जा सकने वाले पेज की स्थिति अपडेट की है या नहीं, हमने सीडीपी पर एक नया इवेंट scrollableFlagUpdated लॉन्च किया. यह तब ट्रिगर होता है, जब कोई एलिमेंट स्क्रोल की जा सकने वाली जगह हासिल करता है या खो देता है. इवेंट का स्ट्रक्चर इस तरह का होता है:
# Fired when a node's scrollability state changes.
experimental event scrollableFlagUpdated
parameters
# The id of the node.
DOM.NodeId nodeId
# If the node is scrollable.
boolean isScrollable
अहम जानकारी: अपने ब्राउज़र में सीडीपी के नए बदलावों की जांच करें
अगर आपको यह जानना है कि Chrome, DevTools के साथ कैसे इंटरैक्ट करता है, तो इसे एक्सप्लोर करने का एक आसान तरीका है.
प्रोटोकॉल मॉनिटर पैनल की मदद से, Chrome और DevTools के बीच शेयर किए गए रीयल-टाइम इवेंट देखे जा सकते हैं. इनमें स्क्रोल बैज के लिए जोड़ा गया नया इवेंट भी शामिल है. उदाहरण के लिए, जब किसी ऐसे एलिमेंट की स्टाइल में बदलाव किया जाता है जिससे उसके स्क्रोल करने की सुविधा पर असर पड़ता है, तो उससे जुड़े CDP इवेंट तुरंत दिख सकते हैं.
ज़्यादा जानकारी के लिए, Protocol monitor: View and send CDP requests देखें.
स्क्रोल करने के अलावा और भी तरीके: पेश है ओवरफ़्लो बैज
इसके अलावा, हम एक नए ओवरफ़्लो बैज पर काम कर रहे हैं, ताकि स्क्रोल करने की वजह का पता लगाया जा सके. यह बैज उन एलिमेंट के बगल में दिखेगा जो अपने कंटेनर से ओवरफ़्लो होते हैं. इससे आपको लेआउट से जुड़ी समस्याओं को तुरंत पहचानने में मदद मिलेगी.
यह सुविधा इस तरह से काम करेगी:
- इंटरैक्टिव डीबगिंग. स्क्रोल बैज पर क्लिक करके, DevTools प्रोटोकॉल का वह निर्देश ट्रिगर करें जो ओवरफ़्लो होने वाले चाइल्ड एलिमेंट की पहचान करता है.
- ओवरफ़्लो को विज़ुअलाइज़ करना. हम स्क्रोल किए जा सकने वाले कंटेनर में एलिमेंट की सीमाओं को मैप करेंगे, ताकि किसी भी ओवरफ़्लो का पता लगाया जा सके.
- गड़बड़ी की वजह हाइलाइट करना. ओवरफ़्लो बैज इन ओवरफ़्लो एलिमेंट को फ़्लैग करेगा और इस पर क्लिक करने से, ये सीधे डीओएम में हाइलाइट हो जाएंगे.
इससे डेवलपर को एक नया और बेहतर टूल मिलेगा. इसकी मदद से, वे कॉन्टेंट के ओवरफ़्लो होने की वजह से लेआउट में होने वाली समस्याओं को समझ पाएंगे और उन्हें ठीक कर पाएंगे. हमें लगता है कि ज़्यादा बारीकी से किए गए इस विश्लेषण से, आपको डीबग करने के वर्कफ़्लो को आसानी से पूरा करने में मदद मिलेगी.