मोबाइल के लिए डेवलप करना उतना ही आसान होना चाहिए जितना डेस्कटॉप के लिए डेवलप किया जा रहा है. हमने Chrome DevTools में बहुत मेहनत की है, ताकि आपके लिए चीज़ें आसान हो सकें. अब समय आ गया है कुछ ऐसी नई सुविधाओं को सामने लाने का, जो आपके मोबाइल वेब डेवलपमेंट में नाटकीय रूप से सुधार ला सकती हैं. सबसे पहले, रिमोट डीबगिंग के बारे में. इसके बाद, हम सही मोबाइल एम्युलेशन उपलब्ध कराएंगे.
अपने डिवाइस की स्क्रीन को डेस्कटॉप पर स्क्रीनकास्ट करें
अब तक, रिमोट डीबगिंग के दौरान आपको अपने डिवाइस और DevTools के बीच अपनी नज़रें बार-बार बदलनी पड़ती थी. अब, स्क्रीनकास्ट करने से आपके डिवाइसों की स्क्रीन, आपके DevTools के साथ दिखती है. इसे देखना अच्छा है, लेकिन इससे इंटरैक्ट करना और भी बेहतर है:
- स्क्रीनकास्ट पर किए गए क्लिक को टैप में बदल दिया जाता है और सही टच इवेंट को डिवाइस पर चलाया जाता है.
- अपने डेस्कटॉप पॉइंटर की मदद से, डिवाइस पर मौजूद एलिमेंट की जांच करें
- अपने डेस्कटॉप कीबोर्ड पर लिखें--सभी कीस्ट्रोक डिवाइस पर भेजे जाते हैं. अपने अंगूठों से टाइप करने में बहुत ज़्यादा समय बचता है.
- अपने पॉइंटर से या बस अपने लैपटॉप के ट्रैकपैड पर स्लाइड करके, पेज को स्क्रोल करें.
स्क्रीनकास्ट करने से जुड़े पूरे दस्तावेज़ में, इन सभी चीज़ों के बारे में जानकारी दी गई है. जैसे, पिंच ज़ूम जेस्चर भेजना. Android बीटा वर्शन पर Chrome (m32) होना ज़रूरी है.
आसान रिमोट डीबगिंग
18 महीने पहले, Chrome ने WebKit ब्राउज़र के लिए रिमोट डीबगिंग की सुविधा शुरू की थी. अगर आपने उस समय इसे आज़माया था, तो आपको 400 एमबी का Android SDK डाउनलोड करना पड़ता था. साथ ही, अपने $PATH में adb बाइनरी जोड़ना पड़ता था. साथ ही, कमांड लाइन के कुछ जादुई हाव-भाव भी दिखते थे.
अब हमें यह बताते हुए खुशी हो रही है कि आप इन सभी को भूल सकते हैं. Chrome अब मूल रूप से आपके यूएसबी से कनेक्ट किए गए डिवाइसों को खोज सकता है और उनसे बात कर सकता है. हमने Chrome में, सीधे यूएसबी पर adb प्रोटोकॉल लागू किया है, ताकि आप आसानी से Menu > Tools > Inspect Devices पर जा सकें और रिमोट डीबगिंग सेशन शुरू कर सकें.
यह Chrome OS के साथ-साथ सभी प्लैटफ़ॉर्म पर अच्छी तरह काम करता है. हालांकि, ध्यान रखें कि डिवाइस से बात करने के लिए, आपको सबसे पहले Windows पर सही यूएसबी ड्राइवर इंस्टॉल करने की ज़रूरत होगी. अगर आपने पहले कभी इसे नहीं आज़माया है, तो आपको डिवाइस पर यूएसबी डीबग करने की सुविधा चालू करनी होगी और यह पुष्टि करनी होगी कि Android बीटा के लिए Chrome का इस्तेमाल किया जा रहा है. सभी दस्तावेज़ों को पढ़ें..
लोकल प्रोजेक्ट के लिए पोर्ट-फ़ॉरवर्ड करना
localhost:8000 पर डेवलप किया जा रहा है, लेकिन आपका फ़ोन उस तक नहीं पहुंच सकता. इसलिए, हमने पोर्ट फ़ॉरवर्डिंग को सीधे रिमोट डीबगिंग वर्कफ़्लो में जोड़ दिया है. अब बिना किसी टनलिंग हैक के अपने पूरे प्रोजेक्ट पर काम करना आसान हो गया है. about:inspect को'पोर्ट फ़ॉरवर्डिंग' पर क्लिक करके सेट करें कि आपको कौनसे पोर्ट उपलब्ध कराने हैं. अगर वे इस्तेमाल के लिए तैयार हैं, तो वे हरे रंग में चमकने लगेंगे.
मोबाइल एम्युलेशन
ज़रूरी नहीं है कि आपके पास वे डिवाइस हमेशा हों जिनकी मदद से यह जांच की जा सके कि यह सुविधा आपके डिवाइस पर काम करती है या नहीं. हालांकि, रिमोट डीबगिंग से आपको डिवाइस की परफ़ॉर्मेंस और टच के लिए बेहतरीन अनुभव मिलेगा. हालांकि, अब डेस्कटॉप पर डिवाइस की कई विशेषताओं को असल में अपना लिया जा सकता है. इससे आपका समय बचता है और इटरेशन लूप में तेज़ी से बदलाव होता है.
फ़ुल टच इवेंट सिम्युलेशन की मदद से, स्क्रीन साइज़, devicePixelRatio, और <meta viewport> को एम्युलेट करें
अगर आपने डिवाइस मेट्रिक की पिछली सुविधा देखी थी, तो अब यह एक बड़ा अपग्रेड है. टीम ने इसलिए कड़ी मेहनत की है, ताकि मोबाइल एम्युलेशन के नए तरीके को करीब-करीब असली डिवाइस पर देखा जा सके. उदाहरण के लिए, WebKit ब्राउज़र, टेक्स्ट के अपने-आप साइज़ बदलने का एल्गोरिदम बनाता है. असल में, हर डिवाइस में अपने-आप टेक्स्ट के साइज़ को बदलने का एक खास "फ़ज फ़ैक्टर" होता है. यह टेक्स्ट को पढ़ने लायक बनाने के लिए बदलता है. एम्युलेशन मोड में यह पुष्टि की जा सकती है कि यह व्यवहार लागू किया जा रहा है और इसके नतीजे देखे जा सकते हैं.
डिवाइस का पिक्सल रेशियो
अब तक, यह देख पाना करीब-करीब नामुमकिन है कि लो-डीपीआई डिवाइस पर हाई-डीपीआई डिवाइस क्या दिखता है. अब DevTools में डीपीआर एम्युलेटर, आपके व्यू में बदलाव करेगा. इससे, आपको डीप डीपीआई की जानकारी को ज़ूम करने में मदद मिलेगी. इसके अलावा, 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 डेवलपर समिट में 23 मिनट का मेरा टॉक शो देखें: