कंप्यूटर से किसी वेबसाइट को Android पर टेस्ट करने के लिए पहले डेस्कटॉप Chrome में Android के साइज़ वाले व्यू से शुरू करें, फिर Android Studio के एमुलेटर पर या USB debugging से जुड़े असली फ़ोन पर पक्का करें। डेस्कटॉप Chrome, iPhone के मुक़ाबले Android की ज़्यादा क़रीबी नक़ल है, क्योंकि Android पर Chrome उसी Blink इंजन पर चलता है। एमुलेटर और असली फ़ोन वह जोड़ते हैं जो डेस्कटॉप Chrome नहीं दे सकता: असली ब्राउज़र UI, कीबोर्ड और मोबाइल हार्डवेयर।
iPhone के मुक़ाबले Android की नक़ल आसान क्यों है
iPhone पर ब्राउज़र इंजन लगभग हमेशा WebKit होता है, जिसे डेस्कटॉप Chrome इस्तेमाल नहीं करता। Android पर ज़्यादातर लोगों का डिफ़ॉल्ट ब्राउज़र Chrome है, जो डेस्कटॉप Chrome वाले इंजन पर ही बना है। इसलिए जब आप डेस्कटॉप Chrome में Android फ़ोन एमुलेट करते हैं, तो CSS और JavaScript का व्यवहार आम तौर पर वही रहता है, और मुख्य फ़र्क़ स्क्रीन साइज़, इनपुट, परफ़ॉर्मेंस और ब्राउज़र UI में होते हैं।
दिक़्क़त है विविधता। Android फ़ोन कई चौड़ाइयों (portrait में आम तौर पर 360 से 412 CSS पिक्सेल), pixel ratio और ब्राउज़रों में आते हैं। Samsung फ़ोन में पहले से इंस्टॉल Samsung Internet का अपना रिलीज़ शेड्यूल और अपनी सेटिंग्स हैं, जैसे ज़बरदस्ती लगने वाला dark mode, जो साइट की दिखावट बदल सकती हैं।
स्टेप 1: Chrome में Android के साइज़ वाला व्यू
लेआउट की जाँच के लिए इनमें से कोई भी टूल इस्तेमाल करें:
- DevTools का device mode। DevTools खोलें,
Ctrl + Shift + M(Mac परCmd + Shift + M) दबाएँ, Pixel या Galaxy का कोई प्रीसेट चुनें और रीलोड करें। device mode touch events एमुलेट करता है और CPU व नेटवर्क को धीमा करने देता है। पूरे स्टेप: Chrome मोबाइल एमुलेटर गाइड। - मोबाइल व्यू एक्सटेंशन। Mobile View Extension में Android प्रीसेट हैं, और यह DevTools खोले बिना मौजूदा टैब को मेल खाते user agent, स्क्रीन साइज़ और pixel ratio के साथ रीलोड करता है। बहुत सारे पेज जल्दी-जल्दी देखने के लिए यह काम का है।
कम-से-कम 360 px और 412 px चौड़ाई पर टेस्ट करें, landscape भी।
स्टेप 2: Android Studio का एमुलेटर
Android Studio, Android के लिए Google का मुफ़्त डेवलपमेंट टूल है, जो Windows, macOS और Linux के लिए उपलब्ध है। इसमें एक एमुलेटर है जो पूरा Android सिस्टम इमेज चलाता है।
- Android Studio इंस्टॉल करें और Device Manager खोलें।
- एक वर्चुअल डिवाइस बनाएँ। कोई फ़ोन प्रोफ़ाइल और ऐसा सिस्टम इमेज चुनें जिसमें Google Play हो, ताकि Chrome पहले से इंस्टॉल रहे।
- डिवाइस शुरू करें, Chrome खोलें और अपना URL डालें।
एमुलेटर से अपने कंप्यूटर के development सर्वर तक पहुँचने के लिए localhost की जगह ख़ास पता 10.0.2.2 इस्तेमाल करें। जैसे http://10.0.2.2:5173 आपकी मशीन के पोर्ट 5173 वाले सर्वर तक पहुँचता है। ठीक-ठाक स्पीड पर चलने के लिए एमुलेटर को BIOS या सिस्टम सेटिंग्स में hardware virtualization चालू चाहिए।
स्टेप 3: remote debugging के साथ असली Android फ़ोन
असली फ़ोन असली परफ़ॉर्मेंस और touch का व्यवहार दिखाता है, और Chrome आपको डेस्कटॉप से उसे इंस्पेक्ट करने देता है:
- फ़ोन पर Settings > About phone खोलें और Developer options चालू करने के लिए Build number पर सात बार टैप करें।
- Developer options में USB debugging चालू करें।
- फ़ोन को USB से जोड़ें और फ़ोन पर debugging की अनुमति दें।
- कंप्यूटर पर Chrome खोलें और
chrome://inspect/#devicesपर जाएँ। - फ़ोन के Chrome में अपनी साइट खोलें, फिर डेस्कटॉप पर उसके बगल में inspect पर क्लिक करें।
आपको फ़ोन पर चल रहे पेज के लिए पूरा DevTools मिलता है, लाइव screencast समेत। इसी पेज पर Port forwarding भी है, जो फ़ोन के किसी पोर्ट को आपके कंप्यूटर से जोड़ता है, ताकि फ़ोन पर localhost:3000 खोलने से आपका लोकल सर्वर खुले। इसके बारे में मोबाइल पर localhost कैसे टेस्ट करें में और जानकारी है।
ब्राउज़र में चलने वाले Android emulator का क्या?
“android emulator online” या “android emulator for pc” खोजने वाले आम तौर पर दो में से एक चीज़ चाहते हैं। कुछ लोग ऐसी वेबसाइट चाहते हैं जो ब्राउज़र टैब में Android चलाए। ऐसी सर्विस मौजूद हैं; वे दूर चल रहे एमुलेटर या असली डिवाइस को स्ट्रीम करती हैं और आम तौर पर पेड या समय-सीमा वाली होती हैं। दूसरे लोग चाहते हैं कि Chrome ख़ुद Android फ़ोन की तरह बर्ताव करे, और ठीक यही device mode या मोबाइल व्यू एक्सटेंशन करता है।
वेबसाइट टेस्टिंग के लिए लेआउट के मामले में दूसरा तरीका लगभग हमेशा काफ़ी है, और बाक़ी Android Studio का एमुलेटर या असली फ़ोन कवर कर देता है। जब लोकल रूप से कुछ इंस्टॉल नहीं कर सकते, तब रिमोट स्ट्रीमिंग सर्विस काम आती हैं।
Android पर ख़ास तौर से क्या जाँचें
- 360 और 412 px की viewport चौड़ाई, जो मध्यम दर्जे और फ़्लैगशिप फ़ोन के सबसे आम साइज़ हैं।
- ऑन-स्क्रीन कीबोर्ड। इसके खुलने पर दिखने वाला viewport छोटा हो जाता है। तय फ़ुटर और चैट बटन इनपुट फ़ील्ड को ढक सकते हैं।
- सिस्टम का back बटन और gesture। single-page ऐप को history ऐसे संभालनी चाहिए कि “back” वही करे जो यूज़र उम्मीद करता है।
- Dark mode। Samsung Internet और Chrome की प्रायोगिक सेटिंग्स उन पेजों को गहरा कर सकती हैं जो अपनी कलर स्कीम नहीं बताते।
- फ़ॉन्ट स्केलिंग। Android यूज़र अक्सर सिस्टम फ़ॉन्ट साइज़ बढ़ाते हैं। जाँचें कि टेक्स्ट बढ़ने पर लेआउट न टूटे।
- मध्यम दर्जे के डिवाइस पर परफ़ॉर्मेंस। DevTools में CPU throttling या असली मध्यम दर्जे का फ़ोन इस्तेमाल करें; फ़्लैगशिप फ़ोन धीमे JavaScript को छिपा देते हैं।
लॉन्च से पहले की पूरी लिस्ट के लिए मोबाइल वेबसाइट टेस्टिंग चेकलिस्ट देखें।
अक्सर पूछे जाने वाले सवाल
क्या Chrome का Android एमुलेशन सटीक है?
लेआउट और ज़्यादातर CSS व JavaScript के लिए हाँ, क्योंकि Android Chrome वही इंजन इस्तेमाल करता है। परफ़ॉर्मेंस, touch gestures और ब्राउज़र UI के लिए यह कम सटीक है, इसलिए अहम फ़्लो असली फ़ोन पर पक्का करें।
Android एमुलेटर में localhost कैसे खोलें?
localhost की जगह 10.0.2.2 इस्तेमाल करें, पोर्ट वही रखें, जैसे http://10.0.2.2:3000।
क्या सिर्फ़ वेबसाइट टेस्ट करने के लिए Android Studio चाहिए?
नहीं। लेआउट की ज़्यादातर जाँच डेस्कटॉप Chrome में हो जाती है। Android Studio तब इंस्टॉल करने लायक़ है जब आपको असली Android ब्राउज़र UI, कीबोर्ड का व्यवहार या कोई ख़ास Android वर्शन चाहिए।