Mobile simulator Chrome extension बनाम DevTools: कौन-सा इस्तेमाल करें

मोबाइल सिम्युलेटर Chrome एक्सटेंशन और Chrome DevTools का device mode, दोनों डेस्कटॉप Chrome के अंदर वेबसाइट को फ़ोन के साइज़ में दिखाते हैं। आँखों से जाँच के लिए एक्सटेंशन तेज़ है, क्योंकि वह एक बटन से चलता है और ब्राउज़ करते समय चालू रहता है। डीबगिंग के लिए DevTools बेहतर है, क्योंकि इंस्पेक्टर और console प्रीव्यू के ठीक बगल में होते हैं। touch इनपुट या Safari rendering के मामले में दोनों में से कोई भी असली फ़ोन की जगह नहीं ले सकता।

बाक़ी लेख इसी को खोलकर समझाता है, ताकि आप आदत से नहीं, काम के हिसाब से टूल चुनें।

Chrome में “मोबाइल सिम्युलेटर” का मतलब क्या है

डेस्कटॉप Chrome के अंदर चलने वाली हर चीज़ फ़ोन के माहौल की नक़ल है, फ़ोन की नहीं। अच्छा टूल वे संकेत बदल देता है जिनसे वेबसाइट तय करती है कि उसे कैसा दिखना है:

• viewport की चौड़ाई और ऊँचाई, जिन पर CSS media queries चलती हैं
• user agent स्ट्रिंग और Sec-CH-UA-Mobile client hint, जिन्हें कई सर्वर और स्क्रिप्ट पढ़ते हैं
• screen.width, screen.height और devicePixelRatio, जिन्हें JavaScript पढ़ता है
• navigator.maxTouchPoints जैसे touch सपोर्ट वाले फ़्लैग

पेज फिर भी आपके कंप्यूटर के CPU पर Chrome के Blink इंजन से ही बनता है। इसीलिए यहाँ “सिम्युलेटर” शब्द ढीले अर्थ में इस्तेमाल होता है। इसके उलट, Apple का Xcode Simulator असली iOS Safari चलाता है।

दोनों तरीकों की तुलना

तस्वीर साफ़ है। एक्सटेंशन एक फ़ोन व्यू है जिसके साथ और कुछ नहीं जुड़ा। device mode एक डीबगर है जिसके साथ फ़ोन व्यू जुड़ा है।

कब एक्सटेंशन बेहतर है

एक्सटेंशन तब इस्तेमाल करें जब आपको बार-बार और जल्दी देखना हो कि मोबाइल वर्शन कैसा दिखता है:

• रिलीज़ के बाद साइट का हर पेज देखना
• कॉल के दौरान क्लाइंट को दिखाना कि साइट फ़ोन पर कैसी दिखती है
• push करने से पहले localhost पर पेज जाँचना (या असली फ़ोन पर, जैसा मोबाइल पर localhost टेस्ट करना में बताया है)
• टिकट या डिज़ाइन रिव्यू के लिए फ़ोन साइज़ वाले स्क्रीनशॉट लेना

Mobile View Extension इसी काम के लिए बना एक उदाहरण है। यह मौजूदा टैब को फ़ोन या टैबलेट के फ़्रेम में दोबारा लोड करता है, डिवाइस के हिसाब से user agent, client hints, स्क्रीन साइज़ और pixel ratio लागू करता है, और पेज बदलने पर भी प्रीव्यू चालू रखता है। आप landscape में घुमा सकते हैं, अपना resolution डाल सकते हैं और फ़्रेम वाले व्यू का PNG सेव कर सकते हैं। चुना हुआ डिवाइस जैसी सेटिंग्स याद रहती हैं।

कब DevTools device mode बेहतर है

device mode तब इस्तेमाल करें जब आपको देखना हो कि कुछ ग़लत क्यों दिख रहा है। आम मामले:

• 375 px पर कौन-सा CSS नियम जीत रहा है, यह देखना
• console की वे errors पढ़ना जो सिर्फ़ मोबाइल पर आती हैं
• एमुलेटेड touch events से स्वाइप या टैप हैंडलर टेस्ट करना
• CPU को धीमा करके देखना कि कोई स्क्रिप्ट पहला render तो नहीं रोक रही

स्टेप-बाय-स्टेप सेटअप Chrome मोबाइल एमुलेटर गाइड में है।

सीमाएँ जो ब्राउज़र के अंदर चलने वाले हर सिम्युलेटर पर लागू होती हैं

Chrome के अंदर कोई भी टूल क्या दिखाता है, इस बारे में ख़ुद से ईमानदार रहें। Mobile View Extension की लिस्टिंग अपनी सीमाएँ साफ़ बताती है, और वे इस पूरी कैटेगरी में आम हैं:

1. प्रीव्यू डेस्कटॉप Chrome के अंदर एक फ़्रेम में चलता है, नेटिव डिवाइस एमुलेशन के रूप में नहीं।
2. Touch events नहीं बनते; आप माउस से इंटरैक्ट करते हैं।
3. device pixel ratio, pointer और hover वाली media queries पूरी तरह एमुलेट नहीं होतीं। चौड़ाई वाले breakpoints फ़्रेम वाले viewport के हिसाब से चलते हैं।

DevTools की भी अपनी ऐसी सीमाएँ हैं: वह Safari के bugs, असली मेमोरी का दबाव या ऑन-स्क्रीन कीबोर्ड नहीं दिखा सकता। इनके लिए असली iPhone या Android फ़ोन पर टेस्ट करें, या Xcode और Android Studio के एमुलेटर में, जिनके बारे में iPhone पर टेस्टिंग और Android पर टेस्टिंग में लिखा है।

कोई भी मोबाइल सिम्युलेटर एक्सटेंशन इंस्टॉल करने से पहले पूछने लायक़ सवाल

जो एक्सटेंशन पेज लोड होने का तरीका बदलते हैं, उन्हें बड़ी परमिशन चाहिए, इसलिए सोच-समझकर चुनें:

• यह कौन-सा डेटा इकट्ठा करता है? प्राइवेसी पॉलिसी पढ़ें। मोबाइल प्रीव्यू टूल के पास आपकी ब्राउज़िंग हिस्ट्री कहीं भेजने की कोई वजह नहीं है। Mobile View Extension की प्राइवेसी पॉलिसी में लिखा है कि यह कोई निजी डेटा या ब्राउज़िंग हिस्ट्री इकट्ठा नहीं करता।
• क्या यह user agent बदलता है या सिर्फ़ चौड़ाई? सिर्फ़ चौड़ाई बदलने वाले टूल विंडो छोटी करने जैसे ही हैं। देखें विंडो छोटी करना मोबाइल वर्शन क्यों नहीं है।
• क्या यह localhost और लॉगिन के पीछे वाले पेजों पर काम करता है? कई ऑनलाइन “responsive checker” इन दोनों तक नहीं पहुँच पाते।
• क्या इसका रखरखाव होता है? Chrome Web Store में आख़िरी अपडेट की तारीख़ देखें।

दोनों को साथ इस्तेमाल करने का आसान तरीका

जो लोग हर दिन मोबाइल लेआउट टेस्ट करते हैं, वे ज़्यादातर काम बाँट लेते हैं: हर पेज पर पहली नज़र के लिए एक्सटेंशन, और जिन पेजों में कुछ ग़लत है उनके लिए DevTools। चेकआउट या साइन-अप जैसे अहम फ़्लो की आख़िरी जाँच के लिए असली फ़ोन जोड़ लें। इससे दिखावट, डीबगिंग और touch, तीनों कवर हो जाते हैं, और हर जाँच धीमी नहीं होती।

अक्सर पूछे जाने वाले सवाल

क्या मोबाइल सिम्युलेटर एक्सटेंशन इस्तेमाल करना सुरक्षित है?

यह एक्सटेंशन पर निर्भर है। ऐसा एक्सटेंशन चुनें जिसकी प्राइवेसी पॉलिसी साफ़ हो, जिसके अंदर कोई एनालिटिक्स या ट्रैकिंग न हो, और जो हाल में अपडेट हुआ हो। Chrome Web Store में उसकी माँगी गई परमिशन देखें।

क्या Chrome एक्सटेंशन iPhone को हूबहू एमुलेट कर सकता है?

नहीं। यह iPhone का viewport, user agent और pixel ratio मिला सकता है, लेकिन पेज Chrome के इंजन से बनता है, Safari के इंजन से नहीं। Safari से जुड़ी जाँच के लिए Xcode Simulator या असली iPhone इस्तेमाल करें।

अगर मैं एक्सटेंशन इस्तेमाल करता हूँ, तो क्या DevTools की ज़रूरत फिर भी है?

हाँ, डीबगिंग के लिए। एक्सटेंशन दिखाता है कि लेआउट टूट रहा है; DevTools दिखाता है कि कौन-सा नियम उसे तोड़ रहा है।