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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

वेबपृष्ठ पर लाइव संपादन करें

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

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

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

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

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

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

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

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

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

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

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

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

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

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

आप Chrome की चुनिंदा DevTools एक्सटेंशन गैलरी में Chrome DevTools के लिए उपलब्ध एक्सटेंशन की सूची तक पहुंच सकते हैं.

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

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

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

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

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

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

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

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

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

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

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