Chrome डेवलपर मोड क्या है और इसके क्या उपयोग हैं?

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

आपको पहले Google Chrome के DevTools किट को आज़माए बिना किसी वेब साइट का परीक्षण नहीं करना चाहिए। क्रोम डेवलपर मोड आपको बग खोजने और ठीक करने के लिए एक नई साइट (या मौजूदा साइट) को आज़माने और पूरी तरह से परीक्षण करने की अनुमति देता है। यह आपको यह भी जानकारी दे सकता है कि स्रोत कोड देखने सहित अन्य साइटें कैसे चलती हैं।

यहां वह सब कुछ है जो आपको Google क्रोम ब्राउज़र डेवलपर मोड के बारे में जानने की जरूरत है, इसमें कौन से टूल्स हैं, और इसका प्रभावी ढंग से उपयोग कैसे करें।

Chrome डेवलपर मोड क्या है?

जब हम क्रोम डेवलपर मोड का उल्लेख करते हैं, तो हम उसी डेवलपर मोड के बारे में बात नहीं कर रहे हैं जो आप क्रोमबुक पर देखेंगे। हम जिस व्यापक क्रोम डेवलपमेंट टूल की बात कर रहे हैं, वह है (Google DevTools . कहा जाता है) ) जो ब्राउज़र में ही निर्मित होते हैं।

ये ऐसे उपकरण हैं जिन्हें परीक्षण उद्देश्यों के लिए Google क्रोम ब्राउज़र में लोड किए गए वेब पेज का परीक्षण, विश्लेषण और जानबूझकर तोड़ने (यदि आपको इसकी आवश्यकता है) के लिए डिज़ाइन किया गया है। एक बुनियादी स्तर पर, आप किसी वेबसाइट के स्रोत कोड को देखने के लिए DevTools का उपयोग कर सकते हैं, जिससे आप यह देख सकते हैं कि साइट कैसे बनाई गई है और यह कितनी अच्छी तरह चलती है।

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

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

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

Google Chrome DevTools मेनू तक कैसे पहुंचें

आप जिस टूल का उपयोग करना चाहते हैं, उसके आधार पर आप कुछ तरीकों से Google Chrome DevTools मेनू तक पहुंच सकते हैं।

ऐसा करने का सबसे आसान तरीका Google Chrome मेनू से है। ऐसा करने के लिए, तीन बिंदुओं वाले मेनू आइकन . पर क्लिक करें ऊपरी-दाएँ में। दिखाई देने वाले मेनू से, अधिक टूल> डेवलपर टूल click क्लिक करें ।

यह आपके खुले क्रोम टैब या विंडो के दाईं ओर एक नए मेनू में DevTools किट को खोलेगा।

आप कीबोर्ड शॉर्टकट का उपयोग करके भी ऐसा कर सकते हैं। Windows या Linux PC से, Chrome ब्राउज़र खोलें और F12 . दबाएं चाभी। आप Ctrl + Alt + J . भी दबा सकते हैं या Ctrl + Alt + I खुले क्रोम टैब या विंडो में कुंजियाँ।

macOS पर, F12 press दबाएं या विकल्प + कमांड + J . दबाएं या विकल्प + कमांड + I इसके बजाय क्रोम DevTools मेनू खोलने के लिए कुंजियाँ। इससे Chrome कंसोल खुल जाएगा, जिसमें DevTools मेनू के शीर्ष पर अन्य Chrome टूल पर जाने के विकल्प होंगे।

यदि आप चाहें, तो आप किसी वेबसाइट के लिए स्रोत कोड देख सकते हैं (तत्व . खोलकर) प्रक्रिया में DevTools मेनू का टैब) किसी भी खुले वेब पेज पर राइट-क्लिक करके और निरीक्षण पर क्लिक करके विकल्प।

Chrome DevTools का उपयोग करना

जैसा कि हमने संक्षेप में बताया है, आप तत्वों के अंतर्गत किसी वेबसाइट का स्रोत कोड देखने के लिए Chrome DevTools किट का उपयोग कर सकते हैं टैब। यह आपको आपके द्वारा लोड किए गए पृष्ठ के पीछे के कोड का विश्लेषण करने के साथ-साथ कंसोल के अंतर्गत क्रोम कंसोल में त्रुटि संदेश (साइट के लोड होने की समस्याओं का संकेत) देखने देगा। टैब।

आप स्रोत . के अंतर्गत किसी वेबसाइट की सामग्री के विभिन्न स्रोतों को भी देख सकते हैं टैब। उदाहरण के लिए, यदि कोई साइट सामग्री वितरण नेटवर्क (सीडीएन) का उपयोग कर रही है, तो साइट के मीडिया को यहां एक अलग स्रोत के रूप में सूचीबद्ध किया जाएगा।

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

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

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

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

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

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

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

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

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

उन्नत Google Chrome ट्रिक्स

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

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