डिवाइस मोड की मदद से, मोबाइल डिवाइसों को सिम्युलेट करें

आपका पेज, मोबाइल डिवाइस पर कैसा दिखेगा और उसकी परफ़ॉर्मेंस का अनुमान लगाने के लिए, डिवाइस मोड का इस्तेमाल करें.

खास जानकारी

डिवाइस मोड, Chrome DevTools की ऐसी सुविधाओं का नाम है जो मोबाइल डिवाइसों को सिम्युलेट करने में आपकी मदद करती हैं. इन सुविधाओं में ये शामिल हैं:

• मोबाइल व्यूपोर्ट को सिम्युलेट करना
• सीपीयू को थ्रॉटल करना
• नेटवर्क को थ्रॉटल करना
• इसके अलावा, सेंसर पैनल में:
  • जियोलोकेशन को सिम्युलेट करना
  • स्क्रीन की दिशा सेट करना

सीमाएं

डिवाइस मोड को पहले ऑर्डर में इस्तेमाल होने वाले अनुमान के तौर पर देखें. इससे यह पता चलता है कि मोबाइल डिवाइस पर आपका पेज कैसा दिखता है. डिवाइस मोड में, आपको मोबाइल डिवाइस पर अपना कोड नहीं दिखाना होता. आप अपने लैपटॉप या डेस्कटॉप से मोबाइल उपयोगकर्ता अनुभव को सिम्युलेट करते हैं.

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

डिवाइस टूलबार खोलें

डिवाइस टूलबार खोलने के लिए, यह तरीका अपनाएं:

1. DevTools खोलें.
2. सबसे ऊपर कार्रवाई बार में मौजूद, डिवाइस डिवाइस टूलबार टॉगल करें पर क्लिक करें.

मोबाइल व्यूपोर्ट सिम्युलेट करें

डिफ़ॉल्ट रूप से, डिवाइस टूलबार व्यूपोर्ट में खुलता है, जिसमें डाइमेंशन को रिस्पॉन्सिव पर सेट किया गया होता है. डाइमेंशन ड्रॉप-डाउन का इस्तेमाल करके, किसी खास मोबाइल डिवाइस के डाइमेंशन को सिम्युलेट किया जा सकता है.

रिस्पॉन्सिव व्यूपोर्ट मोड

व्यूपोर्ट का साइज़ अपनी ज़रूरत के हिसाब से बदलने के लिए, हैंडल खींचें और छोड़ें. या फिर चौड़ाई और ऊंचाई वाले बॉक्स में खास वैल्यू डालें. इस उदाहरण में, चौड़ाई को 480 और ऊंचाई को 415 पर सेट किया गया है.

इसके अलावा, नीचे दिए गए विकल्पों में से किसी एक पर क्लिक की मदद से चौड़ाई को सेट करने के लिए, विड्थ प्रीसेट बार का इस्तेमाल करें:

मोबाइल S	मोबाइल M	बड़ा मोबाइल	टैबलेट	लैपटॉप	बड़ा लैपटॉप	4K
320 पिक्सल	375 पिक्सल	425 पिक्सल	768 पिक्सल	1024 पिक्सल	1440 पिक्सल	2560 पिक्सल

मीडिया क्वेरी दिखाएं

अपने व्यूपोर्ट के ऊपर मीडिया क्वेरी ब्रेकपॉइंट दिखाने के लिए, ज़्यादा विकल्प > मीडिया क्वेरी दिखाएं पर क्लिक करें.

DevTools अब व्यूपोर्ट के ऊपर दो और बार दिखाता है:

• max-width ब्रेकपॉइंट वाला नीला बार.
• min-width ब्रेकपॉइंट वाला ऑरेंज बार.

व्यूपोर्ट की चौड़ाई बदलने के लिए ब्रेकपॉइंट के बीच क्लिक करें, ताकि ब्रेकपॉइंट ट्रिगर हो सके.

इससे जुड़े @media एलान को ढूंढने के लिए, ब्रेकपॉइंट के बीच राइट क्लिक करें और सोर्स कोड में दिखाएं को चुनें. DevTools एडिटर में संबंधित लाइन पर, सोर्स पैनल खोलता है.

डिवाइस पिक्सल का अनुपात सेट करें

डिवाइस पिक्सल रेशियो (डीपीआर), हार्डवेयर स्क्रीन पर मौजूद फ़िज़िकल पिक्सल और लॉजिकल (सीएसएस) पिक्सल के बीच का अनुपात होता है. दूसरे शब्दों में, डीपीआर से Chrome को यह पता चलता है कि किसी सीएसएस पिक्सल को ड्रॉ करने के लिए कितने स्क्रीन पिक्सल का इस्तेमाल करना है. Chrome, HiDPI (हाई डॉट्स प्रति इंच) डिसप्ले पर ड्रॉइंग करते समय डीपीआर वैल्यू का इस्तेमाल करता है.

डीपीआर वैल्यू सेट करने के लिए:

1. ज़्यादा विकल्प > डिवाइस पिक्सल का अनुपात जोड़ें पर क्लिक करें.

   

2. व्यूपोर्ट में सबसे ऊपर मौजूद कार्रवाई बार में, नए DPR ड्रॉप-डाउन मेन्यू से कोई DPR वैल्यू चुनें.

   

डिवाइस का टाइप सेट करें

मोबाइल डिवाइस या डेस्कटॉप डिवाइस को सिम्युलेट करने के लिए, डिवाइस के टाइप की सूची का इस्तेमाल करें.

अगर आपको सबसे ऊपर मौजूद ऐक्शन बार में सूची नहीं दिख रही है, तो ज़्यादा विकल्प > डिवाइस टाइप जोड़ें को चुनें.

अगली टेबल में, अलग-अलग विकल्पों के बीच के अंतर के बारे में बताया गया है. रेंडरिंग का तरीका इससे पता चलता है कि Chrome, पेज को मोबाइल व्यूपोर्ट के तौर पर रेंडर करता है या डेस्कटॉप के व्यूपोर्ट के तौर पर. कर्सर आइकॉन से पता चलता है कि पेज पर कर्सर घुमाने पर, आपको किस तरह का कर्सर दिखता है. ट्रिगर किए गए इवेंट से यह पता चलता है कि पेज के साथ इंटरैक्ट करने पर पेज ट्रिगर हुआ है touch या click इवेंट.

विकल्प	रेंडरिंग का तरीका	कर्सर का आइकॉन	इवेंट ट्रिगर हुआ
मोबाइल	मोबाइल	सर्कल	छूना
मोबाइल (टच की सुविधा नहीं)	मोबाइल	सामान्य	क्लिक
डेस्कटॉप	डेस्कटॉप	सामान्य	क्लिक
डेस्कटॉप (टच)	डेस्कटॉप	सर्कल	छूना

डिवाइस के लिए खास मोड

किसी खास मोबाइल डिवाइस के डाइमेंशन को सिम्युलेट करने के लिए, डाइमेंशन सूची से डिवाइस चुनें.

ज़्यादा जानकारी के लिए, पसंद के मुताबिक मोबाइल डिवाइस जोड़ना देखें.

व्यूपोर्ट को लैंडस्केप ओरिएंटेशन में घुमाएं

व्यूपोर्ट को लैंडस्केप ओरिएंटेशन में घुमाने के लिए, screen_rotation घुमाएं पर क्लिक करें.

ध्यान दें कि अगर आपका डिवाइस टूलबार छोटा हो, तो घुमाएं बटन गायब हो जाता है.

स्क्रीन की दिशा सेट करें भी देखें.

ड्यूअल-स्क्रीन मोड को टॉगल करें

उदाहरण के लिए, Surface Duo जैसे कुछ डिवाइसों में दो स्क्रीन और उन्हें इस्तेमाल करने के दो तरीके होते हैं: एक या दोनों स्क्रीन चालू होने पर.

ड्यूअल-स्क्रीन मोड और सिंगल स्क्रीन के बीच टॉगल करने के लिए, टूलबार में devices_fold टॉगल ड्यूअल-स्क्रीन मोड पर क्लिक करें.

डिवाइस पॉस्चर सेट करें

Asus Zenbook Fold जैसे कुछ डिवाइसों में, फ़ोल्ड किए जा सकने वाले स्क्रीन होते हैं. ऐसी स्क्रीन में पॉस्चर होता है: लगातार या फ़ोल्ड वाला. इसमें एक ही जगह को "सपाट" पोज़िशन पर रखा जाता है और फ़ोल्ड किए गए मोड से, डिसप्ले के अलग-अलग सेक्शन के बीच का ऐंगल बन जाता है.

डिवाइस की पोज़िशन सेट करने के लिए, टूलबार में मौजूद ड्रॉप-डाउन मेन्यू में जाकर, लगातार या फ़ोल्ड किया गया विकल्प को चुनें.

डिवाइस का फ़्रेम दिखाएं

Nest Hub जैसे किसी खास मोबाइल डिवाइस के डाइमेंशन को सिम्युलेट करते समय, व्यूपोर्ट के आस-पास फ़िज़िकल डिवाइस फ़्रेम दिखाने के लिए, ज़्यादा विकल्प > डिवाइस का फ़्रेम दिखाएं चुनें.

इस उदाहरण में, DevTools Nest Hub का फ़्रेम दिखाता है.

कोई कस्टम मोबाइल डिवाइस जोड़ें

कस्टम डिवाइस जोड़ने के लिए:

1. डिवाइस सूची पर क्लिक करें. इसके बाद, बदलाव करें चुनें.

   

2. सेटिंग सेटिंग > डिवाइस टैब में, डिवाइस पर काम करने वाले डिवाइसों की सूची में से कोई डिवाइस चुनें. इसके अलावा, अपना डिवाइस जोड़ने के लिए, कस्टम डिवाइस जोड़ें पर क्लिक करें.

3. अगर आपको अपना डिवाइस जोड़ना है, तो डिवाइस के लिए नाम, चौड़ाई, और ऊंचाई डालें. इसके बाद, जोड़ें पर क्लिक करें.

   

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

4. व्यूपोर्ट पर वापस जाएं, डाइमेंशन सूची से जोड़ा गया नया डिवाइस चुनें.

पैमाना दिखाएं

रूलर देखने के लिए, ज़्यादा विकल्प > रूलर दिखाएं पर क्लिक करें. रूलर के साइज़ की यूनिट, पिक्सल होती है.

DevTools, व्यूपोर्ट के ऊपर और बाईं ओर रूलर दिखाता है.

व्यूपोर्ट की चौड़ाई और ऊंचाई सेट करने के लिए, खास चिह्नों पर रूलर पर क्लिक करें.

व्यूपोर्ट को ज़ूम करें

ज़ूम इन या ज़ूम आउट करने के लिए, ज़ूम करें सूची का इस्तेमाल करें.

स्क्रीनशॉट लें

व्यूपोर्ट में दिखने वाली चीज़ों का स्क्रीनशॉट कैप्चर करने के लिए, ज़्यादा विकल्प > स्क्रीनशॉट कैप्चर करें पर क्लिक करें.

व्यूपोर्ट में दिखाई न देने वाली सामग्री के साथ पूरे पेज का स्क्रीनशॉट कैप्चर करने के लिए, उसी मेन्यू से पूरे आकार का स्क्रीनशॉट कैप्चर करें चुनें.

नेटवर्क और सीपीयू को थ्रॉटल करें

नेटवर्क और सीपीयू, दोनों को थ्रॉटल करने के लिए, थ्रॉटल सूची से मिड-टियर मोबाइल या लो-एंड मोबाइल को चुनें.

मिड-टीयर मोबाइल, तेज़ 3G सुविधा देता है और आपके सीपीयू को थ्रॉटल करता है, ताकि यह सामान्य से चार गुना धीमा हो. कम क्वालिटी वाला मोबाइल, धीमे 3G नेटवर्क को सिम्युलेट करता है और आपके सीपीयू के सीपीयू को सामान्य से 6 गुना धीमा करता है. ध्यान रखें कि थ्रॉटलिंग, आपके लैपटॉप या डेस्कटॉप की सामान्य क्षमता के मुकाबले कम है.

ध्यान दें कि अगर आपका डिवाइस टूलबार छोटा है, तो थ्रॉटल की सूची छिप जाएगी.

सिर्फ़ सीपीयू थ्रॉटल करें

नेटवर्क के बजाय, सिर्फ़ सीपीयू को थ्रॉटल करने के लिए, परफ़ॉर्मेंस पैनल पर जाएं और सेटिंग कैप्चर करें पर क्लिक करें. इसके बाद, सीपीयू की सूची में से 4x धीमा, 6x धीमा या 20x धीमा विकल्प चुनें.

सिर्फ़ नेटवर्क को थ्रॉटल करें

सीपीयू के बजाय, सिर्फ़ नेटवर्क को थ्रॉटल करने के लिए, नेटवर्क पैनल पर जाएं. इसके बाद, थ्रॉटल की सूची में से फ़ास्ट 3G या स्लो 3G को चुनें.

इसके अलावा, Command मेन्यू खोलने के लिए Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. इसके बाद, 3G टाइप करें और तेज़ 3G थ्रॉटलिंग चालू करें या धीमा 3G थ्रॉटलिंग चालू करें चुनें.

परफ़ॉर्मेंस पैनल में जाकर भी नेटवर्क थ्रॉटलिंग को सेट किया जा सकता है. कैप्चर सेटिंग पर क्लिक करें और फिर नेटवर्क सूची से फ़ास्ट 3G या स्लो 3G चुनें.

सेंसर को एम्युलेट करें

भौगोलिक स्थान बदलने, डिवाइस की स्क्रीन की दिशा को सिम्युलेट करने, ज़बरदस्ती टच करने, और डिवाइस इस्तेमाल न होने की स्थिति को एम्युलेट करने के लिए सेंसर पैनल का इस्तेमाल करें.

अगले सेक्शन में, जियोलोकेशन को बदलने और डिवाइस की स्क्रीन की दिशा सेट करने का तरीका बताया गया है. सुविधाओं की पूरी सूची के लिए, डिवाइस के सेंसर को एम्युलेट करें पर जाएं.

भौगोलिक स्थान बदलें

जियोलोकेशन बदलने वाला यूज़र इंटरफ़ेस (यूआई) खोलने के लिए, DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें पर क्लिक करें और फिर ज़्यादा टूल > सेंसर चुनें.

इसके अलावा, Command मेन्यू खोलने के लिए, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. इसके बाद, Sensors टाइप करें और सेंसर दिखाएं को चुनें.

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

ओरिएंटेशन सेट करें

ओरिएंटेशन यूज़र इंटरफ़ेस (यूआई) खोलने के लिए, DevTools को पसंद के मुताबिक बनाएं और कंट्रोल करें पर क्लिक करें. इसके बाद ज़्यादा टूल > सेंसर चुनें.

इसके अलावा, Command मेन्यू खोलने के लिए, Command+Shift+P (Mac) या Control+Shift+P (Windows, Linux, ChromeOS) दबाएं. इसके बाद, Sensors टाइप करें और सेंसर दिखाएं को चुनें.

ओरिएंटेशन सूची से कोई एक प्रीसेट चुनें या ऐल्फ़ा, बीटा, और गामा वैल्यू सेट करने के लिए कस्टम ओरिएंटेशन चुनें.