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

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

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

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

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

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

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

Chrome DevTools तक कैसे पहुँचें

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

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

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

Chrome DevTools एक वेबपेज को ट्विक और समस्या निवारण के कई तरीके प्रदान करता है। आइए कुछ ऐसे तरीकों पर एक नज़र डालते हैं जो DevTools आपकी मदद कर सकते हैं।

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

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

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

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

किसी वेबपेज की सोर्स फाइल्स को एक्सेस करें

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

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

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

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

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

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

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

DevTools Console के साथ JavaScript कोड डीबग करें

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

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

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

एक डेटाबेस से मॉनिटर संसाधन लोड हो रहा है

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

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

संबंधित: आम वेबसाइट त्रुटियों और वे क्या मतलब है

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

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

Chrome DevTools एक्सटेंशन स्थापित करें

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

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

एक वेबसाइट पर सुरक्षा मुद्दों के लिए जाँच करें

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

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

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

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

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

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

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

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

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

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