सिंक की गई क्रॉस-डिवाइस मोबाइल टेस्टिंग

Addy Osmani

शुरुआती जानकारी

अगर आप मल्टी-डिवाइस वेब को टारगेट करने वाले वेब डेवलपर हैं, तो आपको अपनी साइटों और वेब ऐप्लिकेशन को कई अलग-अलग डिवाइस और कॉन्फ़िगरेशन पर टेस्ट करना होगा. सिंक्रोनाइज़्ड टेस्टिंग इसमें मदद कर सकता है. साथ ही, यह एक ही समय पर कई डिवाइसों और ब्राउज़र में एक ही इंटरैक्शन अपने-आप करने का असरदार तरीका है.

सिंक्रोनाइज़्ड टेस्ट करने से दो समस्याओं को हल करने में मदद मिल सकती है, जिनमें खास तौर पर समय लगता है:

• आपको जिस यूआरएल की जांच करनी है, उसके साथ अपने सभी डिवाइसों को सिंक करना. उन्हें हर डिवाइस पर मैन्युअल तरीके से लोड करना काफ़ी बीत चुका है, क्योंकि इसमें ज़्यादा समय लगता है. साथ ही, इससे रिग्रेशन से जुड़ी जानकारी को मिस करना भी आसान हो जाता है.
• इंटरैक्शन सिंक किए जा रहे हैं. किसी पेज को लोड कर पाना, विज़ुअल टेस्टिंग के लिए सबसे अच्छा होता है. हालांकि, इंटरैक्शन टेस्टिंग के लिए, आपको स्क्रोल, क्लिक, और अन्य गतिविधियों को भी सिंक करना चाहिए.

अच्छी बात यह है कि अगर आपके पास अपने कुछ टारगेट डिवाइसों का ऐक्सेस है, तो ऐसे कई टूल हैं जिनका इस्तेमाल करके, आपके डेस्कटॉप से मोबाइल डिवाइसों पर जाने की प्रोसेस को बेहतर बनाया जा सकता है. इस लेख में हम Ghostlab, Remote Preview, Adobe Edge Inspect, और Grunt के बारे में जानेंगे.

यह मेरा डेस्क है. वैसे यह मेरी डेस्क हुआ करती थी. यह अब सिर्फ़ एक मोबाइल संग्रहालय है.

टूल

GhostLab (Mac)

vanamco की ओर से GhostLab for Mac

Ghostlab एक व्यावसायिक Mac ऐप्लिकेशन ($49) है. इसे एक से ज़्यादा डिवाइसों पर साइटों और वेब ऐप्लिकेशन के लिए टेस्टिंग को सिंक करने के लिए डिज़ाइन किया गया है. कम से कम सेटअप के साथ आपको एक साथ सिंक करने की सुविधा मिलती है:

• क्लिक
• नेविगेशन
• स्क्रोल
• फ़ॉर्म इनपुट (जैसे कि लॉगिन फ़ॉर्म, साइन अप करना)

इससे एक से ज़्यादा डिवाइसों पर, आपकी साइट के एंड-टू-एंड उपयोगकर्ता अनुभव को टेस्ट करना बहुत आसान हो जाता है. डिवाइसों पर ब्राउज़र में अपना पेज खोलने के बाद, नेविगेशन में किया गया कोई भी बदलाव (इसमें रीफ़्रेश शामिल है) होने पर, कनेक्ट किया गया कोई भी दूसरा डिवाइस तुरंत रीफ़्रेश हो जाता है. Ghostlab स्थानीय डायरेक्ट्री में वीडियो देखने की सुविधा देता है. इसलिए, यह रीफ़्रेश तब भी होता है, जब डिवाइस में मौजूद फ़ाइलों में किए गए बदलावों को सेव किया जाता है. इस वजह से, सभी चीज़ें हमेशा सिंक रहती हैं!

मैंने Ghostlab को एक आसान प्रोसेस के तौर पर सेट अप करना पाया है. शुरू करने के लिए, ट्रायल (या अगर आप खरीदने का मन है, तो पूरा वर्शन) डाउनलोड करें, इंस्टॉल करें, और चलाएं. इसके बाद, अपने Mac और जिन डिवाइसों की आपको जांच करनी है उन्हें एक ही वाई-फ़ाई नेटवर्क से कनेक्ट करें, ताकि उन्हें खोजा जा सके.

Ghostlab के चालू होने के बाद, टेस्टिंग के लिए यूआरएल जोड़ने के लिए, "+" पर क्लिक करें या इसे अपने ब्राउज़र के पता बार से खींचें और छोड़ें. इसके अलावा, जिस लोकल फ़ोल्डर की जांच करनी है उसे मुख्य विंडो में खींचें और छोड़ें. इससे एक नई साइट बन जाएगी. इस लेख को पढ़ने के लिए, मैं http://html5rocks.com के लाइव वर्शन की जांच कर रही हूं. क्या बात है? ; )

अपनी मशीन पर कोई यूआरएल या लोकल डायरेक्ट्री चुनें

इसके बाद, अपनी साइट के नाम के आगे बने ">" प्ले बटन पर क्लिक करके, नया Ghostlab सर्वर शुरू किया जा सकता है. इससे एक नया सर्वर शुरू होता है, जो आपके नेटवर्क के खास आईपी पते पर उपलब्ध होता है (उदाहरण के लिए, http://192.168.21.43:8080).

Ghostlab सर्वर, हमारे यूआरएल से कॉन्टेंट को स्थानीय तौर पर प्रॉक्सी कर रहा है

यहां, मैंने Nexus 4 को कनेक्ट किया है और Android के लिए Chrome को Ghostlab के आईपी पते की ओर इशारा किया है. मुझे बस इतना ही करना है. Ghostlab के लिए यह ज़रूरी नहीं है कि आप डिवाइस के हिसाब से, कुछ अन्य समाधानों की तरह एक खास क्लाइंट इंस्टॉल करें. इसका मतलब है कि आप और भी तेज़ी से जांच शुरू कर सकते हैं.

Ghostlab यूआरएल से कनेक्ट किए गए किसी भी डिवाइस को, कनेक्ट किए गए क्लाइंट की सूची में जोड़ दिया जाएगा. यह सूची मुख्य Ghostlab विंडो की दाईं ओर साइडबार में दी गई होती है. डिवाइस के नाम पर दो बार क्लिक करने से, स्क्रीन का साइज़, ओएस वगैरह जैसी अन्य जानकारी दिखती है. अब आप क्लिक को नेविगेट और सिंक करने की जांच कर सकते हैं! वाह.

Ghostlab, कनेक्ट किए गए डिवाइसों से जुड़े कुछ आंकड़े भी दिखा सकता है. जैसे, UA स्ट्रिंग, व्यूपोर्ट की चौड़ाई और ऊंचाई, डिवाइस पिक्सल की डेंसिटी, आसपेक्ट रेशियो वगैरह. किसी एंट्री के बगल में मौजूद सेटिंग कॉग पर क्लिक करके, जिस बेस यूआरएल की जांच की जा रही है उसे मैन्युअल तरीके से कभी भी बदला जा सकता है. इससे एक कॉन्फ़िगरेशन विंडो खुलती है, जो नीचे की तरह दिखती है:

फ़ाइलों को देखने के लिए कॉन्फ़िगर करें, एचटीटीपी हेडर, वर्ण सेट वगैरह.

अब कनेक्ट किए गए अपने डिवाइसों में से किसी एक को चुना जा सकता है, HTML5Rocks के अलग-अलग लिंक पर क्लिक किया जा सकता है और नेविगेशन मेरे डेस्कटॉप Chrome (जहां मैंने उसी Ghostlab यूआरएल में डाला है) और मेरे सभी डिवाइसों पर सिंक किया है.

इससे भी बेहतर यह है कि Ghostlab में एक ऐसा विकल्प है जो आपको नेटवर्क के ज़रिए मिलने वाले सभी लिंक को प्रॉक्सी करने की अनुमति देता है. इससे http://192.168.21.43:8080/www.html5rocks.com पर नेविगेट करने के बजाय, www.html5rocks.com/en/performance2 पर नेविगेट करने में यह पूरी तरह से समस्याएं आ सकती हैं.http://192.168.21.43/www.htm5rocks.com/en/performance

इसे चालू करने के लिए, "कॉन्टेंट लोड करना" टैब में जाकर, "Ghostlab से सभी कॉन्टेंट लोड करें" को चुनें.

Ghostlab यूआरएल को फिर से लिख सकता है, ताकि सभी संसाधन Ghostlab प्रॉक्सी के ज़रिए लोड हो सकें. इससे नेविगेशन को कई पेजों के सिंक करने में मदद मिलती है

इसे काम करते हुए देखना:

Ghostlab के साथ Android, Windows 8, और Firefox OS फ़ोन का सिंक्रोनाइज़ किया गया टेस्टिंग

Ghostlab किसी भी समर्थित ब्राउज़र पर कितनी भी साइटें या विंडो लोड कर सकता है. इससे आप अपनी साइट को न सिर्फ़ अलग-अलग रिज़ॉल्यूशन पर टेस्ट कर सकते हैं, बल्कि अलग-अलग ब्राउज़र और प्लैटफ़ॉर्म पर आपके कोड के काम करने का तरीका भी जान सकते हैं. हां!

सभी टेस्ट डिवाइसों पर स्क्रोल, क्लिक, और नेविगेशन को सिंक करें

घोस्टलैब की मदद से, उस प्रोजेक्ट फ़ाइल फ़ोल्डर का सेटअप कॉन्फ़िगर किया जा सकता है जिसकी झलक देखी जा रही है. साथ ही, यह तय किया जा सकता है कि डायरेक्ट्री में हुए बदलावों का पता चलने पर क्या उन्हें देखा और रीफ़्रेश किया जाए या नहीं. इसका मतलब है कि बदलावों की वजह से, कनेक्ट किए गए सभी क्लाइंट रीफ़्रेश हो जाएंगे. अब इसे मैन्युअल तौर पर रीफ़्रेश करने की ज़रूरत नहीं है!

आप सोच रहे होंगे कि Ghostlab और क्या मदद कर सकता है. यह स्विस-आर्मी चाकू नहीं है, लेकिन यह कनेक्ट किए गए डिवाइसों पर रिमोट कोड जांच की सुविधा भी देता है. मुख्य इंटरफ़ेस से, किसी भी डिवाइस के नाम पर दो बार क्लिक करने से एक "डीबग" विकल्प सामने आ जाना चाहिए. इससे आपके लिए Chrome DevTools का वर्शन लॉन्च हो जाएगा.

Ghostlab इसे, बंडल किए गए Weinre रिमोट वेब इंस्पेक्टर की मदद से मुमकिन बनाता है. इसकी मदद से, आप कनेक्ट किए गए डिवाइसों पर स्क्रिप्ट को डीबग कर सकते हैं और स्टाइल में बदलाव कर सकते हैं. Android के लिए Chrome के लिए उपलब्ध रिमोट डीबगिंग अनुभव की तरह ही, आप तत्वों को चुन सकते हैं, कुछ प्रदर्शन प्रोफ़ाइलिंग चला सकते हैं और स्क्रिप्ट को डीबग कर सकते हैं.

कुल मिलाकर, मैं इस बात से प्रभावित हुई कि मैं सभी डिवाइसों पर हर दिन Ghostlab का उपयोग करना कितनी तेज़ी से कर सकता हूं. अगर आप एक फ़्रीलांसर हैं, तो आपको व्यावसायिक लाइसेंस की लागत कुछ ज़्यादा लग सकती है (ज़्यादा विकल्पों के लिए नीचे देखें). हालांकि, अन्य मामलों में भी Ghostlab को इस्तेमाल करने का सुझाव देने में मुझे खुशी होगी.

Adobe Edge Inspect CC (Mac, Windows)

Adobe की Creative Cloud सदस्यता में Edge Inspect शामिल है

Adobe Edge Inspect, Adobe Creative Cloud के सदस्यता पैकेज का हिस्सा है. हालांकि, यह मुफ़्त में आज़माने के तौर पर भी उपलब्ध है. इससे आपको Chrome का इस्तेमाल करके, Edge Inspector Chrome एक्सटेंशन के ज़रिए कई iOS और Android डिवाइस चलाने की सुविधा मिलती है. इससे किसी एक यूआरएल को ब्राउज़ करने पर, आपके सभी कनेक्ट किए गए डिवाइस सिंक होते रहते हैं.

सेट अप करने के लिए, Adobe Creative Cloud खाते के लिए साइन अप करें. अगर आपके पास पहले से कोई खाता है, तो उसमें लॉगिन करें. इसके बाद, Adobe.com से Edge Inspect को डाउनलोड और इंस्टॉल करें (फ़िलहाल, यह Mac और Windows के लिए उपलब्ध है, लेकिन Linux नहीं है - माफ़ करें!). ध्यान दें कि Edge की जांच करने के लिए, docs को हाथ में रखने से मदद मिलती है.

इंस्टॉल हो जाने के बाद, आपको Chrome के लिए Edge जांच एक्सटेंशन इस्तेमाल करना होगा, ताकि आप कनेक्ट किए गए डिवाइसों के बीच ब्राउज़िंग सिंक कर सकें.

Edge इंस्पेक्ट CC Chrome एक्सटेंशन

आपको हर उस डिवाइस पर Edge Inspect क्लाइंट इंस्टॉल करना होगा जिसके साथ आपको कार्रवाइयां सिंक करनी हैं. शुक्र है कि क्लाइंट iOS, Android, और Kindle के लिए उपलब्ध हैं.

इंस्टॉल करने की प्रोसेस के तहत, अब हम अपने पेजों की जांच शुरू कर सकते हैं. यह सुविधा काम करे, इसके लिए आपको अपने सभी डिवाइस को एक ही नेटवर्क से कनेक्ट करना होगा.

अपने डेस्कटॉप पर Edge की जांच शुरू करें, Chrome में Edge का जांच करें एक्सटेंशन, और अपने डिवाइसों पर ऐप्लिकेशन खोलें (नीचे देखें):

किसी डिवाइस को Edge Inspect एक्सटेंशन से कनेक्ट करना

अब हम डेस्कटॉप पर HTML5Rocks.com जैसी साइट पर जा सकते हैं. साथ ही, हमारा मोबाइल डिवाइस अपने-आप उसी पेज पर नेविगेट हो जाएगा.

कनेक्ट किए गए एक से ज़्यादा डिवाइसों पर, किसी यूआरएल का ड्राइविंग नेविगेशन सिस्टम

एक्सटेंशन में, अब आपको अपने डिवाइस के बगल में <> का निशान दिखेगा, जैसा कि नीचे दिए गए स्क्रीनशॉट में दिखाया गया है. इस पर क्लिक करने से Weinre का एक इंस्टेंस लॉन्च हो जाएगा, जो आपको अपने पेज की जांच करने और उसे डीबग करने की अनुमति देगा.

सिंबल के बगल में मौजूद होता है, जिसका इस्तेमाल Weinre डीबगर लॉन्च करने के लिए किया जा सकता है" एक्सटेंशन="800"height="549">

कनेक्ट किए गए डिवाइसों के बगल में <> का निशान दिखता है. इसका इस्तेमाल Weinre डीबगर लॉन्च करने के लिए किया जा सकता है

Weinre एक DOM व्यूअर और कंसोल है और इसमें Chrome DevTools की सुविधाएं नहीं हैं, जैसे कि JavaScript डीबग करना, प्रोफ़ाइलिंग करना, और नेटवर्क वॉटरफ़ॉल. हालांकि, यह डेवलपर टूल की सबसे कम ज़रूरत है, लेकिन यह सैनिटी-जांच DOM और JavaScript की स्थिति के लिए उपयोगी है.

Weinre की मदद से डीबग करना

Edge Inspect एक्सटेंशन, कनेक्ट किए गए डिवाइसों से आसानी से स्क्रीनशॉट जनरेट करने की सुविधा भी देता है. यह लेआउट टेस्ट करने या सिर्फ़ अपने पेज को कैप्चर करने के लिए इस्तेमाल किया जाता है, ताकि आप उसे दूसरों के साथ शेयर कर सकें.

एज इंस्पेक्ट की मदद से स्क्रीनशॉट जनरेट करना

जिन डेवलपर को पहले से ही CC के लिए पैसे चुकाने हैं उनके लिए, Edge Inspect एक बेहतरीन टूल है. हालांकि, इसमें कुछ चेतावनियां भी होती हैं, जैसे कि हर डिवाइस में अलग से किसी क्लाइंट को इंस्टॉल करने की ज़रूरत होती है और इसमें थोड़ा और सेटअप होता है, जो शायद Ghostlab जैसे किसी अन्य टूल में न हो.

रिमोट झलक (Mac, Windows, Linux)

रिमोट झलक एक ओपन सोर्स टूल है जहां एचटीएमएल पेज और कॉन्टेंट को होस्ट किया जाता है. इसे कई डिवाइसों पर दिखाया जा सकता है.

रिमोट प्रीव्यू की मदद से, हर 1100 मि॰से॰ के अंतराल में XHR कॉल किया जाता है. इससे यह पता चलता है कि कॉन्फ़िगरेशन फ़ाइल में मौजूद यूआरएल में बदलाव हुआ है या नहीं. अगर उसे मिल जाता है, तो स्क्रिप्ट हर डिवाइस के लिए पेज में लोड किए गए iframe के src एट्रिब्यूट को अपडेट कर देती है. साथ ही, पेज में पेज लोड हो जाती है. अगर किसी भी बदलाव का पता नहीं चलता है, तो स्क्रिप्ट तब तक पोल जारी रखती है, जब तक कोई बदलाव नहीं किया जाता.

27 से ज़्यादा डिवाइसों पर सिंक किए गए यूआरएल की टेस्टिंग

यह सभी डिवाइसों को एक साथ जोड़ने और यूआरएल को आसानी से बदलने का बेहतरीन तरीका है. शुरू करने के लिए:

1. रिमोट झलक डाउनलोड करें और इसकी सभी फ़ाइलों को स्थानीय तौर पर ऐक्सेस किए जा सकने वाले सर्वर में ले जाएं. यह Dropbox, डेवलपमेंट सर्वर या कुछ और हो सकता है.
2. टारगेट किए गए अपने सभी डिवाइसों पर, इस डाउनलोड से "index.html" लोड करें. इस पेज का इस्तेमाल ड्राइवर के तौर पर किया जाएगा और यह उस पेज को लोड करेगा जिसकी आप iframe की मदद से जांच करना चाहते हैं.
3. "url.txt" में उस यूआरएल के साथ बदलाव करें जिसकी झलक आपको देखनी है. यह फ़ाइल, डाउनलोड में शामिल होती है और अब आपके सर्वर पर उपलब्ध होती है. इस फ़ाइल को सेव करें.
4. रिमोट झलक को दिखेगा कि url.txt फ़ाइल बदल गई है. साथ ही, यह आपके यूआरएल को लोड करने के लिए, कनेक्ट किए गए सभी डिवाइस को रीफ़्रेश करेगा.

लो-फ़ाई समाधान होने पर, रिमोट प्रीव्यू की सुविधा मुफ़्त है और यह काम करती है.

ग्रंट + Live-Reload (Mac, Windows, Linux)

Grunt (और Yeoman), कमांड-लाइन टूल हैं. इनका इस्तेमाल, फ़्रंट-एंड पर स्टेज बनाने और प्रोजेक्ट बनाने में किया जाता है. अगर आपके पास पहले से इन टूल का इस्तेमाल है और आपके पास लाइव फिर से लोड करने का सेटअप है, तो क्रॉस-डिवाइस टेस्टिंग की सुविधा को चालू करने के लिए वर्कफ़्लो को आसानी से अपडेट किया जा सकता है. इसके लिए, एडिटर में किए जाने वाले हर बदलाव की वजह से, उन डिवाइस में फिर से लोड हो जाता है जिन पर आपने स्थानीय ऐप्लिकेशन खोला है.

शायद आपको grunt server का इस्तेमाल करना पसंद है. प्रोजेक्ट की रूट डायरेक्ट्री से चलाने पर, यह आपकी सोर्स फ़ाइलों में होने वाले किसी भी बदलाव पर नज़र रखता है. साथ ही, ब्राउज़र विंडो को अपने-आप रीफ़्रेश करता है. ऐसा ग्रंट-कॉन्ट्रिब वॉच टास्क की वजह से होता है, जिसे हम सर्वर के हिस्से के रूप में चलाते हैं.

अगर आपने अपने प्रोजेक्ट को बेहतर बनाने के लिए, Yoman का इस्तेमाल किया है, तो इस फ़ाइल में एक Gruntfile फ़ाइल होगी. अपने डेस्कटॉप पर, इस फ़ाइल को लाइव फिर से लोड करने के लिए, आपको हर चीज़ की ज़रूरत होगी. इसे क्रॉस-डिवाइस काम करने के लिए, आपको बस एक प्रॉपर्टी बदलनी होगी. यह प्रॉपर्टी hostname है (आपके डेस्कटॉप पर). इसे connect में शामिल किया जाना चाहिए. अगर आपको लगता है कि hostname, localhost पर सेट है, तो इसे 0.0.0.0 में बदल दें. अगली बार grunt server पर चलेगा और हमेशा की तरह, एक नई विंडो खुलेगी जिसमें आपके पेज की झलक दिखेगी. यूआरएल शायद कुछ ऐसा दिखेगा http://localhost:9000 (9000 पोर्ट है).

नए टैब या टर्मिनल को चालू करें और ipconfig | grep inet का इस्तेमाल करके अपने सिस्टम का इंटरनल आईपी खोजें. यह 192.168.32.20 जैसा लग सकता है. आखिरी कदम, उस डिवाइस पर Chrome जैसा ब्राउज़र खोलना है जिसमें आपको लिवरलोड सिंक करने हैं और इस आईपी पते में टाइप करना है. इसके बाद, पहले वाला पोर्ट नंबर डालें.उदाहरण के लिए, 192.169.32.20:9000.

हो गया! लाइव-फिर से लोड करने की सुविधा से, अब आपके डेस्कटॉप पर सोर्स फ़ाइलों में किया जाने वाला कोई भी बदलाव, आपके डेस्कटॉप ब्राउज़र और मोबाइल डिवाइस पर मौजूद ब्राउज़र, दोनों में फिर से लोड होगा. बहुत बढ़िया!

डेस्कटॉप पर सेव किए गए बदलाव, अब आपके डेस्कटॉप ब्राउज़र के साथ-साथ, एक ही यूआरएल वाले डिवाइसों पर मोबाइल ब्राउज़र में लाइव फिर से लोड होते हैं

क्रॉस-डिवाइस लाइव-रीलोड, कार्रवाई के तौर पर. हर बदलाव/सेव करने से, आपको अपने मौजूदा पेज का रीयल-टाइम अपडेट मिलता है. यह रिस्पॉन्सिव डिज़ाइन की जांच के लिए अच्छा है.

यियोमन में मोबाइल जनरेटर की सुविधा भी है, जिससे यह वर्कफ़्लो आसानी से सेट हो जाता है.

एमेट लाइवस्टाइल

Emmet LiveStyle, एक ब्राउज़र और एडिटर प्लगिन है. इसकी मदद से, अपने डेवलपमेंट वर्कफ़्लो में लाइव सीएसएस एडिटिंग की सुविधा मिलती है. फ़िलहाल यह Chrome, Safari, और Sublime Text के लिए उपलब्ध है. साथ ही, यह दो-तरफ़ा (ब्राउज़र और ब्राउज़र से एडिटर का इस्तेमाल करके) एडिटिंग के साथ काम करता है.

बदलाव करने पर एमेट लाइव स्टाइल, ब्राउज़र को पूरी तरह से रीफ़्रेश नहीं करता. इसके बजाय, वह DevTools रिमोट डीबगिंग प्रोटोकॉल पर सीएसएस में बदलाव करता है. इसका मतलब यह है कि आपको Chrome के कनेक्ट किए गए किसी भी वर्शन में अपने डेस्कटॉप एडिटर में किए गए बदलाव दिखेंगे, चाहे वह डेस्कटॉप Chrome हो या Android के लिए Chrome.

LiveStyle में "मल्टी-व्यू मोड" नाम की एक सुविधा है. इस मोड की मदद से, विंडो और डिवाइसों पर रिस्पॉन्सिव डिज़ाइन की जांच की जा सकती है और उन्हें ट्वीक किया जा सकता है. मल्टी-व्यू मोड में, सभी एडिटर अपडेट सभी विंडो पर लागू होते हैं. ऐसा इसलिए होता है, क्योंकि एक ही पेज के लिए DevTools अपडेट लागू होते हैं.

लाइव स्टाइल पैकेज इंस्टॉल करने के बाद, लाइव सीएसएस एडिटिंग शुरू करने के लिए:

1. Sublime Text चालू करें और किसी प्रोजेक्ट में एक सीएसएस फ़ाइल खोलें
2. Chrome को शुरू करें और उस सीएसएस वाले पेज पर जाएं जिसमें आपको बदलाव करना है
3. DevTools खोलें और LiveStyle पैनल पर जाएं. "LiveStyle चालू करें" विकल्प को चुनें. ध्यान दें: हर विंडो के लिए आपके लाइव एडिटिंग सेशन के दौरान DevTools को खुला रखना होगा, ताकि स्टाइल अपडेट लागू किए जा सकें.
4. इसे चालू किए जाने पर, स्टाइलशीट की एक सूची बाईं ओर दिखेगी. साथ ही, दाईं ओर आपकी एडिटर फ़ाइलों की सूची दिखेगी. ब्राउज़र से जोड़ने के लिए एडिटर फ़ाइल चुनें. हो गया! बूम माइक.

अब फ़ाइलों में बदलाव करने, उन्हें बनाने, खोलने या बंद करने पर एडिटर फ़ाइलों की सूची अपने-आप अपडेट हो जाएगी.

सबलाइम में सीएसएस में होने वाले बदलाव, अलग-अलग ब्राउज़र विंडो और एम्युलेटर पर तुरंत पैच किए जा रहे हैं.

मीटिंग में सामने आए नतीजे

क्रॉस-डिवाइस टेस्टिंग अब भी एक नई और तेज़ी से बदलने वाली जगह है, जिसमें कई नए लोग शामिल हैं. शुक्र है कि कई डिवाइस सेट के साथ काम करने और टेस्ट करने की सुविधा देने के लिए, कई मुफ़्त और व्यावसायिक टूल मौजूद हैं.

हालांकि, इस क्षेत्र में अब भी सुधार किए जाने की काफ़ी संभावना है. इसलिए, हम आपको सुझाव देंगे कि सभी डिवाइसों पर टेस्टिंग के लिए टूलिंग को और बेहतर कैसे बनाया जा सकता है. वह सब कुछ है जो सेटअप समय को कम करता है और आपके क्रॉस-डिवाइस वर्कफ़्लो को बेहतर बनाता है.

समस्याएं

शायद इन टूल की जांच के दौरान मुझे सबसे बड़ी परेशानी का सामना करना पड़ा. यह कोई ऑफ़र तोड़ने वाला नहीं है, लेकिन कुछ समय बाद परेशान करता है. जहां भी हो सके अपने फ़ोन को काम करने के तरीके के तौर पर स्लीप मोड (कम बैटरी मोड) पर सेट कर दें. हालांकि, ध्यान रखें कि अगर आपका डिवाइस हमेशा प्लग-इन रहता है, तो बैटरी को तेज़ी से खर्च किया जा सकता है.

मुझे GhostLab के साथ व्यक्तिगत रूप से कोई बड़ी समस्या नहीं हुई. 49 डॉलर में कुछ कीमत थोड़ी ज़्यादा लग सकती है, हालांकि, ध्यान रखें कि अगर इसका इस्तेमाल सामान्य तौर पर किया जा रहा है, तो इससे कम या ज़्यादा फ़ायदा हो सकता है. सेटअप के बारे में सबसे अच्छी बात यह थी कि हर टारगेट डिवाइस पर क्लाइंट इंस्टॉल और मैनेज करने के बारे में चिंता नहीं करनी होती. हर जगह एक ही यूआरएल काम करता था.

Adobe Edge Inspect से मुझे हर डिवाइस पर खास क्लाइंट इंस्टॉल और इस्तेमाल करने में थोड़ा समय लगा. मैंने यह भी पाया कि यह कनेक्ट अप किए गए सभी क्लाइंट को लगातार रीफ़्रेश नहीं करता था, इसका मतलब है कि मुझे यह काम Chrome एक्सटेंशन से करना पड़ता था. इसके लिए, Creative Cloud की सदस्यता भी ज़रूरी है. इसके अलावा, सिर्फ़ डिवाइसों पर किसी चुने गए ब्राउज़र के बजाय, क्लाइंट में साइटें लोड की जा सकती हैं. इससे, हो सकता है कि आपको सही टेस्ट करने में दिक्कत हो.

रिमोट प्रीव्यू का इस्तेमाल, विज्ञापन में बताए गए तरीके से किया गया था, लेकिन यह बहुत आसान है. इसका मतलब है कि अपनी साइट को अलग-अलग डिवाइसों पर रीफ़्रेश करने के अलावा, आपको ज़्यादा बेहतर टूल की ज़रूरत होगी. उदाहरण के लिए, यह क्लिक या स्क्रोल को सिंक नहीं करेगा.

सुझाव

अगर आपको शुरुआत करने के लिए, क्रॉस-प्लैटफ़ॉर्म की सुविधा मुफ़्त में चाहिए, तो हमारा सुझाव है कि आप रिमोट प्रीव्यू का इस्तेमाल करें. ऐसी कंपनी में जो लोग पैसे देकर समाधान ढूंढ रहे हैं, उनके लिए GhostLab लगातार बेहतरीन रहा है, लेकिन यह सिर्फ़ Mac पर उपलब्ध है. Windows के उपयोगकर्ताओं के लिए, Adobe Edge Inspect आपका सबसे अच्छा कॉल है और इसमें कुछ खूबियां भी नहीं हैं.

डेवलपमेंट के दौरान, लाइव स्ट्रीम को बेहतर बनाने के लिए भी Grunt और LiveStyle का इस्तेमाल बेहतरीन तरीके से किया जाता है.