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

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

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

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

सामग्री तालिका

<पी> DevTools
में स्क्रॉल इनटू व्यू का उपयोग कैसे करें
<पी> DevTools में कंसोल शॉर्टकट का उपयोग कैसे करें
<पी> DevTools में वेबसाइट परीक्षण के लिए संसाधन अनुरोध को कैसे ब्लॉक करें
<पी> DevTools
में नेटवर्क अनुरोध को कैसे संपादित करें और पुनः भेजें
<पी> DevTools
में अप्रयुक्त स्रोत कोड का पता कैसे लगाएं
<पी> DevTools
में एक्सेसिबिलिटी ट्री कैसे सक्षम करें
<पी> सारांश

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

<पी> आइए शुरू करें!

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

<पी> स्क्रॉल इनटू व्यू सुविधा क्रोम, फ़ायरफ़ॉक्स और एज में राइट-क्लिक करके और स्क्रॉल इनटू व्यू का चयन करके आसानी से DOM नोड को व्यूपोर्ट में लाती है।

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

<पी> नीचे दी गई छवि में, हम एक h2 ढूंढने का प्रयास कर रहे हैं वह तत्व जो अन्य तत्वों की कई परतों के अंदर निहित होता है।

<पी>

<पी> उपरोक्त छवि में, h2 को देखने के लिए पूरे पृष्ठ पर स्क्रॉल करने के बजाय तत्व, हमने राइट-क्लिक किया और तुरंत h2 लाने के लिए स्क्रॉल इनटू व्यू सुविधा का उपयोग किया। दृश्य में तत्व. जब हम इस पर स्क्रॉल करते हैं तो हम तत्व के साथ अन्य काम करने के लिए इस सुविधा का विस्तार कर सकते हैं। हम स्टाइल पैनल के माध्यम से वास्तविक समय में सीएसएस गुणों को बदल सकते हैं और लेआउट समस्याओं को ढूंढ और ठीक भी कर सकते हैं।

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

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

<पी>

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

let result = multiply(5)
result(4) // returns 20

<पी> उपरोक्त कोड में, multiply(5) फ़ंक्शन को एक फ़ंक्शन वापस करना होता है और फ़ंक्शन को परिणाम के लिए असाइन करना होता है, जिसे बाद में 4 के साथ कॉल किया जाता है पैरामीटर result(4) के रूप में .

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

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

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

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

<पी>

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

$0.style.backgroundColor = 'lightblue';

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

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

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

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

<पी> क्रोम और एज पर:

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

<पी> नीचे दी गई छवि में, हम सीएसएस अनुरोध को ब्लॉक करने के लिए नेटवर्क टैब में ब्लॉक अनुरोध यूआरएल विकल्प का उपयोग कर रहे हैं और देख सकते हैं कि यदि चयनित सीएसएस फ़ाइल लोड होने में विफल रहती है तो वेब पेज कैसा दिखेगा।

<पी>

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

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

<पी> अनुरोध को अवरुद्ध करके, हम अजीब व्यवहारों पर नज़र रख सकते हैं और यह भी माप सकते हैं कि अवरुद्ध संसाधन की अनुपस्थिति पृष्ठ लोड समय और प्रदर्शन को कैसे प्रभावित कर सकती है।

<पी> फ़ायरफ़ॉक्स पर:

<पी> नेटवर्क पैनल पर, उस संसाधन पर राइट-क्लिक करें जिसे आप ब्लॉक करना चाहते हैं और ब्लॉक यूआरएल चुनें।
<पी> पृष्ठ पुनः लोड करें.

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

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

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

<पी> एज और फ़ायरफ़ॉक्स ब्राउज़र में, आप जिस अनुरोध को संपादित या पुनः भेजना चाहते हैं उस पर राइट-क्लिक करके नेटवर्क अनुरोध को संपादित और पुनः भेज सकते हैं और संपादित करें और पुनः भेजें का चयन करें, जैसा कि नीचे दी गई छवि में है।

<पी>

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

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

<पी>

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

<पी> यूआरएल:यदि आवश्यक हो, तो आप यूआरएल को संशोधित कर सकते हैं या क्वेरी पैरामीटर जोड़ सकते हैं।
<पी> हेडर:आपको एक गुम या गलत सामग्री-प्रकार हेडर दिखाई दे सकता है, जिसे आप यहां ठीक कर सकते हैं।
<पी> मुख्य भाग:यह वह जगह है जहां आप पेलोड को समायोजित कर सकते हैं, जैसे उपयोगकर्ता नाम या पासवर्ड फ़ील्ड को सही करना।

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

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

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

<पी> क्रोम और एज पर:

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

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

<पी>

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

<पी> कुल बाइट्स:फ़ाइल का आकार.
<पी> अप्रयुक्त बाइट्स:फ़ाइल में बाइट्स की संख्या जिनका उपयोग नहीं किया गया।
<पी> उपयोग विज़ुअलाइज़ेशन:एक विज़ुअल बार जो उपयोग किए गए बनाम अप्रयुक्त कोड के अनुपात का प्रतिनिधित्व करता है।

<पी> सफ़ारी पर:स्रोत पैनल में, बाएँ नेविगेशन साइडबार खोलें और किसी भी JS फ़ाइल पर क्लिक करें। टूलबार के शीर्ष दाईं ओर, कवरेज आइकन c पर क्लिक करें और अपना पृष्ठ ताज़ा करें. आप देख पाएंगे कि निष्पादित नहीं किए गए कोड के अनुभाग धूसर हो गए हैं।

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

<पी> क्रोम और एज पर:

<पी> सेटिंग पृष्ठ पर, प्रयोग टैब चुनें।
<पी> एलीमेंट्स पैनल में पूर्ण एक्सेसिबिलिटी ट्री व्यू सक्षम करें विकल्प के लिए बॉक्स को चेक करें।
<पी> DevTools को रिफ्रेश करें और एलिमेंट्स टूल पर जाएं।
<पी> तत्व दृश्य के ऊपरी-दाएँ कोने में, DOM ट्री दृश्य पर स्विच करें पर क्लिक करें।

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

<पी>

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

<पी> आप यह भी देखेंगे कि क्या तत्व फोकस करने योग्य है और इसकी गणना की गई पहुंच क्षमता क्या है।

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

<पी> फ़ायरफ़ॉक्स पर:

<पी> फ़ायरफ़ॉक्स DevTools में, एक्सेसिबिलिटी टैब पर क्लिक करें और दस्तावेज़ नोड का विस्तार करें।
<पी> आप उनकी संपत्तियों को देखने के लिए विभिन्न नोड्स पर क्लिक कर सकते हैं।
<पी> नोड्स के लिए पहुंच संबंधी समस्याएं चेक टैब पर प्रदर्शित की जाएंगी।

सारांश

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

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

<पी> मुफ़्त में कोड करना सीखें. फ्रीकोडकैंप के ओपन सोर्स पाठ्यक्रम ने 40,000 से अधिक लोगों को डेवलपर्स के रूप में नौकरी पाने में मदद की है। आरंभ करें