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