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