Chrome Developer Mode क्या है और इसके क्या उपयोग हैं?

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

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

Chrome Developer Mode क्या है?

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

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

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

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

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

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

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

ऐसा करने का सबसे आसान तरीका Google Chrome मेनू से है। ऐसा करने के लिए, ऊपरी-दाएं कोने में थ्री-डॉट्स मेनू आइकन पर क्लिक करें। दिखाई देने वाले मेनू से, More Tools > Developer Tools पर क्लिक करें।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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