कुछ क्रॉस-ब्राउज़र DevTools विशेषताएँ जिन्हें आप नहीं जानते होंगे

मैं DevTools में बहुत समय बिताता हूँ, और मुझे यकीन है कि आप भी करते हैं। कभी-कभी मैं उनके बीच बाउंस भी करता हूं, खासकर जब मैं क्रॉस-ब्राउज़र मुद्दों को डीबग कर रहा हूं। DevTools स्वयं ब्राउज़रों की तरह है - एक ब्राउज़र के DevTools में सभी सुविधाएँ समान नहीं होंगी या किसी अन्य ब्राउज़र के DevTools में समर्थित नहीं होंगी।

लेकिन कुछ ऐसी DevTools विशेषताएं हैं जो इंटरऑपरेबल हैं, यहां तक ​​कि कुछ कम-ज्ञात विशेषताएं भी हैं जिन्हें मैं आपके साथ साझा करने वाला हूं।

संक्षिप्तता के लिए, मैं लेख में क्रोम, एज और ओपेरा जैसे सभी क्रोमियम-आधारित ब्राउज़रों को संदर्भित करने के लिए "क्रोमियम" का उपयोग करता हूं। उनमें से कई DevTools एक दूसरे के समान सटीक समान सुविधाएँ और क्षमताएँ प्रदान करते हैं, इसलिए उन सभी को एक साथ संदर्भित करने के लिए यह सिर्फ मेरा आशुलिपि है।

DOM ट्री में नोड खोजें

कभी-कभी DOM ट्री नोड्स में नेस्टेड नोड्स से भरा होता है जो अन्य नोड्स में नेस्टेड होते हैं, और इसी तरह। यह आपके द्वारा खोजे जा रहे सटीक को खोजने के लिए बहुत कठिन बना देता है, लेकिन आप DOM ट्री का उपयोग करके जल्दी से खोज सकते हैं Cmd + F (macOS) या Ctrl + F (खिड़कियाँ)।

इसके अतिरिक्त, आप एक मान्य CSS चयनकर्ता का उपयोग करके भी खोज सकते हैं, जैसे .red, या किसी XPath का उपयोग करना, जैसे //div/h1.

क्रोमियम ब्राउज़र में, फोकस स्वचालित रूप से उस नोड पर कूद जाता है जो आपके द्वारा टाइप किए जाने वाले खोज मानदंड से मेल खाता है, जो कि यदि आप लंबी खोज क्वेरी या एक बड़े DOM ट्री के साथ काम कर रहे हैं तो यह कष्टप्रद हो सकता है। सौभाग्य से, आप इस व्यवहार को शीर्षक से अक्षम कर सकते हैं सेटिंग (F1) → प्राथमिकताएँ → वैश्विक → टाइप करते ही सर्च करें → अक्षम.

आपके द्वारा DOM ट्री में नोड का पता लगाने के बाद, आप नोड पर राइट-क्लिक करके और "दृश्य में स्क्रॉल करें" का चयन करके नोड को व्यूपोर्ट में लाने के लिए पृष्ठ को स्क्रॉल कर सकते हैं।

कंसोल से नोड्स एक्सेस करें

DevTools DOM नोड को सीधे कंसोल से एक्सेस करने के लिए कई अलग-अलग तरीके प्रदान करता है।

उदाहरण के लिए, आप उपयोग कर सकते हैं $0 DOM ट्री में वर्तमान में चयनित नोड तक पहुँचने के लिए। क्रोमियम ब्राउज़र आपको ऐतिहासिक चयन के रिवर्स कालानुक्रमिक क्रम में चयनित नोड्स तक पहुँचने की अनुमति देकर इसे एक कदम आगे ले जाते हैं, $1, $2, $3, आदि

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

यहाँ कंसोल से सीधे DOM नोड तक पहुँचने का एक और तरीका है: एक अस्थायी चर के रूप में। यह विकल्प नोड पर राइट क्लिक करके और एक विकल्प का चयन करके उपलब्ध है। प्रत्येक ब्राउज़र के DevTools में उस विकल्प को अलग तरह से लेबल किया गया है:

• क्रोमियम: राइट क्लिक → "वैश्विक चर के रूप में स्टोर करें"
• Firefox: राइट क्लिक → "कंसोल में प्रयोग करें"
• Safari: राइट क्लिक → "लॉग एलिमेंट"

बैज के साथ तत्वों की कल्पना करें

DevTools नोड के बगल में एक बैज प्रदर्शित करके कुछ गुणों से मेल खाने वाले तत्वों की कल्पना करने में सहायता कर सकता है। बैज क्लिक करने योग्य होते हैं, और विभिन्न ब्राउज़र विभिन्न प्रकार के बैज प्रदान करते हैं।

In Safari, एलिमेंट्स पैनल टूलबार में एक बैज बटन होता है जिसका उपयोग विशिष्ट बैज की दृश्यता को टॉगल करने के लिए किया जा सकता है। उदाहरण के लिए, यदि किसी नोड में a display: grid or display: inline-grid सीएसएस घोषणा उस पर लागू होती है, ए grid इसके आगे बैज प्रदर्शित होता है। बैज पर क्लिक करने से पेज पर ग्रिड एरिया, ट्रैक साइज, लाइन नंबर और बहुत कुछ हाइलाइट हो जाएगा।

बैज जो वर्तमान में समर्थित हैं Firefoxके DevTools Firefox में सूचीबद्ध हैं स्रोत डॉक्स। उदाहरण के लिए, ए scroll बिल्ला स्क्रॉल करने योग्य तत्व को इंगित करता है। बैज पर क्लिक करने से अतिप्रवाह उत्पन्न करने वाले तत्व पर प्रकाश पड़ता है overflow उसके बगल में बिल्ला।

In क्रोमियम ब्राउज़र, आप किसी भी नोड पर राइट-क्लिक कर सकते हैं और चयन कर सकते हैं "बैज सेटिंग ..." एक ऐसा कंटेनर खोलने के लिए जिसमें सभी उपलब्ध बैज की सूची हो। उदाहरण के लिए, तत्वों के साथ scroll-snap-type एक होगा scroll-snap इसके आगे बैज है, जिसे क्लिक करने पर टॉगल हो जाएगा scroll-snap उस तत्व पर ओवरले।

स्क्रीनशॉट लेना

अभी कुछ समय से हम कुछ DevTools से स्क्रीनशॉट लेने में सक्षम हैं, लेकिन अब यह उन सभी में उपलब्ध है और इसमें फुल-पेज शॉट लेने के नए तरीके शामिल हैं।

प्रक्रिया उस DOM नोड पर राइट-क्लिक करके शुरू होती है जिसे आप कैप्चर करना चाहते हैं। फिर नोड को कैप्चर करने के विकल्प का चयन करें, जिसे आपके द्वारा उपयोग किए जा रहे DevTools के आधार पर अलग-अलग लेबल किया गया है।

पर समान चरणों को दोहराएं html एक पूरे पृष्ठ का स्क्रीनशॉट लेने के लिए नोड। जब आप करते हैं, हालांकि, यह ध्यान देने योग्य है कि सफारी तत्व की पृष्ठभूमि के रंग की पारदर्शिता को बरकरार रखता है - क्रोमियम और फ़ायरफ़ॉक्स इसे एक सफेद पृष्ठभूमि के रूप में कैप्चर करेंगे।

एक और विकल्प है! आप पृष्ठ का "प्रतिक्रियाशील" स्क्रीनशॉट ले सकते हैं, जो आपको विशिष्ट व्यूपोर्ट चौड़ाई पर पृष्ठ को कैप्चर करने की अनुमति देता है। जैसा कि आप उम्मीद कर सकते हैं, प्रत्येक ब्राउज़र के पास वहां पहुंचने के अलग-अलग तरीके हैं।

• क्रोमियम: Cmd + Shift + M (macOS) या Ctrl + Shift + M (खिड़कियाँ)। या "निरीक्षण" आइकन के बगल में स्थित "डिवाइस" आइकन पर क्लिक करें।
• Firefox: टूल्स → ब्राउज़र टूल्स → "रिस्पॉन्सिव डिज़ाइन मोड"
• Safari: विकसित करें → "उत्तरदायी डिजाइन मोड दर्ज करें"

क्रोम टिप: शीर्ष परत का निरीक्षण करें

Chrome आपको डायलॉग, अलर्ट या मोडल जैसे शीर्ष-परत तत्वों की कल्पना करने और उनका निरीक्षण करने देता है। जब कोई तत्व जोड़ा जाता है #top-layer, यह एक हो जाता है top-layer इसके बगल में स्थित बैज, जिस पर क्लिक करने पर, आप इसके ठीक बाद स्थित शीर्ष-परत कंटेनर में चले जाते हैं </html> टैग।

में तत्वों का क्रम top-layer कंटेनर स्टैकिंग क्रम का पालन करता है, जिसका अर्थ है कि अंतिम शीर्ष पर है। क्लिक करें reveal नोड पर वापस जाने के लिए बिल्ला।

फ़ायरफ़ॉक्स टिप: आईडी पर जाएं

फ़ायरफ़ॉक्स आईडी विशेषता को संदर्भित करने वाले तत्व को उसी डोम में अपने लक्षित तत्व से जोड़ता है और इसे एक रेखांकन के साथ हाइलाइट करता है। उपयोग CMD + Click (macOS) या CTRL + Click (विंडोज़)) पहचानकर्ता के साथ लक्ष्य तत्व पर जाने के लिए।

ऊपर लपेटकर

काफी कुछ, है ना? यह आश्चर्यजनक है कि क्रोमियम, फ़ायरफ़ॉक्स और सफारी में समान रूप से समर्थित कुछ अविश्वसनीय रूप से उपयोगी DevTools सुविधाएँ हैं। क्या कोई अन्य कम-ज्ञात विशेषताएं हैं जो तीनों द्वारा समर्थित हैं जो आपको पसंद हैं?

जो कुछ नया है उसके बारे में सबसे ऊपर रहने के लिए मेरे पास कुछ संसाधन हैं। मैंने सोचा कि मैं उन्हें यहां साझा करूंगा:

• एसईओ संचालित सामग्री और पीआर वितरण। आज ही प्रवर्धित हो जाओ।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। यहां पहुंचें।
• स्रोत: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/