DevTools में सीएसएस ग्रिड टूल

Changhao Han
Changhao Han
X GitHub

हमने सीएसएस ग्रिड टूलिंग क्यों बनाई?

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

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

टूल डिज़ाइन

यह Chrome और Edge का एक साथ इस्तेमाल है

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

सुविधाओं की खास जानकारी

सीएसएस ग्रिड टूल की तीन मुख्य सुविधाएं हैं:

  1. ग्रिड के हिसाब से, हमेशा दिखने वाला ओवरले, जो डाइमेंशन और ऑर्डर करने की जानकारी देने में मदद करता है
  2. डीओएम ट्री में बैज, जो सीएसएस ग्रिड कंटेनर को हाइलाइट करते हैं और ग्रिड ओवरले को टॉगल करते हैं
  3. एक साइडबार पैनल, जो डेवलपर को डीओएम ओवरले के डिसप्ले को अपनी पसंद के मुताबिक बनाने की सुविधा देता है. जैसे, नियमों का रंग और चौड़ाई बदलना
  4. स्टाइल पैनल में, सीएसएस ग्रिड एडिटर

आइए, इनके बारे में ज़्यादा जानते हैं.

ग्रिड परसिस्टेंट ओवरले

DevTools में ओवरले एक बेहतरीन टूल है, जो किसी एलिमेंट के लेआउट और स्टाइल की जानकारी देता है:

ALT_TEXT_HERE

यह अतिरिक्त जानकारी, आपके काम के एलिमेंट के ऊपर ओवरले की जाती है. पहले, DevTools खुला होने पर किसी ग्रिड पर कर्सर घुमाने पर, ओवरले में उसके बॉक्स मॉडल की जानकारी दिखती थी. हालांकि, कॉन्टेंट को हाइलाइट करने की सुविधा सिर्फ़ ग्रिड आइटम तक सीमित थी. साथ ही, इसकी वजह भी नहीं बताई जाती थी. हम सीएसएस ग्रिड ओवरले के लिए दो मुख्य हिस्से जोड़ना चाहते हैं:

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

आइए, देखें कि हमने दोनों को कैसे हासिल किया.

एडिट किए गए साइज़ बनाम कैलकुलेट किए गए साइज़

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

.grid-cards {
    display: grid;
    width: 200px;
    height: 300px;
    grid-template-rows: 20% 0.3fr 100px minmax(100px, auto);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

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

ALT_TEXT_HERE

बिंदु से पहले की स्ट्रिंग, एडिट की गई वैल्यू होती है. वहीं, बिंदु के बाद की स्ट्रिंग, कैलकुलेट की गई असल वैल्यू दिखाती है.

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

अब हम इस एपीआई का इस्तेमाल, ग्रिड ओवरले में, एडिट की गई वैल्यू दिखाने के लिए कर रहे हैं.

हमेशा दिखने वाले ओवरले

सीएसएस ग्रिड टूल का इस्तेमाल करने से पहले, DevTools में ओवरले आसान था: किसी एलिमेंट पर कर्सर घुमाते समय, DevTools के डीओएम ट्री पैनल में या सीधे जांच किए गए पेज पर कर्सर घुमाएं. आपको एक ओवरले दिखेगा, जिसमें इस एलिमेंट के बारे में जानकारी दी गई होगी. जब आप कर्सर को इससे बाहर ले जाते हैं, तो ओवरले गायब हो जाता है. हम ग्रिड ओवरले के लिए कुछ अलग करना चाहते थे: एक साथ कई ग्रिड हाइलाइट किए जा सकते हैं. साथ ही, ग्रिड ओवरले तब भी चालू रह सकते हैं, जब हॉवर करने पर दिखने वाले सामान्य ओवरले चालू हों.

उदाहरण के लिए:

ALT_TEXT_HERE

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

DevTools को यह कंट्रोल करने की अनुमति देने के लिए कि किन चीज़ों को हाइलाइट करना है, हमने ग्रिड पर हमेशा दिखने वाले ओवरले के लिए एक नया सीडीपी कमांड बनाया है:

# Highlight multiple elements with the CSS Grid overlay.
command setShowGridOverlays
  parameters
    # An array of node identifiers and descriptors for the highlight appearance.
    array of GridNodeHighlightConfig gridNodeHighlightConfigs

जहां हर GridNodeHighlightConfig में यह जानकारी होती है कि कौनसा नोड ड्रॉ करना है और उसे कैसे ड्रॉ करना है. इससे, हम एक से ज़्यादा आइटम वाला ऐसा तरीका जोड़ सकते हैं जो कर्सर घुमाने पर दिखने वाले मौजूदा व्यवहार को खराब किए बिना काम करता है.

रीयल-टाइम ग्रिड बैज

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

ALT_TEXT_HERE

डीओएम ट्री में बदलाव

हम DOM ट्री में सिर्फ़ Grid बैज नहीं दिखाना चाहते. इसलिए, हम बैज जोड़ने की प्रोसेस को ज़्यादा से ज़्यादा आसान बनाना चाहते हैं. DevTools में अलग-अलग डीओएम ट्री एलिमेंट बनाने और उन्हें मैनेज करने वाली क्लास ElementsTreeElement को, बैज कॉन्फ़िगर करने के लिए कई नए सार्वजनिक तरीकों के साथ अपडेट किया गया है. अगर किसी एलिमेंट के लिए एक से ज़्यादा बैज हैं, तो उन्हें बैज की कैटगरी के हिसाब से क्रम में लगाया जाता है. अगर वे एक ही कैटगरी में हैं, तो उनके नाम को वर्णमाला के क्रम में लगाया जाता है. उपलब्ध कैटगरी में Security, Layout वगैरह शामिल हैं और Grid, Layout कैटगरी से जुड़ा है.

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

हमें रीयल-टाइम में स्टाइल से जुड़े अपडेट कैसे मिले?

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

किसी एलिमेंट की स्टाइल अपडेट होने पर, फ़्रंट एंड को आसानी से इसकी जानकारी देने के लिए, हमने स्टाइल अपडेट की पोलिंग के लिए CDP का नया तरीका जोड़ा है. डीओएम नोड की स्टाइल से जुड़े अपडेट पाने के लिए, सबसे पहले हम ब्राउज़र को यह बताते हैं कि हम सीएसएस से जुड़े किस एलान को ट्रैक करना चाहते हैं. ग्रिड बैज के मामले में, हम ब्राउज़र से इनका ट्रैक रखने के लिए कहेंगे:

{
  "display": "grid",
  "display": "inline-grid",
}

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

लेआउट पैनल

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

कंप्यूट की गई स्टाइल के हिसाब से एलिमेंट ढूंढें

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

# Finds nodes with a given computed style in a subtree.
experimental command getNodesForSubtreeByStyle
  parameters
    # Node ID pointing to the root of a subtree.
    NodeId nodeId
    # The style to filter nodes by (includes nodes if any of properties matches).
    array of CSSComputedStyleProperty computedStyles
    # Whether or not iframes and shadow roots in the same target should be traversed when returning the
    # results (default is false).
    optional boolean pierce
  returns
    # Resulting nodes.
    array of NodeId nodeIds

इसकी मदद से, DevTools फ़्रंटएंड को किसी पेज में सीएसएस ग्रिड कंटेनर की सूची मिलती है. इस सूची में, iframe और शैडो रूट को ऐक्सेस किया जा सकता है और उन्हें लेआउट पैनल में रेंडर किया जा सकता है.

नतीजा

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

झलक वाले चैनल डाउनलोड करना

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

Chrome DevTools की टीम से संपर्क करना

DevTools से जुड़ी नई सुविधाओं, अपडेट या किसी भी अन्य चीज़ के बारे में चर्चा करने के लिए, यहां दिए गए विकल्पों का इस्तेमाल करें.