मोबाइल के लिए डेवलप करना उतना ही आसान होना चाहिए जितना डेस्कटॉप के लिए. हम Chrome DevTools में लगातार काम कर रहे हैं, ताकि आपके लिए काम करना आसान हो सके. अब कुछ नई सुविधाओं को लॉन्च करने का समय आ गया है. इनसे आपके मोबाइल वेब डेवलपमेंट में काफ़ी सुधार होगा. सबसे पहले, रिमोट डीबगिंग की सुविधा उपलब्ध कराई जाएगी. इसके बाद, हम सही मोबाइल इम्यूलेशन की सुविधा लॉन्च करेंगे.
अपने डिवाइस की स्क्रीन को डेस्कटॉप पर स्क्रीनकास्ट करना
अब तक, रिमोट डीबगिंग के दौरान आपको अपने डिवाइस और डेवलपर टूल के बीच बार-बार स्विच करना पड़ता था. अब, स्क्रीनकास्ट की सुविधा से, आपके डिवाइस की स्क्रीन, डेवलपर टूल के साथ-साथ दिखती है. इसे देखना अच्छा है, लेकिन इससे इंटरैक्ट करना और भी बेहतर है:
- स्क्रीनकास्ट पर क्लिक करने पर, उन्हें टैप में बदल दिया जाता है. साथ ही, डिवाइस पर सही टच इवेंट ट्रिगर होते हैं.
- अपने डिवाइस पर, डेस्कटॉप पॉइंटर की मदद से एलिमेंट की जांच करना
- अपने डेस्कटॉप कीबोर्ड पर टाइप करें--सभी कीस्ट्रोक डिवाइस पर भेजे जाते हैं. इससे अंगूठों से टाइप करने में लगने वाला समय बहुत कम हो जाता है.
- अपने पॉइंटर से पेज को फ़्लिंग करके या लैपटॉप के ट्रैकपैड पर स्लाइड करके, पेज को स्क्रोल करें.
स्क्रीनकास्ट करने के बारे में पूरा दस्तावेज़, इनके अलावा और भी कई चीज़ों के बारे में बताता है. जैसे, पिंच करके ज़ूम करने का जेस्चर भेजना. Android पर Chrome का बीटा वर्शन (m32) ज़रूरी है.
आसानी से रिमोट तरीके से डीबग करना
Chrome ने 18 महीने पहले, WebKit ब्राउज़र के लिए रिमोट डीबगिंग की सुविधा लॉन्च की थी. हालांकि, उस समय इसे आज़माने के लिए, आपको 400 एमबी का Android SDK टूल डाउनलोड करना पड़ता था. साथ ही, अपने $PATH में adb बाइनरी और कुछ जादुई कमांड लाइन इनकंशन जोड़ने होते थे.
अब हमें यह बताते हुए खुशी हो रही है कि आपको इन सभी समस्याओं से छुटकारा मिल गया है. Chrome अब यूएसबी से कनेक्ट किए गए डिवाइसों को नेटिव तरीके से ढूंढ सकता है और उनसे इंटरैक्ट कर सकता है. हमने Chrome में सीधे यूएसबी के ज़रिए adb प्रोटोकॉल लागू किया है, ताकि आप आसानी से Menu > Tools > Inspect Devices पर जाकर, रिमोट डीबगिंग सेशन तुरंत शुरू कर सकें.
यह सुविधा, Chrome OS के साथ-साथ सभी प्लैटफ़ॉर्म पर बेहतर तरीके से काम करती है. हालांकि, ध्यान रखें कि Windows पर डिवाइस से कनेक्ट करने के लिए, आपको पहले सही यूएसबी ड्राइवर इंस्टॉल करने होंगे. अगर आपने पहले कभी ऐसा नहीं किया है, तो आपको डिवाइस पर यूएसबी डीबगिंग की सुविधा भी चालू करनी होगी. साथ ही, यह पुष्टि करनी होगी कि आपने Chrome for Android के बीटा वर्शन का इस्तेमाल किया है. पूरे दस्तावेज़ पढ़ें.
लोकल प्रोजेक्ट के लिए पोर्ट-फ़ॉरवर्ड
आपने localhost:8000 पर डेवलप किया है, लेकिन आपका फ़ोन उस पर ऐक्सेस नहीं कर सकता. इसलिए, हमने पोर्ट फ़ॉरवर्ड करने की सुविधा को सीधे तौर पर रिमोट डीबगिंग वर्कफ़्लो में जोड़ा है. अब टनल करने के किसी भी तरीके के बिना, अपने पूरे प्रोजेक्ट पर आसानी से काम किया जा सकता है. about:inspect पर क्लिक करके, पोर्ट फ़ॉरवर्डिंग में जाकर सेट करें कि आपको कौनसे पोर्ट उपलब्ध कराने हैं. अगर पोर्ट उपलब्ध हैं, तो वे हरे रंग में जल उठेंगे.
मोबाइल एम्युलेशन
क्या आपके पास हमेशा ऐसे डिवाइस होते हैं जिन पर ऐप्लिकेशन के काम करने की जांच की जा सके? रीयल डिवाइसों को रिमोट से डीबग करने से, आपको परफ़ॉर्मेंस और टच के बारे में बेहतर जानकारी मिलती है. हालांकि, अब डेस्कटॉप पर डिवाइस की कई विशेषताओं को रीयल तरीके से एमुलेट किया जा सकता है. इससे आपका समय बचता है और आपके आइटरेशन लूप को तेज़ी से पूरा किया जा सकता है.
फ़ुल टच इवेंट सिम्युलेशन की मदद से, स्क्रीन साइज़, devicePixelRatio, और <meta viewport> को एमुलेट करना
अगर आपने डिवाइस मेट्रिक की पिछली सुविधा देखी है, तो अब जो सुविधा उपलब्ध है वह काफ़ी बेहतर है. टीम ने इस बात पर काफ़ी मेहनत की है कि नए मोबाइल इम्यूलेशन में, आपको असल डिवाइसों पर दिखने वाली चीज़ों के जैसी ही चीज़ें दिखें. उदाहरण के लिए, WebKit ब्राउज़र में टेक्स्ट के अपने-आप साइज़ बदलने का एक जटिल एल्गोरिदम होता है. असल में, हर डिवाइस में टेक्स्ट के अपने-आप साइज़ बदलने के लिए एक खास "फ़ज फ़ैक्टर" होता है. यह फ़ैक्टर, टेक्स्ट को आसानी से पढ़ने लायक बनाने के लिए बदलता रहता है. इम्यूलेशन मोड में, इस बात की पुष्टि की जा सकती है कि यह सुविधा लागू की जा रही है या नहीं. साथ ही, इसके नतीजे भी देखे जा सकते हैं.
डिवाइस पिक्सल का अनुपात
अब तक, यह देखना मुश्किल था कि हाई-डीपीआई डिवाइस, लो-डीपीआई डिवाइस पर क्या दिखाता है. अब DevTools में dPR इम्यूलेशन, आपके व्यू को अडजस्ट करेगा, ताकि डीप डीपीआई की स्थिति में ज़ूम इन किया जा सके. इसके अलावा, window.devicePixelRatio, @media (-webkit-min-device-pixel-ratio: 2), image-set( url(pic2x.jpg) 2x, …) वगैरह सेटिंग को दिखा सकते हैं. इससे आपको यह देखने में मदद मिलेगी कि आपका ऐप्लिकेशन अलग-अलग डीपीआई के हिसाब से एसेट लोड करने के साथ-साथ, कैसे अडैप्ट होता है.
डिवाइस इम्यूलेशन, ब्राउज़र की सुविधाओं या गड़बड़ियों तक नहीं पहुंचता. इसलिए, iOS को एमुलेट करते समय, WebGL अब भी काम करेगा और आपको iOS 5 के ओरिएंटेशन ज़ूम बग का सामना नहीं करना पड़ेगा. इस बदलाव को देखने के लिए, डिवाइस पर जाएं.
<meta viewport> (और @viewport) का सही तरीके से एम्यूलेशन करना
width=device-width और minimum-scale:1.0 के व्यवहार की जांच करने के लिए, पहले सिर्फ़ डिवाइस पर गेम खेलना पड़ता था. अब अलग-अलग व्यूपोर्ट को तुरंत आज़माया जा सकता है और यह देखा जा सकता है कि वे कैसे रेंडर होते हैं.
टच इवेंट सिम्युलेशन
टच स्क्रीन को एमुलेट करें सेटिंग से यह पक्का किया जा सकेगा कि आपके क्लिक को touchstart वगैरह के तौर पर समझा जाए. साथ ही, ज़ूम, स्क्रोल, और पैन जैसे सिंथेटिक इवेंट भी काम करेंगे. पिंच करके ज़ूम करने के लिए, कॉन्टेंट पर ज़ूम करने के लिए shift+खींचें और छोड़ें या shift+स्क्रोल करें. आपको व्यूपोर्ट से ज़्यादा स्केल किए गए कॉन्टेंट का बेहतरीन व्यू मिलेगा.
आखिर में, अनुरोध हेडर और window.navigator लेवल, दोनों पर यूज़र एजेंट स्पूफिंग, जगह की जानकारी, और ओरिएंटेशन इम्यूलेशन की सुविधाओं की मदद से, अपने डिवाइस की सभी सुविधाओं को एक्सप्लोर किया जा सकता है.
डिवाइस के लिए प्रीसेट
इम्यूलेशन प्रीसेट की मदद से, कोई फ़ोन या टैबलेट चुना जा सकता है. साथ ही, उस डिवाइस के लिए सही स्क्रीन साइज़, dPR, और UA का इस्तेमाल किया जा सकता है. इसके अलावा, फ़ुल टच इवेंट और व्यूपोर्ट को भी इम्यूलेट किया जा सकता है. आपके पास कुछ खास प्रीसेट आज़माने का विकल्प है. इसके अलावा, इन सुविधाओं में एक-एक करके आसानी से बदलाव किया जा सकता है.
DevTools की मदद से मोबाइल इम्यूलेशन के बारे में पूरी जानकारी पाने के लिए, devtools.chrome.com पर जाएं
डेमो
इन सभी सुविधाओं के काम करने का तरीका देखने के लिए, मोबाइल के लिए DevTools पर Chrome Dev Summit में दी गई मेरी 23 मिनट की बातचीत देखें: