मोबाइल से पहली पीढ़ी के लिए नया डिवाइस मोड
हमने Device Mode की शुरुआत की है जो एक साल से भी ज़्यादा समय पहले, डिवाइसों को एम्युलेट करने और रिस्पॉन्सिव डिज़ाइन के साथ काम करने का एक तरीका है. अब Chrome 49 में, इसके पहले बड़े अपग्रेड का समय आ गया है. तो, नया क्या है?
Chrome DevTools की शुरुआत मोबाइल के लिए की जा रही है. पहले हमने मोबाइल को एम्युलेट करने के तरीके दिए थे, लेकिन डेवलपमेंट का डिफ़ॉल्ट तरीका डेस्कटॉप था. मोबाइल एम्यूलेशन को हमेशा चालू रखना पड़ता था. अब जबकि कई स्थानों पर मोबाइल साइटों की खपत डेस्कटॉप को पार कर गई है, इसलिए हम DevTools में अपनी स्थिति बदल रहे हैं.
नया क्या है?
सबसे अहम बात यह है कि यूज़र इंटरफ़ेस (यूआई) को व्यवस्थित किया गया है और यह बहुत कम जगह का इस्तेमाल करता है. हमें उम्मीद है कि ज़्यादातर के लिए नया डिवाइस मोड मुख्य डेवलपमेंट मोड बनेगा. इसलिए, साफ़ और आसान डिज़ाइन वाला ऐसा डिज़ाइन होना ज़रूरी था जो मुख्य DevTools नेविगेशन बार तक फैला हो.
मीडिया क्वेरी पर तेज़ी से काम करने वाला नया डिवाइस रूलर.
इसके अलावा, हमने व्यूपोर्ट को बीच में दिया है और सबसे ऊपर एक नया क्विक-जंप डिवाइस रूलर जोड़ा है जो प्रतिक्रियाशील रूप से डिज़ाइन करते समय एक बढ़िया टूल है, जिससे आपको सबसे सामान्य डिवाइस साइज़ का आइडिया मिलता है.
आखिर में, जब भी संभव हो, कई विकल्प टॉगल के पीछे बंडल या छिपा दिए गए हैं. इन नए कंपोज़िट विकल्पों के कारण मोड के बीच स्विच करना बहुत आसान हो गया है. कुछ कंट्रोल को टॉगल करने या टूलबार के अपने अनुभव को कस्टमाइज़ करने के लिए, तीन बिंदु वाले मेन्यू आइकॉन को दबाएं.
डिफ़ॉल्ट रूप से रिस्पॉन्सिव
मुख्य DevTools टूलबार अब ब्राउज़र विंडो की बाईं ओर है. इसमें कई तरह के मोबाइल और डेस्कटॉप डिवाइसों को एम्युलेट करने के लिए, सबसे ज़रूरी टूल शामिल हैं. इन दो डेवलपमेंट मोड में से कोई एक चुना जा सकता है:
- रिस्पॉन्सिव (स्क्रीन के हिसाब से आकार बदलने वाले) विज्ञापन
- खास डिवाइस
दोनों ही मोड में, व्यूपोर्ट Chrome में अपनी ही विंडो में मौजूद होता है. इस विंडो का साइज़ अपने हिसाब से बदला जा सकता है. इसका बड़ा फ़ायदा यह है कि इसकी मदद से, ब्राउज़र विंडो और DevTools को अपनी पसंद के मुताबिक बढ़ाया जा सकता है. साथ ही, अपने पेज के कई साइज़ की जांच करते समय उन्हें आगे-पीछे नहीं किया जा सकता.
रिस्पॉन्सिव वह मोड है, जिसमें आप सक्रिय दोहराव के दौरान रहना चाहेंगे, ताकि यह पक्का किया जा सके कि आपकी साइट कुछ खास डिवाइस पर ही नहीं, बल्कि सभी तरह के डिवाइस पर काम करे. इस मोड में, व्यूपोर्ट के बगल में मौजूद हैंडल का साइज़ आसानी से बदला जा सकता है.
खास डिवाइस से तब पता चलता है, जब कोई खास डिवाइस चुना जाता है और व्यूपोर्ट को उसके साइज़ के हिसाब से लॉक किया जाता है. यह सुविधा तब काम आती है, जब आपको सभी समस्याओं को ठीक करना हो. इसलिए, हम ड्रॉपडाउन में हर तरह के डिवाइसों की सिर्फ़ विशाल सूची नहीं दिखा रहे हैं, बल्कि फ़िलहाल, सबसे लोकप्रिय डिवाइसों की सूची दिखा रहे हैं. किसी एक को चुनने पर, हम उसे सबसे करीब से लागू करने की पूरी कोशिश करते हैं. जैसे: टच इवेंट, उपयोगकर्ता एजेंट, व्यूपोर्ट, व्यूपोर्ट, Chrome और यूज़र इंटरफ़ेस (अगर उपलब्ध हो), सभी.
इंटिग्रेटेड रिमोट डीबगिंग
एम्युलेशन, यहां तक कि सर्वश्रेष्ठ उपलब्ध भी, आपको केवल अभी तक के लिए मिल सकते हैं. फ़िलहाल, एम्युलेटर की मदद से ये काम नहीं किए जा सकते. जैसे:
- देखें कि क्या कोई बटन आपके अंगूठे के हिसाब से बड़ा है.
- धीमे फ़ोन पर अपनी साइट की परफ़ॉर्मेंस की जांच करें.
- कुछ डिवाइसों की अजीब हरकतें और सीमाएं डीबग करें.
इन सभी स्थितियों की अच्छी तरह से जांच करने के लिए, आपको असली फ़िज़िकल डिवाइसों का इस्तेमाल करके टेस्ट करना होगा, काम करना होगा, और डीबग करना होगा.
कुछ समय के लिए, chrome://inspect पर ब्राउज़ करें और अपने डिवाइस को यूएसबी
की मदद से कनेक्ट करें. साथ ही, DevTools की मदद से रिमोट तरीके से डीबग करने का सेशन खोलें. लेकिन अब हम एक और कदम आगे बढ़ गए हैं. साथ ही, हमने रिमोट डीबगिंग के काम करने के तरीके और काम करने के तरीके को बेहतर बनाया है. साथ ही, इसे DevTools के तौर पर
लागू करना है. किसी दूसरे पेज पर ब्राउज़ करने के बजाय, अब डिवाइसों की जांच करें को सीधे नए मुख्य मेन्यू में डायलॉग के तौर पर ऐक्सेस करें. इससे अपने वर्कफ़्लो में डीबग करने की प्रोसेस को ज़्यादा आसानी से पूरा किया जा सकता है. बस अपना फ़ोन प्लग-इन करें, DevTools से बाहर निकलने की ज़रूरत नहीं है!
इम्यूलेशन के बाकी कंट्रोल के लिए, नई होम स्क्रीन
DevTools में मोबाइल अब डिफ़ॉल्ट रूप से उपलब्ध है. इसलिए, नेटवर्क थ्रॉटलिंग जैसी सुविधाओं को नेटवर्क पैनल में अपने सही होम में रखा गया है.
कुछ सुविधाएं, जैसे सेंसर का एम्युलेट करना या प्रिंट मीडिया को एम्युलेट करना जैसे कि रेंडरिंग की सेटिंग, ड्रॉर में एक जैसी जगह पर चली गई हैं. ये सभी अतिरिक्त सुविधाएं आपको नए मुख्य मेन्यू के "ज़्यादा टूल" सेक्शन में मिलेंगी.
हम जानते हैं कि यह एक बड़ा बदलाव है, जिसका हम सभी को सामना करना पड़ेगा. आपको ऐप्लिकेशन में मौजूद सभी चीज़ों की पूरी जानकारी डिवाइस मोड से जुड़े अभी-अभी अपडेट किए गए दस्तावेज़ में मिलेगी. हमें Twitter पर या 140 से ज़्यादा वर्णों की ज़रूरत होने पर, हमारे गड़बड़ी के ट्रैकर पर आपकी राय जानकर खुशी होगी (हां, सुविधा के अनुरोधों के लिए भी).