Google क्रोम का उपयोग करके विभिन्न उपकरणों पर अपनी वेबसाइट का पूर्वावलोकन कैसे करें

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

Chrome के DevTools से आप अपनी वेबसाइट के विभिन्न पहलुओं को डीबग कर सकते हैं। इसमें HTML स्रोत कोड और CSS को बदलना और पूर्वावलोकन करना शामिल है। यह आपको क्लाइंट-साइड JavaScript कोड डीबग करने और नेटवर्क ट्रैफ़िक देखने की अनुमति भी देता है।

DevTools में विभिन्न उपकरणों पर आपकी वेबसाइट का पूर्वावलोकन करने का विकल्प भी होता है। इसमें विभिन्न प्रकार के मोबाइल डिवाइस, आईपैड, टैबलेट आदि शामिल हैं।

Google क्रोम पर डिवाइस टूलबार खोलने के लिए, आपको इसे खोलना होगा क्रोम डेवलपर टूल विंडो:

1. एक वेबसाइट खोलें।
2. पेज पर राइट-क्लिक करें और क्लिक करें निरीक्षण.
3. Chrome DevTools विंडो खुल जाएगी। यह आपके ब्राउज़र के किनारे या नीचे, या एक नई विंडो के रूप में खुल सकता है।
4. विंडो के ऊपर बाईं ओर दो आइकन हैं। उस आइकन पर क्लिक करें जो विभिन्न आकारों के कई डिवाइस दिखाता है।
5. मोबाइल डिवाइस पर वेबसाइट कैसी दिखेगी, यह दिखाने के लिए स्क्रीन बदल जाएगी।

विभिन्न उपकरणों के बीच स्विच कैसे करें

विभिन्न उपकरणों के बीच स्विच करने के लिए उपकरण उपकरण पट्टी के शीर्ष पर स्थित ड्रॉपडाउन का उपयोग करें।

1. टूलबार के शीर्ष पर यह प्रदर्शित होगा कि आप वर्तमान में अपनी वेबसाइट को किस प्रकार के उपकरण में देख रहे हैं। सूची में से कोई अन्य उपकरण चुनने के लिए ड्रॉपडाउन पर क्लिक करें।
2. मौजूदा डिवाइस को चुनने के बजाय, आप वेबसाइट को रिस्पॉन्सिव मोड में देखना चुन सकते हैं। ड्रॉपडाउन पर क्लिक करें और चुनें उत्तरदायी विकल्प।
3. ड्रॉपडाउन के आगे, आप किसी डिवाइस की कस्टम चौड़ाई और ऊंचाई दर्ज करना भी चुन सकते हैं।
4. चौड़ाई और ऊंचाई में टाइप करने के बजाय, आप आकार को समायोजित करने के लिए विंडो के कोनों को क्लिक और ड्रैग भी कर सकते हैं।

कस्टम डिवाइस कैसे जोड़ें

यदि आप एक कस्टम चौड़ाई और ऊंचाई सहेजना चाहते हैं, तो आप एक कस्टम डिवाइस जोड़ सकते हैं। फिर डिवाइस टूलबार डिवाइस के लिए ड्रॉपडाउन में आपके नए डिवाइस को प्रदर्शित करेगा।

1. सभी उपकरणों को सूचीबद्ध करने वाले ड्रॉपडाउन पर क्लिक करें।
2. पर क्लिक करें संपादन करना.
3. सेटिंग साइडबार के अंतर्गत, सुनिश्चित करें कि आपके पास है उपकरण टैब चयनित। यहां, आप उन और उपकरणों की सूची भी देख सकते हैं जिन्हें आप चुन सकते हैं।
4. पर क्लिक करें कस्टम डिवाइस जोड़ें.
5. डिवाइस के लिए एक नाम, चौड़ाई और ऊंचाई दर्ज करें। सुनिश्चित करें कि आपने डिवाइस प्रकार का भी चयन किया है, जैसे कि यह मोबाइल या डेस्कटॉप डिवाइस है। यदि आप का विस्तार करते हैं उपयोगकर्ता एजेंट क्लाइंट संकेत विकल्प, आप अन्य विवरण जैसे कि डिवाइस मॉडल, ब्रांड या संस्करण जोड़ सकते हैं।
6. पर क्लिक करें जोड़ें.
7. सभी उपकरणों को सूचीबद्ध करने वाले ड्रॉपडाउन पर वापस जाएं। आप सूची में अपना नया कस्टम उपकरण देखेंगे।
8. आप कस्टम डिवाइस पेज पर वापस जाकर बाद में इन विवरणों को फिर से संपादित कर सकते हैं। पर क्लिक करें संपादन करना संपादन शुरू करने के लिए आपके डिवाइस के नाम के आगे बटन।

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

सबसे पहले, आप विभिन्न उपकरणों पर अपनी वेबसाइट के प्रदर्शन का परीक्षण कर सकते हैं। कुछ मोबाइलों में अन्य की तुलना में तेज़ नेटवर्क गति या CPU थ्रॉटलिंग हो सकती है।

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

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

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

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

CSS को डीबग करने के लिए Google Chrome का उपयोग कैसे करें

आगे पढ़िए