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 के फ़्रंटएंड में हर बार कोई नया नोड लोड होने पर भेजी जाती है.
हमने इस प्रॉपर्टी को सिर्फ़ तब पॉप्युलेट करने का फ़ैसला लिया है, जब यह सही हो. इससे, ग़ैर-ज़रूरी डेटा लोड होने से बचा जा सकेगा. इसलिए, जब प्रॉपर्टी नहीं भेजी जाती है, तो हम यह मान लेते हैं कि एलिमेंट स्क्रोल नहीं किया जा सकता.
क्या इस नोड ने स्क्रोल किए जा सकने की स्थिति अपडेट की है?
किसी नोड के स्क्रोल किए जा सकने की स्थिति अपडेट होने का पता लगाने के लिए, हमने CDP में एक नया इवेंट 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 प्रोटोकॉल का वह निर्देश ट्रिगर करें जो ओवरफ़्लो होने वाले चाइल्ड एलिमेंट की पहचान करता है.
- ओवरफ़्लो को विज़ुअलाइज़ करना. हम स्क्रोल किए जा सकने वाले कंटेनर में एलिमेंट की सीमाओं को मैप करेंगे, ताकि किसी भी ओवरफ़्लो का पता लगाया जा सके.
- समस्या की वजह को हाइलाइट करना. ओवरफ़्लो बैज, ओवरफ़्लो वाले इन एलिमेंट को फ़्लैग करेगा. साथ ही, इस पर क्लिक करने से, उन्हें सीधे डीओएम में हाइलाइट किया जाएगा.
इससे डेवलपर को एक नया और बेहतर टूल मिलेगा. इसकी मदद से, वे कॉन्टेंट के ओवरफ़्लो होने की वजह से लेआउट में होने वाली समस्याओं को समझ पाएंगे और उन्हें ठीक कर पाएंगे. हमें लगता है कि ज़्यादा बारीकी से किए गए इस विश्लेषण से, आपको डीबग करने के वर्कफ़्लो को आसानी से पूरा करने में मदद मिलेगी.