🎤 👤 🛣️ मेरा पसंदीदा क्रोम डेवलपर टूल 👨‍❤️‍👨 🍃 🍑

शुभ दिन, दोस्तों!

Chrome डेवलपर टूल वेब एप्लिकेशन विकसित करने के लिए एक बहुत शक्तिशाली टूलकिट है। इन टूल्स का उपयोग करके, हम DOM को नेविगेट कर सकते हैं, सर्वर रिक्वेस्ट, ट्यून एप्लिकेशन परफॉर्मेंस आदि

को देख सकते हैं। कई उपलब्ध सुविधाओं में, वास्तव में कई दिलचस्प हैं। इन "सुविधाओं" से एक या दो क्लिक कम करने में मदद मिलती है - क्या यह नहीं है कि हम यहां क्यों एकत्र हुए?

DOM को एक्सेस करने के लिए JQuery स्टाइल

jQuery एक बहुत बढ़िया लाइब्रेरी है। वह पूरे युग के लिए वेब का प्रबंधन कर रही है। कुछ रिपोर्टों के अनुसार , दुनिया में सबसे लोकप्रिय वेबसाइटों में से 70% से अधिक jQuery के इस या उस संस्करण का उपयोग करते हैं। 2006 में लिखी गई लाइब्रेरी के लिए यह एक अद्भुत उपलब्धि है।

JQuery द्वारा प्रदान की जाने वाली सबसे लोकप्रिय एपीआई $ है, जिसका उपयोग DOM तत्वों का चयन करने के लिए किया जाता है। Chrome डेवलपर टूल कंसोल में (बाद में कंसोल के रूप में संदर्भित), $ चयनकर्ता का उपयोग करना संभव है, जो document.querySelector () का एक उपनाम है।

उदाहरण के लिए, एक बटन पर क्लिक करने के लिए, आपको निम्न कार्य करने की आवश्यकता है:

$$ document.querySelectorAll () के लिए एक पर्याय है:

$ के साथ काम करने के लिए कुछ और तरकीबें हैं। कभी-कभी चयनकर्ता मैन्युअल रूप से टाइप करने के लिए बहुत जटिल है, या हम बस चयनकर्ता की पर्याप्त विशिष्टता निर्धारित नहीं कर सकते हैं। यदि हम "एलिमेंट्स" टैब में एक तत्व चुनते हैं, तो हम इसे $ 0 चर का उपयोग करके कंसोल में प्राप्त कर सकते हैं:

वास्तव में, कंसोल आपको अंतिम 5 चयनित तत्वों तक पहुंचने की अनुमति देता है। ये तत्व क्रमशः चर $ 0- $ 4 के माध्यम से उपलब्ध हैं:

आइटम गुणों की प्रतिलिपि बनाएँ

एलिमेंट्स टैब बहुत उपयोगी है। यह हमारी साइट के DOM ट्री को संग्रहीत करता है, जिससे आप तत्वों की शैलियों को देख सकते हैं और मक्खी पर उनमें परिवर्तन कर सकते हैं।

वास्तव में शांत चीज जो मैंने खोजी थी वह संदर्भ मेनू का उपयोग करके किसी तत्व के गुणों (और न केवल) की नकल करने की क्षमता है।

उदाहरण के लिए, आप एक तत्व चयनकर्ता को कॉपी कर सकते हैं:

यह चयनकर्ता पर्याप्त या बहुत विशिष्ट नहीं हो सकता है, लेकिन यह कोड को वैसे भी डीबग करने में मदद करता है।

जैसा कि आप देख सकते हैं, हम तत्व शैलियों, "पथ" JS (document.querySelector (SELECTOR)) या XPath को भी कॉपी कर सकते हैं।

नेटवर्क अनुरोध फ़िल्टरिंग

कभी-कभी हमें सर्वर के लिए बहुत सारे अनुरोध भेजने वाले पृष्ठ के साथ काम करना पड़ता है। मेरा मतलब है, बहुत सारे अनुरोध।

एक विशिष्ट अनुरोध की तलाश में इन विल्ड्स के माध्यम से वैडिंग एक सुखद व्यवसाय नहीं है। सौभाग्य से, आप प्रश्नों को फ़िल्टर कर सकते हैं।

फ़िल्टर का एक सेट आपको टाइप करके प्रश्नों को प्रदर्शित करने की अनुमति देता है, उदाहरण के लिए, XHR / Fetch, स्टाइल शीट, JS स्क्रिप्ट, चित्र, आदि।

आप फ़िल्टर के ऊपर स्थित इनपुट फ़ील्ड में अपने स्वयं के मानदंड भी निर्दिष्ट कर सकते हैं:

विभिन्न नेटवर्क कनेक्शन गति का अनुकरण

"नेटवर्क" टैब का उपयोग करके, हम विभिन्न कनेक्शन गति की स्थितियों में हमारी साइट का परीक्षण कर सकते हैं। डिफ़ॉल्ट ऑनलाइन पर सेट है, जिसमें आप अपने कनेक्शन की बैंडविड्थ का पूरा आनंद लेते हैं।

ऑनलाइन के अलावा, फास्ट 3 जी, स्लो 3 जी और ऑफलाइन जैसे "प्रीसेट" उपलब्ध हैं, जो पेज लोड गति, फ़ाइल डाउनलोड गति और समय देरी में भिन्न हैं। यदि आपको कुछ और अनुकरण करने की आवश्यकता है, तो आप अपनी खुद की प्रोफाइल जोड़ने के लिए Add ... बटन का उपयोग कर सकते हैं:

कंसोल में लाइव एक्सप्रेशंस का उपयोग करना

लाइव एक्सप्रेशन क्या हैं?

लाइव एक्सप्रेशन ऐसी अभिव्यक्तियाँ हैं जो कंसोल में लगातार "मूल्यांकन" की जाती हैं। मान लीजिए कि आप किसी वैरिएबल के मान को ट्रैक करना चाहते हैं। आप इसे बार-बार दर्ज कर सकते हैं:

लाइव एक्सप्रेशंस के लिए धन्यवाद, आप कोड पर ध्यान केंद्रित कर सकते हैं और क्रोम को स्वतंत्र रूप से परिवर्तनों की निगरानी करने की अनुमति दे सकते हैं:

यह सुविधा कंसोल में घोषित दोनों चर और स्क्रिप्ट में घोषित चर के लिए उपलब्ध है।

विभिन्न उपकरणों का अनुकरण करें

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

मैं यहां मीडिया के सवालों के बारे में बात करने के लिए नहीं हूं, बल्कि उनके काम को परखने का तरीका दिखा रहा हूं।

यदि आप टैबलेट और फोन की तरह दिखने वाले बटन पर क्लिक करते हैं, तो आप देखेंगे कि विभिन्न उपकरणों के आकार के अनुसार ब्राउज़र देखने का क्षेत्र कैसे बदलता है।

आप iPhone, iPad Pro, Pixel 2, Pixel 2 XL, आदि जैसे लोकप्रिय उपकरणों वाले प्रीसेट की सूची से एक डिवाइस का चयन कर सकते हैं। यह सूची पूरी तरह से (बहुत प्रासंगिक नहीं) से दूर है, लेकिन यह अधिकांश समस्याओं को हल करने के लिए काफी है।

यदि आपके पास आवश्यक उपकरण सूचीबद्ध नहीं है, तो आप मैन्युअल रूप से रिज़ॉल्यूशन सेट कर सकते हैं। जैसा कि आप देख सकते हैं, मैंने वनप्लस 6 (मेरे रोजमर्रा के गैजेट) का अनुकरण करने की अपनी अनुमति निर्धारित की है:

आइटम स्थिति बदलें

क्या आप ऐसी स्थिति में आए हैं, जब आप किसी तत्व पर लागू शैलियों के साथ खेलना चाहते हैं जब आप उस पर मंडराते हैं: (होवर), लेकिन हर बार जब आप कर्सर को शैलियों टैब पर ले जाते हैं, तो तत्व अपना होवर खो देता है?

डेवलपर उपकरण आपको एक तत्व की स्थिति को ठीक करने की अनुमति देते हैं। हम जैसे: सक्रिय ,: होवर ,: फ़ोकस ,: फ़ोकस-भीतर और: विज़िट किए गए राज्यों को आसानी से सक्षम / अक्षम कर सकते हैं:

यहां मेरे पसंदीदा Chrome डेवलपर टूल हैं। ध्यान देने के लिए धन्यवाद।

हैप्पी कोडिंग!

मेरा पसंदीदा क्रोम डेवलपर टूल