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

चैंगाओ हान
चैंगाओ हान
Twitter GitHub

हमने CSS ग्रिड टूलिंग क्यों बनाया?

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

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

टूलिंग डिज़ाइन

Chrome और Edge के बीच एक साथ काम करने की कोशिश

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

सुविधाओं का सारांश

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

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

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

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

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

ALT_TEXT_HERE

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

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

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

लिखे गए साइज़ बनाम कंप्यूट किए गए साइज़

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

.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 में अलग-अलग DOM ट्री एलिमेंट बनाने और मैनेज करने के लिए ज़िम्मेदार ElementsTreeElement क्लास को बैज कॉन्फ़िगर करने के लिए, कई नए सार्वजनिक तरीकों से अपडेट किया गया है. अगर किसी एलिमेंट के लिए एक से ज़्यादा बैज हैं, तो उन्हें बैज की कैटगरी के हिसाब से क्रम में लगाया जाता है. इसके बाद, अगर वे एक ही कैटगरी में हैं, तो उनके नाम वर्णमाला के हिसाब से क्रम में लगाए जाते हैं. उपलब्ध कैटगरी में Security, Layout वगैरह शामिल हैं और Grid, Layout कैटगरी में शामिल हैं.

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

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

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

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

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

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

लेआउट पैनल

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

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

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

# 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 फ़्रंटएंड को चालू करता है. इससे, किसी पेज में सीएसएस ग्रिड कंटेनर की सूची मिलती है. इस तरह, iframes और शैडो रूट में छेद किया जा सकता है और उन्हें लेआउट पैनल में रेंडर किया जा सकता है.

नतीजा

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

झलक दिखाने वाले चैनलों को डाउनलोड करना

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

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

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

  • crbug.com के ज़रिए हमें कोई सुझाव या सुझाव सबमिट करें.
  • DevTools में ज़्यादा विकल्प   ज़्यादा दिखाएं   > सहायता > DevTools से जुड़ी समस्याओं की शिकायत करें का इस्तेमाल करके, DevTools से जुड़ी समस्या की शिकायत करें.
  • @ChromeDevTool पर ट्वीट करें.
  • हमारे DevTools YouTube वीडियो या DevTools सलाह YouTube वीडियो में नया क्या है पर टिप्पणी करें.