वेबसाइट समस्याओं के निवारण के लिए Chrome DevTools का उपयोग कैसे करें

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

Chrome अपने शक्तिशाली डिबगिंग टूल्स के सूट के कारण डेवलपर्स के लिए सबसे लोकप्रिय ब्राउज़र है। Chrome DevTools का उपयोग करना आसान है, लेकिन इसका अधिकतम लाभ उठाने के लिए आपको यह समझने की आवश्यकता है कि यह कैसे काम करता है।

Chrome डेवलपर टूल्स कैसे काम करते हैं

Chrome DevTools आपको इसकी त्रुटि कंसोल और अन्य डिबगिंग और निगरानी टूल्स के माध्यम से वेबसाइट पर समस्याओं को हल करने देता है। DevTools का उपयोग फ्रंटएंड खामियों को उजागर करता है और आपको यह निगरानी करने देता है कि आपकी वेबसाइट मोबाइल और टैबलेट उपकरणों पर कैसे दिखाई देती है।

DevTools के साथ, आप वेबसाइट के कोड पर वास्तविक समय में संपादन कर सकते हैं, जैसे JavaScript, HTML, और CSS, और अपने परिवर्तनों के तत्काल परिणाम प्राप्त कर सकते हैं।

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

Chrome DevTools कैसे एक्सेस करें

आप कई तरीकों से Chrome DevTools एक्सेस कर सकते हैं। Mac OS पर शॉर्टकट विधि से डेवलपर टूल्स खोलने के लिए, Cmd + Opt + I दबाएं। यदि आप Windows OS का उपयोग कर रहे हैं, तो अपने कीबोर्ड पर Ctrl + Shift + I कुंजियां दबाएं।

वैकल्पिक रूप से, आप स्क्रीन के ऊपरी-दाएं कोने पर तीन डॉट्स पर क्लिक करके Chrome डेवलपर टूल्स एक्सेस कर सकते हैं। More tools पर जाएं और Developer tools चुनें। एक अन्य विकल्प वेब पेज पर राइट-क्लिक करना और Inspect विकल्प पर क्लिक करना है।

वेबसाइट निदान के लिए Chrome डेवलपर टूल्स का उपयोग

Chrome DevTools एक वेबपेज को ठीक करने और समस्या निवारण के कई तरीके प्रदान करता है। आइए देखें कि DevTools आपकी कैसे मदद कर सकता है।

देखें कि आपकी वेबसाइट स्मार्टफोन पर कैसी दिखती है

एक बार जब आप अपने Chrome ब्राउज़र को डेवलपर मोड पर स्विच करते हैं, तो यह आपके वेबपेज का आधा आकार का संस्करण प्रस्तुत करता है। हालांकि, यह आपको यह वास्तविक दृश्य नहीं देगा कि यह स्मार्टफोन या टैबलेट पर कैसा दिखेगा।

शुक्र है, वेबपेज के स्क्रीन आकार को सेट करने के अलावा, Chrome DevTools आपको विभिन्न मोबाइल स्क्रीन प्रकारों और संस्करणों के बीच स्विच करने देता है।

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

वेबपेज की स्रोत फ़ाइलों तक पहुंचें

आप Chrome DevTools के माध्यम से एक वेबपेज को बनाने वाली फ़ाइलों तक पहुंच सकते हैं। इन फ़ाइलों तक पहुंचने के लिए, DevTools मेनू के ऊपरी भाग में Sources विकल्प पर क्लिक करें। यह वेबसाइट की फ़ाइल प्रणाली को उजागर करता है और आपको संपादन भी देता है।

आप स्रोत फ़ाइलों को भी खोज सकते हैं, जो तब उपयोगी हो सकता है जब आप किसी ऐसे वेबपेज से निपट रहे हों जिसमें कई संसाधन हों। DevTools के माध्यम से स्रोत फ़ाइल खोजने के लिए, कंसोल के ठीक ऊपर Search विकल्प पर क्लिक करें।

हालांकि, यदि आपको Search विकल्प नहीं मिल रहा है, तो एक बेहतर विकल्प कीबोर्ड शॉर्टकट का उपयोग करना है। Mac OS पर, स्रोत फ़ाइल खोजने के लिए Cmd + Opt + F कुंजियां दबाएं। यदि आप Windows OS का उपयोग कर रहे हैं, तो स्रोत फ़ाइल खोज बार तक पहुंचने के लिए Ctrl + Shift + F कुंजी दबाएं।

वेबपेज पर लाइव संपादन करें

DevTools का उपयोग करने के मुख्य उद्देश्यों में से एक वेबपेज पर तत्वों का त्वरित नकली संपादन करना है। एक बार जब आप डेवलपर टूल्स पर स्विच करते हैं, तो आप Elements विकल्प पर क्लिक करके वेबसाइट के HTML सामग्री को संपादित कर सकते हैं। फिर, कोड संपादक के भीतर किसी भी बिंदु पर राइट-क्लिक करें जहां आप परिवर्तन लागू करना चाहते हैं और Edit as HTML चुनें।

इनलाइन नहीं होने वाले CSS गुणों को संपादित करने के लिए, Sources चुनें। अगला, वह CSS फ़ाइल चुनें जिसे आप संपादित करना चाहते हैं। कोड कंसोल के भीतर अपनी पसंद की पंक्ति पर अपना कर्सर रखकर लाइव संपादन करें। ऐसा करने से आपको वेबपेज पर लागू किसी भी शैली परिवर्तन पर तत्काल प्रतिक्रिया मिलती है।

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

DevTools कंसोल से JavaScript कोड डीबग करें

JavaScript को डीबग करने के सर्वोत्तम तरीकों में से एक Chrome के डेवलपर टूल्स का उपयोग करना है। यह आपको अमान्य स्क्रिप्ट के साथ-साथ बग के सटीक स्थान की सीधी रिपोर्ट देता है।

JavaScript के साथ वेबसाइट डिजाइन करते समय DevTools को हमेशा खुला रखना अच्छा अभ्यास है। उदाहरण के लिए, निर्देशों के एक सेट पर JavaScript के console.log() कमांड को चलाने पर, यदि प्रोग्राम सफलतापूर्वक चलता है तो उस लॉग का परिणाम DevTools कंसोल में प्रदर्शित होता है।

डिफ़ॉल्ट रूप से, कंसोल आपकी वेबसाइट पर किसी भी JavaScript समस्या की रिपोर्ट करता है। आप कंसोल को DevTools के निचले हिस्से में पा सकते हैं या Chrome DevTools विंडो के शीर्ष पर Console विकल्प पर क्लिक करके इसे एक्सेस कर सकते हैं।

डेटाबेस से संसाधन लोडिंग की निगरानी करें

JavaScript को डीबग करने के अलावा, कंसोल आपको उन संसाधनों का विवरण भी दे सकता है जो वेबसाइट के डेटाबेस से सही ढंग से लोड नहीं हो रहे हैं।

हालांकि यह बैकएंड मुद्दों को डीबग करने का सबसे अच्छा तरीका नहीं है, फिर भी यह आपको बताता है कि उन तत्वों के डेटाबेस क्वेरी चलाने के बाद कौन से संसाधन 404 त्रुटि लौटा रहे हैं।

Chrome डेवलपर टूल्स की ओरिएंटेशन बदलें

Chrome डेवलपर टूल्स की स्थिति बदलने के लिए, DevTools के भीतर तीन मेनू डॉट्स पर क्लिक करें (मुख्य ब्राउज़र पर नहीं)। फिर Dock side विकल्प से अपनी पसंदीदा स्थिति चुनें।

Chrome DevTools एक्सटेंशन इंस्टॉल करें

आप भाषा या फ्रेमवर्क-विशिष्ट एक्सटेंशन भी इंस्टॉल कर सकते हैं जो Chrome DevTools के साथ काम करते हैं। इन एक्सटेंशन को इंस्टॉल करने से आप अपने वेबपेज को अधिक कुशलता से डीबग कर सकते हैं।

आप Chrome के फीचर्ड DevTools एक्सटेंशन गैलरी में Chrome DevTools के लिए उपलब्ध एक्सटेंशन की सूची एक्सेस कर सकते हैं।

वेबसाइट पर सुरक्षा मुद्दों की जांच करें

Chrome DevTools आपको वेब सुरक्षा प्रमाणपत्रों की उपलब्धता और कनेक्शन कितना सुरक्षित है, जैसे मापदंडों के आधार पर यह आकलन करने देता है कि आपकी वेबसाइट कितनी सुरक्षित है। यह जांचने के लिए कि आपकी वेबसाइट सुरक्षित है या नहीं, DevTools के शीर्ष पर Security विकल्प पर क्लिक करें।

Security टैब आपको अपनी वेबसाइट के सुरक्षा विवरण का अवलोकन देता है और आपको किसी भी संभावित खतरे के बारे में बताता है।

अपनी वेबसाइट का ऑडिट करें

Chrome DevTools में एक सुविधा है जो आपको विशिष्ट मापदंडों के आधार पर अपनी वेबसाइट के समग्र प्रदर्शन की जांच करने देती है।

उस सुविधा तक पहुंचने के लिए, DevTools विंडो के शीर्ष पर Lighthouse विकल्प चुनें। अगला, उन मापदंडों को चुनें जिन्हें आप जांचना चाहते हैं, फिर Mobile या Desktop विकल्पों में से किसी एक को टिक करें ताकि आप देख सकें कि आपका वेबपेज विभिन्न प्लेटफार्मों पर कैसा प्रदर्शन करता है।

अगला, पहले चुने गए मापदंडों के आधार पर अपने वेबपेज का विश्लेषण चलाने के लिए Generate report पर क्लिक करें।

आप Performance विकल्प पर क्लिक करके वेबसाइट के रन-टाइम या लोडिंग प्रदर्शन का आकलन भी कर सकते हैं। परीक्षण चलाने के लिए, Click the record button विकल्प के बगल में आइकन पर क्लिक करके रन-टाइम विश्लेषण करें। वैकल्पिक रूप से, लोड-टाइम प्रदर्शन का आकलन करने के लिए इसके नीचे रीलोड बटन पर क्लिक करें। विश्लेषक को रोकने और परिणाम प्रदर्शित करने के लिए Stop पर क्लिक करें।

Chrome DevTools का लाभ उठाएं

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

आप इस लेख में चर्चा नहीं किए गए कुछ अन्य विकल्पों की खोज भी कर सकते हैं। इसलिए, उपलब्ध सुविधाओं के साथ बेझिझक खेलें। इसके अलावा, इन सुविधाओं को 조정 करने से वेबसाइट को कोई नुकसान नहीं होता है।