Home-theater-designers
डेवलपर्स के लिए Chrome DevTools एक आवश्यक संपत्ति है। जबकि अन्य ब्राउज़र बहुत आसान समस्या निवारण उपकरण प्रदान करते हैं, Chrome DevTools अपने बहु-कार्यात्मक इंटरफ़ेस और लोकप्रियता के कारण आपके ध्यान देने योग्य है।
डिबगिंग टूल के अपने शक्तिशाली सूट के कारण क्रोम डेवलपर्स के लिए सबसे लोकप्रिय ब्राउज़र है। Chrome DevTools का उपयोग करना आसान है, लेकिन आपको यह समझने की आवश्यकता है कि इसका अधिकतम लाभ उठाने के लिए यह कैसे काम करता है।
क्रोम डेवलपर टूल कैसे काम करते हैं
Chrome DevTools आपको किसी वेबसाइट के एरर कंसोल और अन्य डिबगिंग और मॉनिटरिंग टूल के माध्यम से समस्याओं को हल करने देता है। DevTools का उपयोग करने से फ्रंटएंड की कमियां उजागर होती हैं और आप यह देख सकते हैं कि आपकी वेबसाइट मोबाइल और टैबलेट उपकरणों पर कैसे दिखाई देती है।
DevTools के साथ, आप किसी वेबसाइट के कोड, जैसे JavaScript, HTML, और CSS पर रीयल-टाइम संपादन कर सकते हैं और अपने परिवर्तनों के तुरंत परिणाम प्राप्त कर सकते हैं।
DevTools के माध्यम से आपके द्वारा किए गए परिवर्तन वेबसाइट को स्थायी रूप से प्रभावित नहीं करते हैं। वे केवल अस्थायी रूप से अपेक्षित परिणाम प्रदर्शित करते हैं जैसे कि आपने उन्हें वास्तविक स्रोत कोड पर लागू किया था। इससे आप अपनी वेबसाइट को बहुत तेज़ी से लोड करने के तरीके खोज सकते हैं और बग्स को दूर करना आसान बना सकते हैं।
Chrome DevTools को कैसे एक्सेस करें
आप Chrome DevTools को कई तरीकों से एक्सेस कर सकते हैं। मैक ओएस पर शॉर्टकट विधि के साथ डेवलपर टूल खोलने के लिए, दबाएं सीएमडी + ऑप्ट + आई . यदि आप विंडोज ओएस का उपयोग कर रहे हैं, तो दबाएं Ctrl + Shift + I आपके कीबोर्ड पर कुंजियाँ।
वैकल्पिक रूप से, आप स्क्रीन के ऊपरी दाएं कोने में तीन बिंदुओं पर क्लिक करके क्रोम डेवलपर टूल तक पहुंच सकते हैं। की ओर जाना अधिक उपकरण और चुनें डेवलपर उपकरण . एक अन्य विकल्प वेब पेज पर राइट-क्लिक करना और पर क्लिक करना है निरीक्षण विकल्प।
वेबसाइट निदान के लिए Chrome डेवलपर टूल का उपयोग करना
Chrome DevTools किसी वेबपृष्ठ को संशोधित करने और उसका निवारण करने के कई तरीके प्रदान करता है। आइए कुछ ऐसे तरीकों पर एक नज़र डालें जिनसे DevTools आपकी मदद कर सकता है।
देखें कि आपकी वेबसाइट स्मार्टफ़ोन पर कैसी दिखती है
एक बार जब आप अपने क्रोम ब्राउज़र को डेवलपर मोड पर स्विच कर लेते हैं, तो यह आपके वेबपेज का आधा आकार का संस्करण प्रस्तुत करता है। हालाँकि, यह आपको वास्तविक दृश्य नहीं देगा कि यह स्मार्टफोन या टैबलेट पर कैसा दिखेगा।
शुक्र है, वेबपेज के स्क्रीन आकार को सेट करने के अलावा, क्रोम देवटूल आपको विभिन्न मोबाइल स्क्रीन प्रकारों और संस्करणों के बीच भी स्विच करने देता है।
उस विकल्प तक पहुंचने के लिए, टॉगल करें निरीक्षण तरीका। इसके बाद, पर क्लिक करें उत्तरदायी DevTools के ऊपरी-बाएँ कोने पर ड्रॉप-डाउन करें और अपने पसंदीदा मोबाइल डिवाइस का चयन करें। वेबपेज तब आपके द्वारा चुने गए मोबाइल डिवाइस के आकार में फिट होने के लिए प्रस्तुत और समायोजित करता है।
विंडोज़ अपडेट फाइल्स को कैसे डिलीट करें विंडोज़ 10
वेबपेज की स्रोत फाइलों तक पहुंचें
आप Chrome DevTools के माध्यम से वेबपृष्ठ बनाने वाली फ़ाइलों तक पहुँच प्राप्त कर सकते हैं। इन फ़ाइलों तक पहुँचने के लिए, पर क्लिक करें सूत्रों का कहना है DevTools मेनू के ऊपरी भाग में विकल्प। यह वेबसाइट के फाइल सिस्टम को एक्सपोज करता है और आपको एडिटिंग भी देता है।
आप स्रोत फ़ाइलों की खोज भी कर सकते हैं, जो तब सहायक हो सकती है जब आप किसी ऐसे वेबपृष्ठ के साथ काम कर रहे हों जिसमें कई संसाधन हों। DevTools के माध्यम से स्रोत फ़ाइल खोजने के लिए, पर क्लिक करें खोज कंसोल के ठीक ऊपर विकल्प।
हालाँकि, यदि आप नहीं ढूंढ सकते हैं खोज विकल्प, कीबोर्ड शॉर्टकट का उपयोग करना एक बेहतर विकल्प है। मैक ओएस पर, दबाएं सीएमडी + ऑप्ट + एफ स्रोत फ़ाइल खोजने के लिए कुंजियाँ। यदि आप विंडोज ओएस का उपयोग कर रहे हैं, तो दबाएं Ctrl + शिफ्ट + एफ स्रोत फ़ाइल खोज बार तक पहुँचने के लिए कुंजी।
वेबपेज पर लाइव संपादन करें
DevTools का उपयोग करने का एक मुख्य उद्देश्य निम्नलिखित कार्य करना है वेबपेज पर तत्वों का तत्काल नकली संपादन . एक बार जब आप डेवलपर टूल पर स्विच कर लेते हैं, तो आप पर क्लिक करके वेबसाइट की HTML सामग्री को संपादित कर सकते हैं तत्वों विकल्प। फिर, किसी भी बिंदु पर राइट-क्लिक करें जिसे आप कोड संपादक के भीतर परिवर्तन लागू करना चाहते हैं और चुनें HTML के रूप में संपादित करें .
उन सीएसएस गुणों को संपादित करने के लिए जो इनलाइन नहीं हैं, चुनें सूत्रों का कहना है . इसके बाद, उस CSS फ़ाइल का चयन करें जिसे आप संपादित करना चाहते हैं। लाइव संपादन करने के लिए अपने कर्सर को कोड कंसोल के भीतर अपनी पसंद की लाइन पर रखें। ऐसा करने से आपको वेबपेज पर लागू होने वाले किसी भी शैली परिवर्तन पर तुरंत प्रतिक्रिया मिलती है।
ध्यान दें कि जब आप किसी पृष्ठ को DevTools के माध्यम से संपादित करते हैं, तो अपने ब्राउज़र पर पृष्ठ को पुनः लोड करने से वह अपने मूल रूप में वापस आ जाता है, और संपादन केवल आपको दिखाई देता है। DevTools के माध्यम से संपादन न तो सुचारू रूप से चल रहा है और न ही अन्य उपयोगकर्ताओं के लिए उस वेबसाइट के उपयोग को प्रभावित करता है।
DevTools कंसोल के साथ जावास्क्रिप्ट कोड डीबग करें
जावास्क्रिप्ट को डीबग करने के सर्वोत्तम तरीकों में से एक क्रोम के डेवलपर टूल का उपयोग करना है। यह आपको अमान्य स्क्रिप्ट के साथ-साथ बग के सटीक स्थान की एक सीधी रिपोर्ट देता है।
जावास्क्रिप्ट के साथ वेबसाइट डिजाइन करते समय DevTools को हमेशा खुला रखना एक अच्छा अभ्यास है। उदाहरण के लिए, चल रहा है कंसोल.लॉग () यदि प्रोग्राम सफलतापूर्वक चलता है, तो निर्देशों के एक सेट पर जावास्क्रिप्ट का कमांड DevTools कंसोल में उस लॉग के परिणाम को प्रदर्शित करता है।
डिफ़ॉल्ट रूप से, कंसोल आपकी वेबसाइट पर किसी भी JavaScript समस्या की रिपोर्ट करता है। आप कंसोल को DevTools के निचले हिस्से में पा सकते हैं या उस पर क्लिक करके एक्सेस कर सकते हैं सांत्वना देना Chrome DevTools विंडो के शीर्ष पर विकल्प।
डेटाबेस से संसाधन लोड होने की निगरानी करें
जावास्क्रिप्ट डीबग करने के अलावा, कंसोल आपको उन संसाधनों का विवरण भी दे सकता है जो वेबसाइट के डेटाबेस से ठीक से लोड नहीं हो रहे हैं।
हालांकि बैकएंड मुद्दों को डीबग करने का यह हमेशा सबसे अच्छा तरीका नहीं है, फिर भी यह आपको बताता है कि कौन से संसाधन वापस आ रहे हैं ४०४ उन तत्वों की डेटाबेस क्वेरी चलाने के बाद त्रुटि।
संबंधित: सामान्य वेबसाइट त्रुटियां और उनका क्या अर्थ है
क्रोम डेवलपर टूल्स का ओरिएंटेशन स्विच करें
Chrome डेवलपर टूल की स्थिति बदलने के लिए, DevTools के भीतर तीन मेनू बिंदुओं पर क्लिक करें (ब्राउज़र पर मुख्य नहीं)। फिर से अपनी पसंदीदा स्थिति का चयन करें गोदी की ओर विकल्प।
Chrome DevTools एक्सटेंशन इंस्टॉल करें
आप Chrome DevTools के साथ काम करने वाली भाषा या फ़्रेमवर्क-विशिष्ट एक्सटेंशन भी इंस्टॉल कर सकते हैं। इन एक्सटेंशन को स्थापित करने से आप अपने वेबपेज को अधिक कुशलता से डिबग कर सकते हैं।
आप Chrome के DevTools के लिए उपलब्ध एक्सटेंशन की सूची को Chrome's . में एक्सेस कर सकते हैं विशेष रुप से प्रदर्शित DevTools एक्सटेंशन गेलरी।
वेबसाइट पर सुरक्षा मुद्दों की जाँच करें
Chrome DevTools की उपलब्धता जैसे मापदंडों के आधार पर आपको यह आकलन करने देता है कि आपकी वेबसाइट कितनी सुरक्षित है वेब सुरक्षा प्रमाणपत्र और कनेक्शन कितना सुरक्षित है, दूसरों के बीच में। यह जांचने के लिए कि आपकी वेबसाइट सुरक्षित है या नहीं, पर क्लिक करें सुरक्षा DevTools के शीर्ष पर विकल्प।
NS सुरक्षा टैब आपको अपनी वेबसाइट के सुरक्षा विवरण का अवलोकन देता है और आपको संभावित खतरों के बारे में बताता है।
अपनी वेबसाइट का ऑडिट करें
Chrome DevTools में एक विशेषता है जो आपको विशिष्ट मापदंडों के आधार पर अपनी वेबसाइट के समग्र प्रदर्शन की जांच करने देती है।
उस सुविधा तक पहुँचने के लिए, चुनें प्रकाशस्तंभ DevTools विंडो के शीर्ष पर विकल्प। इसके बाद, उन मापदंडों का चयन करें जिन्हें आप जांचना चाहते हैं, फिर या तो टिक करें मोबाइल या डेस्कटॉप यह देखने के लिए विकल्प हैं कि आपका वेबपेज विभिन्न प्लेटफॉर्म पर कैसा प्रदर्शन करता है।
अगला, पर क्लिक करें रिपोर्ट बनाओ आपके द्वारा पहले चुने गए मापदंडों के आधार पर अपने वेबपेज का विश्लेषण चलाने के लिए।
आप पर क्लिक करके किसी वेबसाइट के रन-टाइम या लोडिंग प्रदर्शन का आकलन भी कर सकते हैं प्रदर्शन विकल्प। परीक्षण चलाने के लिए, के बगल में स्थित आइकन पर क्लिक करें रिकॉर्ड बटन पर क्लिक करें रन-टाइम विश्लेषण करने का विकल्प। वैकल्पिक रूप से, लोड-टाइम प्रदर्शन का आकलन करने के लिए इसके नीचे दिए गए रीलोड बटन पर क्लिक करें। पर क्लिक करें विराम विश्लेषक को रोकने और परिणाम प्रदर्शित करने के लिए।
Chrome DevTools का लाभ उठाएं
आपको इसकी क्या आवश्यकता है, इस पर निर्भर करते हुए, Chrome DevTools आपको केवल साधारण वेबसाइट डिबगिंग के अलावा और भी बहुत कुछ करने देता है। शुक्र है, सभी कौशल स्तरों के प्रोग्रामर के लिए DevTools का उपयोग करना आसान है। आप जिन वेबसाइटों पर जाते हैं, उनके स्रोत कोड को देखकर आप वेबसाइट फ्रंटएंड डेवलपमेंट की कुछ मूल बातें भी सीख सकते हैं।
आईफोन बनाम सैमसंग जो बेहतर है
आप कुछ अन्य विकल्प भी खोज सकते हैं जिन पर हमने इस लेख में चर्चा नहीं की है। तो, उपलब्ध सुविधाओं के साथ खेलने के लिए स्वतंत्र महसूस करें। इसके अलावा, इन सुविधाओं में बदलाव करने से किसी वेबसाइट को थोड़ा भी नुकसान नहीं होता है।
साझा करना साझा करना कलरव ईमेल रास्पबेरी पाई पर क्रोम ओएस का उपयोग कैसे करेंChromebook नहीं खरीद सकते? रास्पियन के विकल्प की तलाश है? अपने रास्पबेरी पाई पर क्रोम ओएस का एक संस्करण स्थापित करने का तरीका यहां दिया गया है।
आगे पढ़िए संबंधित विषय- इंटरनेट
- प्रोग्रामिंग
- एचटीएमएल
- वेब विकास
- जावास्क्रिप्ट
- गूगल क्रोम
Idowu कुछ भी स्मार्ट तकनीक और उत्पादकता के बारे में भावुक है। अपने खाली समय में, वह कोडिंग के साथ खेलता है और जब वह ऊब जाता है तो शतरंज की बिसात पर चला जाता है, लेकिन उसे कभी-कभी दिनचर्या से अलग होना भी पसंद होता है। लोगों को आधुनिक तकनीक के बारे में बताने का उनका जुनून उन्हें और अधिक लिखने के लिए प्रेरित करता है।
Idowu Omisola . की और फ़िल्में या टीवी शोहमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें