विकास दक्षता अधिकतम करें: क्रॉस-ब्राउज़र DevTools सुविधाओं का लाभ उठाएं

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

Chrome, Firefox, और Edge जैसे प्रमुख ब्राउज़र लगातार अपने डेवलपर टूल्स को अपडेट करते हैं, प्रत्येक अपडेट के साथ वेब डेवलपर्स के लिए संभावित रूप से नई सुविधाएं आती हैं। ये नई सुविधाएं सहज UI, अधिक उन्नत डिबगिंग, और उन्नत प्रदर्शन विश्लेषण टूल्स जोड़कर उपयोग में आसानी बढ़ाती हैं।

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

विषय सूची

• DevTools में स्क्रॉल इनटू व्यू का उपयोग कैसे करें
• DevTools में कंसोल शॉर्टकट्स का उपयोग कैसे करें
• DevTools में वेबसाइट टेस्टिंग के लिए रिसोर्स रिक्वेस्ट ब्लॉक कैसे करें
• DevTools में नेटवर्क रिक्वेस्ट एडिट और रीसेंड कैसे करें
• DevTools में अनयूज्ड सोर्स कोड का पता कैसे लगाएं
• DevTools में एक्सेसिबिलिटी ट्री कैसे सक्षम करें
• सारांश

इस लेख में, हम कुछ अच्छी क्रॉस-ब्राउज़र DevTools सुविधाओं की खोज करेंगे और चर्चा करेंगे कि उनका उपयोग कैसे करें।

आइए शुरू करें!

DevTools में स्क्रॉल इनटू व्यू का उपयोग कैसे करें

डिबगिंग करते समय, यह पता लगाने के लिए बहुत सारे HTML नोड्स हो सकते हैं कि आपका मुद्दा कहां है। ज्यादातर समय, जब आप नोड ढूंढते हैं, तो आप इसे तब तक नहीं देख पाएंगे जब तक आप पेज पर जहां यह है वहां स्क्रॉल नहीं करते।

स्क्रॉल इनटू व्यू सुविधा DOM नोड को व्यूपोर्ट में आसानी से लाती है Chrome, Firefox, और Edge में राइट-क्लिक करके और स्क्रॉल इनटू व्यू का चयन करके।

यह सुविधा CSS मुद्दों को डिबग करते समय या पेज पर तत्वों के सही स्थान को सत्यापित करना चाहते हैं तो बहुत समय बचाती है, यह सुनिश्चित करते हुए कि आप मैन्युअल रूप से सामग्री की कई पंक्तियों के माध्यम से स्क्रॉल किए बिना HTML नोड्स के माध्यम से पेज पर तत्वों को तुरंत ढूंढ सकते हैं।

नीचे दी गई छवि में, हम एक h2 तत्व को खोजने की कोशिश कर रहे हैं जो कई अन्य तत्वों की परतों के अंदर नेस्टेड है।

ऊपर की छवि में, पूरे पेज को स्क्रॉल करके h2 तत्व को खोजने के बजाय, हमने राइट-क्लिक किया और स्क्रॉल इनटू व्यू सुविधा का उपयोग करके h2 तत्व को तुरंत व्यू में लाया। हम इस सुविधा का विस्तार उस तत्व के साथ अन्य चीजें करने के लिए कर सकते हैं जब हम उस तक स्क्रॉल कर चुके हों। हम स्टाइल्स पैनल के माध्यम से रीयल-टाइम में CSS प्रॉपर्टीज को ट्वीक कर सकते हैं और यहां तक कि लेआउट मुद्दों को ढूंढ और ठीक कर सकते हैं।

DevTools में कंसोल शॉर्टकट्स का उपयोग कैसे करें

बहुत सारे शॉर्टकट्स हैं जिनका उपयोग कंसोल में किया जा सकता है जो आपको, डेवलपर के रूप में, तेजी से डिबग करने की अनुमति देते हैं। उनमें से एक है $_ शॉर्टकट। यह शॉर्टकट कंसोल द्वारा मूल्यांकन किए गए सबसे हालिया एक्सप्रेशन का मान लौटाता है। मान लीजिए, उदाहरण के लिए, हमारे पास एक मल्टीप्लायर फंक्शन है:

नीचे दी गई छवि में, आप देख सकते हैं कि $_ शॉर्टकट का उपयोग ब्राउज़र कंसोल में एक विशेष वेरिएबल के रूप में कैसे किया जाता है ताकि सबसे हाल ही में मूल्यांकन किए गए एक्सप्रेशन को स्टोर किया जा सके:

$_ शॉर्टकट के बिना, आपको या तो पूरे फंक्शन कॉल को रीटाइप करना होगा या आप परिणाम को इस तरह एक वेरिएबल में स्टोर कर सकते हैं:

let result = multiply(5) result(4) // 20 लौटाता है

ऊपर के कोड में, multiply(5) फंक्शन को एक फंक्शन लौटाना होता है और फंक्शन को result को असाइन करना होता है, जिसे फिर 4 पैरामीटर के साथ result(4) कहा जाता है।

मुझे यकीन है कि आप देख सकते हैं कि यह पहले से ही कुछ रिडंडेंसी और अतिरिक्त चरणों को पेश करता है जो अधिक जटिल संचालन या गणना के कई चरणों से निपटने पर बोझिल हो सकते हैं। यहीं $_ शॉर्टकट चमकता है। जब हम कंसोल में multiply(5) कोड चलाते हैं, तो एक फंक्शन लौटाया जाता है और कंसोल द्वारा $_ वेरिएबल में स्टोर किया जाता है, जिसे हम $_ शॉर्टकट का उपयोग करके एक्सेस कर सकते हैं।

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

$0 एक शॉर्टकट है जो कंसोल में वर्तमान में चयनित तत्व को संदर्भित करता है, इसलिए आप इसे कंसोल में सीधे मैनिपुलेट कर सकते हैं बिना इसे फिर से चुनने के लिए क्वेरी लिखे।

नीचे दिया गया स्क्रीनशॉट दिखाता है कि हम कंसोल में $0 का उपयोग करके DOM ट्री में चयनित नोड को एक्सेस कर सकते हैं और बैकग्राउंड कलर को जो चाहें बदल सकते हैं।

ऊपर की छवि से, हमने एलिमेंट्स पैनल में वांछित तत्व का निरीक्षण करके शुरू किया। अब, document.querySelector('#element') का उपयोग करके तत्व को फिर से क्वेरी करने के बजाय, आप इसे सीधे ऐसे मैनिपुलेट कर सकते हैं:

$0.style.backgroundColor = 'lightblue';

यह कोड चयनित <div> के बैकग्राउंड कलर को एक सौम्य लाइट ब्लू में बदल देता है। जो वास्तव में इस मामले में $0 को उपयोगी बनाता है वह यह है कि यह आपको DOM में आपके द्वारा चुने गए सटीक तत्व को सीधे संदर्भित करने की अनुमति देता है, यह सुनिश्चित करते हुए कि आप सही तत्व के साथ काम कर रहे हैं, यहां तक कि उन मामलों में भी जहां तत्व डायनामिक रूप से उत्पन्न होते हैं या गहराई से नेस्टेड होते हैं।

DevTools में वेबसाइट टेस्टिंग के लिए रिसोर्स रिक्वेस्ट ब्लॉक कैसे करें

ब्लॉक रिसोर्स रिक्वेस्ट DevTools सुविधा वेब डेवलपर्स के लिए एक महत्वपूर्ण सुविधा है यह टेस्ट करने के लिए कि उनकी वेबसाइटें कैसे व्यवहार करती हैं जब विशिष्ट संसाधन लोड नहीं हो सकते।

यह सुविधा आपको उन स्थितियों का अनुकरण करने में सक्षम बनाती है जहां एक छवि, JavaScript, CSS, या एक संपूर्ण डोमेन अनुपलब्ध हो जाता है, और आप देख सकते हैं कि उस स्थिति में आपका वेबपेज कैसे व्यवहार करेगा।

ब्राउज़र द्वारा अनुरोधित संसाधनों के डाउनलोड होने की गारंटी नहीं होती, जो आपकी वेबसाइट के उपयोगकर्ताओं के लिए अप्रत्याशित अनुभवों का कारण बन सकता है। आप Chrome, Firefox, और Edge पर किसी संसाधन के अनुरोधों को ब्लॉक कर सकते हैं और टेस्ट कर सकते हैं कि आपकी साइट कैसे व्यवहार करती है।

Chrome और Edge पर:

• नेटवर्क पैनल पर, उस संसाधन पर राइट-क्लिक करें जिसे आप ब्लॉक करना चाहते हैं और Block request URL चुनें।
• वेबसाइट रीफ्रेश करें, और ब्लॉक किया गया संसाधन डाउनलोड नहीं होगा और वेबपेज को प्रभावित नहीं करेगा।

नीचे दी गई छवि में, हम CSS रिक्वेस्ट को ब्लॉक करने और यह देखने के लिए नेटवर्क टैब में Block request URL विकल्प का उपयोग कर रहे हैं कि यदि चयनित CSS फ़ाइल लोड होने में विफल होती है तो वेब पेज कैसा दिखेगा।

ऊपर की छवि से, हम वेबपेज द्वारा किए गए सभी नेटवर्क अनुरोधों को देख सकते हैं जिनमें छवियों, CSS फ़ाइलों, JavaScript फ़ाइलों, और इसी तरह के अनुरोध शामिल हैं। मेरे मामले में मैंने केवल CSS फ़ाइलों को दिखाने के लिए फ़िल्टर किया है।

यहां से, आप नेटवर्क पैनल में CSS फ़ाइल पर राइट-क्लिक कर सकते हैं और Block request URL चुन सकते हैं। यह क्रिया अगली बार पेज रीफ्रेश होने पर ब्राउज़र को विशिष्ट CSS फ़ाइल लोड करने से रोकेगी।

अनुरोध को ब्लॉक करके, हम अजीब व्यवहारों पर नजर रख सकते हैं और यह भी माप सकते हैं कि ब्लॉक किए गए संसाधन की अनुपस्थिति पेज लोड समय और प्रदर्शन को कैसे प्रभावित कर सकती है।

Firefox पर:

• नेटवर्क पैनल पर, उस संसाधन पर राइट-क्लिक करें जिसे आप ब्लॉक करना चाहते हैं और Block URL चुनें।
• पेज रीलोड करें।

मैंने इसका उपयोग यह टेस्ट करने के लिए किया है कि जब मैं किसी विशेष JavaScript फ़ाइल को लोड नहीं करता तो मेरी साइट कैसे व्यवहार करती है। यह सुविधा डेवलपर्स को उन मुद्दों को डिबग करने में मदद कर सकती है जो तब उत्पन्न हो सकते हैं जब उपयोगकर्ता JavaScript अक्षम करते हैं।

DevTools में नेटवर्क रिक्वेस्ट एडिट और रीसेंड कैसे करें

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

नेटवर्क अनुरोध करते समय, बैकएंड सेवा को किए गए अनुरोध विफल हो सकते हैं या इच्छित डेटा के साथ प्रतिक्रिया नहीं दे सकते। पूरे पेज को रीलोड करके अनुरोध को पुनः प्रयास करना दर्दनाक होता है, इसलिए एडिट और रीसेंड सुविधा सहायक होती है।

Edge और Firefox ब्राउज़र में, आप जिस अनुरोध को एडिट या रीसेंड करना चाहते हैं उस पर राइट-क्लिक करके और एडिट और रीसेंड का चयन करके नेटवर्क अनुरोध को एडिट और रीसेंड कर सकते हैं, ठीक नीचे दी गई छवि की तरह।

ऊपर की छवि में, हमने एक वेबसाइट में लॉग इन करने का प्रयास किया। जब कोई उपयोगकर्ता अपनी क्रेडेंशियल्स सबमिट करता है, तो फॉर्म यूजर के उपयोगकर्ता नाम और पासवर्ड के साथ एक API एंडपॉइंट, /auth/login, पर एक POST अनुरोध भेजता है।

कभी-कभी, सर्वर 400 बैड रिक्वेस्ट त्रुटि लौटा सकता है, और हमारे लिए त्रुटि को डिबग करने और यह पता लगाने के लिए कि क्यों, हमें अनुरोध को पुनः प्रयास करना होगा। हम फॉर्म को बार-बार भरते नहीं रहना चाहते, इसलिए हम नीचे दिखाए अनुसार एडिट और रीसेंड सुविधा का उपयोग करते हैं।

ऊपर की छवि नेटवर्क कंसोल या एक साइडबार है जो एडिट और रीसेंड पर क्लिक करने पर खुलेगा, जिसमें अनुरोध का विवरण दिखाया गया है। यहां, आप एडिट कर सकते हैं:

• URL: यदि आवश्यक हो, तो आप URL को संशोधित कर सकते हैं या क्वेरी पैरामीटर्स जोड़ सकते हैं।
• हेडर्स: आप एक गुम या गलत Content-Type हेडर देख सकते हैं, जिसे आप यहां ठीक कर सकते हैं।
• बॉडी: यह वह जगह है जहां आप पेलोड को समायोजित कर सकते हैं, जैसे उपयोगकर्ता नाम या पासवर्ड फ़ील्ड को सही करना।

Chrome ब्राउज़र में, एडिट और रीसेंड सुविधा केवल XHR अनुरोधों के लिए काम करती है, और आप इसका उपयोग अनुरोध पर राइट-क्लिक करके और रीप्ले का चयन करके कर सकते हैं।

DevTools में अनयूज्ड सोर्स कोड का पता कैसे लगाएं

DevTools में कवरेज टूल डेवलपर्स को उनके JavaScript और CSS फ़ाइलों के उन क्षेत्रों को देखने में सक्षम बनाता है जो वेबपेज के लोडिंग और इंटरैक्शन चरणों के दौरान अनयूज्ड रहते हैं। यह फ़ाइल आकार को कम करके और तेज पेज लोड समय और बेहतर उपयोगकर्ता अनुभव के लिए अनावश्यक कोड को समाप्त करके वेब प्रदर्शन बढ़ाने के लिए एक महत्वपूर्ण सुविधा है।

अनयूज्ड JS और CSS कोड को हटाना अपने उपयोगकर्ताओं की बैंडविड्थ बचाने का एक शानदार तरीका है। कवरेज टूल आपको अपने सोर्स कोड में अनयूज्ड कोड ढूंढने की अनुमति देता है, और या तो इसे हटा दें या इसे तब तक स्थगित करें जब तक कोड का वह टुकड़ा आवश्यक न हो।

Chrome और Edge पर:

• DevTools में, Ctrl/cmd+Shift+P दबाएं, कवरेज टाइप करें और स्टार्ट इंस्ट्रूमेंटिंग कवरेज चुनें, पेज रीफ्रेश करें, फिर एंटर दबाएं।
• आप JS और CSS फ़ाइलों की एक टेबल देखेंगे जिसमें एक अनयूज्ड बाइट कॉलम होगा।
• किसी भी फ़ाइल पर क्लिक करके इसे खोलें। साइड की लाइन इंगित करती है कि कोड का कौन सा भाग लाल रंग में अनयूज्ड है।

नीचे दी गई छवि में, हम संभावित रूप से कोड को हटाने या लोडिंग को स्थगित करने के लिए अनयूज्ड CSS कोड की पहचान कर रहे हैं।

ऊपर की छवि से, रिकॉर्डिंग पूरी होने के बाद, कवरेज टूल पेज द्वारा लोड की गई CSS और JavaScript फ़ाइलों की एक सूची प्रदर्शित करेगा, साथ में विस्तृत मेट्रिक्स:

• कुल बाइट्स: फ़ाइल का आकार।
• अनयूज्ड बाइट्स: फ़ाइल में उन बाइट्स की संख्या जो उपयोग नहीं की गईं।
• उपयोग विज़ुअलाइज़ेशन: उपयोग किए गए बनाम अनयूज्ड कोड के अनुपात को दर्शाने वाला एक विज़ुअल बार।

Safari पर: Sources पैनल में, लेफ्ट नेविगेशन साइडबार खोलें और किसी भी JS फ़ाइल पर क्लिक करें। टूलबार के टॉप राइट पर, कवरेज आइकन c पर क्लिक करें और अपना पेज रीफ्रेश करें। आप देख पाएंगे कि निष्पादित नहीं किए गए कोड के अनुभाग ग्रे आउट हो गए हैं।

DevTools में एक्सेसिबिलिटी ट्री कैसे सक्षम करें

एक्सेसिबिलिटी ट्री एलिमेंट DOM ट्री के समान है और स्क्रीन रीडर्स जैसी सहायक तकनीकों द्वारा वेब कंटेंट पढ़ने के लिए उपयोग किया जाता है। डेवलपर्स इस सुविधा का उपयोग अपनी वेबसाइटों पर एक्सेसिबिलिटी मुद्दों को डिबग करने के लिए कर सकते हैं। Chromium ब्राउज़र Chrome के एक्सेसिबिलिटी API का उपयोग करके इसे संभव बनाते हैं, जबकि Firefox का अपना एक्सेसिबिलिटी टूल है।

Chrome और Edge पर:

• सेटिंग्स पेज पर, एक्सपेरिमेंट्स टैब चुनें।
• एलिमेंट्स पैनल में Enable full accessibility tree view विकल्प के लिए बॉक्स चेक करें।
• DevTools रीफ्रेश करें और एलिमेंट्स टूल पर जाएं।
• एलिमेंट व्यू के टॉप-राइट कोने में, Switch to DOM Tree view पर क्लिक करें।

उदाहरण के लिए, नीचे दी गई छवि में, हम जांच रहे हैं कि हमारी वेबसाइट पर लिंक्स और बटन्स सही ढंग से पहचाने जाते हैं और उन उपयोगकर्ताओं के लिए सुलभ हैं जो स्क्रीन रीडर्स पर भरोसा करते हैं:

एक्सेसिबिलिटी ट्री सक्षम होने पर, आप DOM ट्री का एक सरलीकृत संस्करण देख सकते हैं, जो एक्सेसिबिलिटी के लिए प्रासंगिक तत्वों पर केंद्रित है। जब आप इसकी प्रॉपर्टीज देखने के लिए एक्सेसिबिलिटी ट्री पर एक तत्व का चयन करते हैं, तो ट्री तत्व की भूमिका, नाम, और अन्य महत्वपूर्ण विशेषताओं को प्रदर्शित करता है, जैसे aria-label यदि वे मौजूद हैं।

आप यह भी देखेंगे कि तत्व फोकसेबल है या नहीं और इसकी गणना की गई एक्सेसिबिलिटी प्रॉपर्टीज क्या हैं।

यह बहुत मदद करता है क्योंकि यदि तत्व एक्सेसिबिलिटी ट्री में सही ढंग से प्रकट नहीं हो रहा है या आवश्यक विशेषताएं गायब हैं, तो आपको एक्सेसिबिलिटी में सुधार के लिए अपने HTML या ARIA विशेषताओं को समायोजित करने की आवश्यकता हो सकती है।

Firefox पर:

• Firefox DevTools में, एक्सेसिबिलिटी टैब पर क्लिक करें और डॉक्यूमेंट नोड का विस्तार करें।
• आप विभिन्न नोड्स पर क्लिक करके उनकी प्रॉपर्टीज देख सकते हैं।
• नोड्स के लिए एक्सेसिबिलिटी मुद्दे Checks टैब पर प्रदर्शित किए जाएंगे।

सारांश

संक्षेप में, नवीनतम क्रॉस-ब्राउज़र DevTools सुविधाओं के साथ अपडेट रहना आपको एक वेब डेवलपर के रूप में समय बचाएगा। यह पोस्ट एलिमेंट निरीक्षण टिप्स, आपके डिबगिंग प्रक्रिया को आसान बनाने के लिए कुछ कंसोल शॉर्टकट्स, और नेटवर्क निगरानी के लिए कुछ उपयोगी टिप्स को छूता है।

उम्मीद है, आप अधिक DevTools सुविधाओं का पता लगाना और उपयोग करना जारी रखेंगे ताकि आपके डेवलपर अनुभव में सुधार हो सके।