Chrome के मोबाइल एमुलेटर को device mode कहते हैं, और यह Chrome DevTools में पहले से मौजूद है। DevTools खोलें, Windows और Linux पर Ctrl + Shift + M या Mac पर Cmd + Shift + M दबाएँ, Dimensions मेन्यू से कोई फ़ोन चुनें और पेज रीलोड करें। इसके बाद Chrome पेज को उसी फ़ोन के viewport, pixel ratio और user agent के साथ दिखाता है।
यह गाइड रोज़ की मोबाइल टेस्टिंग में काम आने वाले हर कंट्रोल को समझाती है, और आख़िर में बताती है कि device mode क्या नहीं दिखा सकता।
Chrome में device mode कैसे खोलें
- वह पेज खोलें जिसे टेस्ट करना है।
- DevTools खोलें:
F12, याCtrl + Shift + I(Windows, Linux) याCmd + Option + I(Mac) दबाएँ। पेज पर राइट-क्लिक करके Inspect भी चुन सकते हैं। - DevTools के ऊपर बाईं ओर Toggle device toolbar आइकन (फ़ोन और टैबलेट वाला) पर क्लिक करें, या DevTools पर फ़ोकस रहते हुए ऊपर वाला शॉर्टकट दबाएँ।
- पेज रीलोड करें ताकि साइट को पहली रिक्वेस्ट से ही मोबाइल user agent मिले।
चौथा स्टेप ही लोग अक्सर छोड़ देते हैं। रीलोड के बिना, जो साइट सर्वर पर डिवाइस पहचानती है, वह आपको पहले ही अपना डेस्कटॉप HTML भेज चुकी होती है।
डिवाइस या अपना साइज़ चुनना
viewport के ऊपर वाले Dimensions ड्रॉपडाउन में दो मोड हैं।
Responsive में आप viewport के किनारे खींच सकते हैं या चौड़ाई और ऊँचाई टाइप कर सकते हैं। ठीक किस चौड़ाई पर लेआउट टूटता है, यह ढूँढने के लिए इसे इस्तेमाल करें। viewport के ऊपर वाली पट्टी में तैयार चौड़ाइयाँ शॉर्टकट के रूप में होती हैं (Mobile S 320, Mobile M 375, Mobile L 425, Tablet 768, Laptop 1024)।
नाम वाला डिवाइस, जैसे कोई iPhone या Pixel मॉडल, चौड़ाई, ऊँचाई, device pixel ratio और user agent एक साथ सेट करता है। डिफ़ॉल्ट लिस्ट छोटी होती है। ज़्यादा डिवाइस चालू करने के लिए लिस्ट के नीचे Edit पर क्लिक करें, या Add custom device से नाम, चौड़ाई, ऊँचाई, pixel ratio और user agent स्ट्रिंग के साथ अपना डिवाइस बनाएँ। जब आपका फ़ोन Chrome की लिस्ट से नया हो, तब custom device काम आता है। मौजूदा iPhone की वैल्यू iPhone viewport चार्ट में हैं।
घूमने वाला आइकन portrait और landscape के बीच बदलता है।
धीमे फ़ोन की नक़ल: नेटवर्क और CPU throttling
डेस्कटॉप कंप्यूटर आम फ़ोन से कई गुना तेज़ होता है। device mode इस फ़र्क़ को कुछ हद तक कम कर सकता है:
- device toolbar के Throttling मेन्यू में mid-tier और low-end मोबाइल के प्रीसेट हैं, जो नेटवर्क और CPU दोनों को धीमा करते हैं।
- Performance पैनल में CPU throttling अलग से सेट कर सकते हैं (जैसे 4x या 6x धीमा)।
- Network पैनल में Fast 4G, Slow 4G या 3G जैसे नेटवर्क प्रीसेट चुन सकते हैं।
Throttling एक नक़ल है, असली हार्डवेयर का माप नहीं। इसे बड़ी समस्याएँ पकड़ने के लिए इस्तेमाल करें, जैसे कोई स्क्रिप्ट जो दो सेकंड तक rendering रोक देती है। रिपोर्ट करने लायक़ आँकड़ों के लिए मोबाइल पेज स्पीड टेस्ट गाइड और Lighthouse मोबाइल ऑडिट गाइड देखें।
Touch, sensors और एमुलेशन की बाक़ी सेटिंग्स
मोबाइल डिवाइस चुनने पर Chrome माउस events की जगह touch events भेजता है और कर्सर एक गोले में बदल जाता है। इससे आप स्वाइप वाले carousel और टैप हैंडलर मोटे तौर पर टेस्ट कर सकते हैं, हालाँकि माउस फिर भी अँगूठे से अलग तरह चलता है।
device toolbar के तीन बिंदु वाले मेन्यू में और विकल्प हैं: Show media queries आपके breakpoints को रंगीन पट्टियों के रूप में दिखाता है, Show rulers पिक्सेल रूलर जोड़ता है, और Add device pixel ratio व Add device type इन सेटिंग्स को टूलबार में ले आते हैं। Sensors पैनल (Command Menu से Ctrl + Shift + P या Cmd + Shift + P दबाकर खोलें) geolocation और डिवाइस की दिशा (orientation) को बदल सकता है।
Device mode में मोबाइल स्क्रीनशॉट लेना
device toolbar का तीन बिंदु वाला मेन्यू खोलें और दिख रहे हिस्से के लिए Capture screenshot या पूरे पेज के लिए Capture full size screenshot चुनें। अगर आपने नाम वाला डिवाइस चुना है, तो फ़ोन की आउटलाइन शामिल करने के लिए पहले Show device frame चालू करें। दूसरे तरीकों से इसकी तुलना वेबसाइट का मोबाइल स्क्रीनशॉट कैसे लें में की गई है।
Device mode क्या नहीं दिखा सकता
Device mode localhost पर भी काम करता है। उसी लोकल सर्वर को असली फ़ोन पर टेस्ट करने के लिए मोबाइल पर localhost टेस्ट करना देखें।
Chrome का अपना डॉक्यूमेंटेशन device mode को “first-order approximation”, यानी मोटा अंदाज़ा कहता है। इसकी सीमाएँ असली हैं:
| पहलू | Device mode क्या करता है | क्या नहीं कर सकता |
|---|---|---|
| Rendering इंजन | डेस्कटॉप Chrome (Blink) इस्तेमाल करता है | Safari या iOS के ख़ास bugs दिखाना |
| परफ़ॉर्मेंस | धीमे CPU और नेटवर्क की नक़ल करता है | असली फ़ोन की गर्मी से जुड़ी सीमाएँ, मेमोरी या GPU दोहराना |
| इनपुट | माउस से touch events भेजता है | कई उँगलियों वाले gesture, अँगूठे की पहुँच या ऑन-स्क्रीन कीबोर्ड का व्यवहार दोहराना |
| ब्राउज़र UI | पेज वाला हिस्सा दिखाता है | iOS और Android का असली एड्रेस बार, टूलबार और safe area दिखाना |
Safari के लिए Xcode Simulator या असली iPhone इस्तेमाल करें (गाइड)। असली हार्डवेयर पर Android Chrome के लिए फ़ोन कनेक्ट करें और कंप्यूटर पर chrome://inspect खोलें (गाइड)।
Device mode या मोबाइल व्यू एक्सटेंशन?
डीबगिंग के समय device mode बेहतर है: Elements, Console और Network पैनल प्रीव्यू के ठीक बगल में होते हैं (इन पैनलों की जानकारी Chrome DevTools गाइड में है)। लेकिन सिर्फ़ जल्दी से देखने के लिए इसमें काफ़ी सेटअप लगता है, क्योंकि DevTools खुला रखना पड़ता है और हर टैब में एमुलेशन फिर से सेट करना पड़ता है।
Mobile View Extension जैसा मोबाइल व्यू एक्सटेंशन देखने वाला काम एक क्लिक में कर देता है और DevTools बंद रहता है। यह डिवाइस का user agent, स्क्रीन साइज़ और pixel ratio लागू करता है, फ़ोन का फ़्रेम दिखाता है और दूसरे पेज पर जाने पर भी चालू रहता है। यह touch events नहीं बनाता, इसलिए touch टेस्टिंग के लिए device mode ही सही टूल है। दोनों के फ़ायदे-नुक़सान मोबाइल सिम्युलेटर एक्सटेंशन बनाम DevTools में हैं।
अक्सर पूछे जाने वाले सवाल
Chrome मोबाइल एमुलेटर का शॉर्टकट क्या है?
DevTools खुला और फ़ोकस में हो, तो Windows और Linux पर Ctrl + Shift + M या macOS पर Cmd + Shift + M दबाएँ।
Device mode में भी साइट डेस्कटॉप वर्शन जैसी क्यों दिखती है?
डिवाइस चुनने के बाद पेज रीलोड करें। कुछ साइटें पहली रिक्वेस्ट पर ही तय कर लेती हैं कि कौन-सा वर्शन भेजना है, यानी एमुलेटेड user agent सेट होने से पहले।
क्या Chrome में iPhone एमुलेट कर सकते हैं?
आप iPhone का स्क्रीन साइज़, pixel ratio और user agent एमुलेट कर सकते हैं। लेकिन पेज फिर भी Chrome के इंजन से बनता है, Safari के WebKit से नहीं, इसलिए सिर्फ़ Safari में आने वाले bugs नहीं दिखेंगे।