मिनी ऐप्लिकेशन के लिए DevTools

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

मिनी ऐप्लिकेशन आईडीई

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

मिनी ऐप्लिकेशन स्टार्टर प्रोजेक्ट

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

डेवलपमेंट फ़्लो

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

WeChat DevTools की ऐप्लिकेशन विंडो. इसमें सिम्युलेटर, कोड एडिटर, और डीबगर दिख रहा है.
सिम्युलेटर, कोड एडिटर, और डीबगर के साथ WeChat DevTools.
Alipay DevTools की ऐप्लिकेशन विंडो. इसमें कोड एडिटर, सिम्युलेटर, और डीबगर दिख रहा है.
कोड एडिटर, सिम्युलेटर, और डीबगर के साथ Alipay DevTools.
Baidu DevTools ऐप्लिकेशन की विंडो, जिसमें सिम्युलेटर, कोड एडिटर, और डीबगर दिख रहा है.
सिम्युलेटर, कोड एडिटर, और डीबगर के साथ Baidu DevTools.
ByteDance DevTools ऐप्लिकेशन की विंडो में सिम्युलेटर, कोड एडिटर, और डीबगर दिख रहा है.
सिम्युलेटर, कोड एडिटर, और डीबगर के साथ ByteDance DevTools.
क्विक ऐप्लिकेशन DevTools ऐप्लिकेशन विंडो. इसमें कोड एडिटर, सिम्युलेटर, और डीबगर दिख रहा है.
कोड एडिटर, सिम्युलेटर, और डीबगर के साथ क्विक ऐप्लिकेशन DevTools.

जैसा कि दिख रहा है, सभी आईडीई के बुनियादी कॉम्पोनेंट एक-दूसरे से काफ़ी मिलते-जुलते हैं. आपके पास हमेशा Monaco Editor पर आधारित एक कोड एडिटर होता है. यह वही प्रोजेक्ट है जिसमें VS Code भी होता है. सभी आईडीई में, Chrome DevTools फ़्रंटएंड पर आधारित एक डीबगर होता है. इसमें कुछ बदलाव किए जाते हैं. बाद में किए गए बदलावों के बारे में ज़्यादा जानकारी के लिए, डीबगर देखें. IDE per se को NW.js या Electron ऐप्लिकेशन के तौर पर इस्तेमाल किया जाता है, IDE में मौजूद सिम्युलेटर को NW.js <webview> टैग या Electron <webview> टैग के तौर पर इस्तेमाल किया जाता है, जो <webview> टैग पर आधारित होते हैं. अगर आपकी दिलचस्पी IDE इंटरनल में है, तो कीबोर्ड शॉर्टकट Control+Alt+I (या Mac पर Command+Option+I) का इस्तेमाल करके, Chrome DevTools की मदद से अक्सर इनकी जांच की जा सकती है.

Chrome DevTools का इस्तेमाल Baidu के DevTools की जांच करने के लिए किया गया है. यह टूल, Chrome DevTools के एलिमेंट पैनल में सिम्युलेटर का वेबव्यू टैग दिखाता है.
Chrome DevTools की मदद से Baidu DevTools की जांच करने पर पता चला है कि सिम्युलेटर को Electron <webview> टैग के तौर पर बनाया गया है.

सिम्युलेटर और असली डिवाइस की जांच और डीबग करना

इस सिम्युलेटर और Chrome DevTools के डिवाइस मोड में मौजूद जानकारी की तुलना की जा सकती है. अलग-अलग Android और iOS डिवाइसों को सिम्युलेट किया जा सकता है, स्केल और डिवाइस ओरिएंटेशन को बदला जा सकता है. साथ ही, नेटवर्क की अलग-अलग स्थितियों, मेमोरी दबाव, बारकोड रीडिंग इवेंट, अचानक बंद होने, और डार्क मोड को सिम्युलेट किया जा सकता है.

पहले से मौजूद सिम्युलेटर से यह पता लगाने में आसानी होती है कि ऐप्लिकेशन कैसे काम करता है, लेकिन डिवाइस पर सामान्य वेब ऐप्लिकेशन की तरह ही जांच करने की सुविधा की जगह कोई बदलाव नहीं किया जा सकता. इन-डेवलपमेंट मिनी ऐप्लिकेशन को आज़माने के लिए, आपको बस क्यूआर कोड स्कैन करना होगा. उदाहरण के लिए, ByteDance DevTools में आईडीई से डाइनैमिक तौर पर जनरेट हुए क्यूआर कोड को, किसी असली डिवाइस से स्कैन किया जाता है. इसके बाद, मिनी ऐप्लिकेशन का क्लाउड-होस्ट किया गया वर्शन बन जाता है, जिसे डिवाइस पर तुरंत टेस्ट किया जा सकता है. ByteDance के लिए यह इस तरह काम करता है कि क्यूआर कोड (उदाहरण) के पीछे का यूआरएल, होस्ट किए गए पेज (उदाहरण) पर रीडायरेक्ट करता है, जिसमें विशेष यूआरआई स्कीम वाले लिंक होते हैं, जैसे कि snssdk1128://, Douyin या Toutiao जैसे कई ByteDance सुपर ऐप्लिकेशन पर मिनी ऐप्लिकेशन की झलक देखने के लिए (यहां एक उदाहरण दिया गया है). सुपर ऐप्लिकेशन की सेवा देने वाली अन्य कंपनियां, बीच के पेज पर नहीं जाती. हालांकि, वे सीधे झलक खोलती हैं.

ByteDance DevTools एक क्यूआर कोड दिखा रहा है. उपयोगकर्ता इस क्यूआर कोड को Douyin ऐप्लिकेशन से स्कैन करके, अपने डिवाइस पर मौजूदा मिनी ऐप्लिकेशन देख सकते हैं.
ByteDance DevTools एक क्यूआर कोड दिखाता है. इसे Douyin ऐप्लिकेशन से स्कैन करके, उपयोगकर्ता डिवाइस पर तुरंत टेस्ट कर सकता है.
कंपनी के कई सुपर ऐप्लिकेशन में ByteDance Mini ऐप्लिकेशन की झलक दिखाने वाला बीच का लैंडिंग पेज. इस पेज को सामान्य डेस्कटॉप ब्राउज़र पर खोला गया, ताकि इस प्रोसेस की रिवर्स इंजीनियरिंग की जा सके.
मिनी ऐप्लिकेशन की झलक देखने के लिए, बीच के लेवल पर मौजूद ByteDance लैंडिंग पेज. इसे फ़्लो दिखाने के लिए डेस्कटॉप ब्राउज़र पर खोला गया है.

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

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

डीबगर

एलिमेंट डीबग करना

मिनी ऐप्लिकेशन डीबग करने का अनुभव उन सभी लोगों के लिए जाना-पहचाना है जिन्होंने पहले कभी Chrome DevTools के साथ काम किया है. हालांकि, कुछ काम के अंतर की वजह से मिनी ऐप्लिकेशन के हिसाब से वर्कफ़्लो तय किया जा सकता है. Chrome DevTools के एलिमेंट पैनल के बजाय, मिनी ऐप्लिकेशन आईडीई में कस्टम पैनल होता है. इसे उनकी एचटीएमएल की खास भाषा के हिसाब से बनाया गया है. उदाहरण के लिए, WeChat के मामले में, पैनल को Wxml कहा जाता है, जिसका मतलब है WeiXin मार्कअप लैंग्वेज. Baidu DevTools में इसे स्वान एलिमेंट कहा जाता है. ByteDance DevTools इसे Bxml कहते हैं. Alipay इसका नाम AXML रख सकता है और Quick App पैनल को सिर्फ़ UX के तौर पर दिखाता है. मैं बाद में इन मार्कअप भाषाओं के बारे में ज़्यादा जानूंगा.

WeChat DevTools के &#39;Wxml&#39; पैनल की मदद से, किसी इमेज की जांच की जा रही है. इससे पता चलता है कि इस्तेमाल किया जा रहा टैग एक `इमेज` टैग है.
WeChat DevTools की मदद से <image> एलिमेंट की जांच करना.

हुड के तहत कस्टम एलिमेंट

about://inspect/#devices की मदद से किसी असली डिवाइस पर वेबव्यू की जांच करने पर, पता चलता है कि WeChat DevTools जान-बूझकर सच छिपा रहा था. WeChat DevTools ने एक <image> दिखाया. असल में, मुझे <wx-image> नाम का कस्टम एलिमेंट दिख रहा है. सिर्फ़ <div> को इसका चाइल्ड एलिमेंट माना गया है. यह ध्यान रखना दिलचस्प है कि यह कस्टम एलिमेंट, शैडो DOM का इस्तेमाल नहीं करता है. इन कॉम्पोनेंट के बारे में बाद में ज़्यादा जानकारी दें.

Chrome DevTools की मदद से, किसी असल डिवाइस पर चल रहे WeChat मिनी ऐप्लिकेशन की जांच की जा रही है. WeChat DevTools ने बताया है कि मुझे एक `इमेज` टैग दिख रहा है. वहीं, Chrome DevTools ने बताया है कि मैं असल में `wx-image` कस्टम एलिमेंट के साथ काम कर रहा/रही हूं.
WeChat DevTools की मदद से <image> एलिमेंट की जांच करने पर, यह पता चलता है कि वह असल में एक <wx-image> कस्टम एलिमेंट है.

सीएसएस डीबग करना

दूसरा अंतर है, सीएसएस की अलग-अलग बोलियों में रिस्पॉन्सिव पिक्सल के लिए लंबाई की नई यूनिट rpx (इस यूनिट के बारे में ज़्यादा जानकारी बाद में देखें). WeChat DevTools, डिवाइस पर निर्भर सीएसएस लंबाई यूनिट का इस्तेमाल करता है, ताकि डिवाइस के अलग-अलग साइज़ के लिए ऐप्लिकेशन डेवलप करना ज़्यादा आसान हो.

WeChat DevTools में `200rpx` की ऊपरी और निचली पैडिंग (जगह) की मदद से व्यू की जांच करना.
WeChat DevTools की मदद से किसी व्यू के रिस्पॉन्सिव पिक्सल (200rpx 0) में बताई गई पैडिंग की जांच करना.

परफ़ॉर्मेंस ऑडिटिंग

मिनी ऐप्लिकेशन की परफ़ॉर्मेंस सबसे अहम है. इसलिए, इसमें कोई हैरानी की बात नहीं है कि WeChat DevTools और कुछ अन्य DevTools में लाइटहाउस से प्रेरित ऑडिटिंग टूल को इंटिग्रेट किया गया है. इन ऑडिट में टोटल, परफ़ॉर्मेंस, एक्सपीरियंस, और सबसे सही तरीका शामिल हैं. IDE के व्यू को अपनी पसंद के मुताबिक बनाया जा सकता है. नीचे दिए गए स्क्रीनशॉट में, मैंने ऑडिट टूल के लिए ज़्यादा स्क्रीन रीयल एस्टेट के लिए, कोड एडिटर को कुछ समय के लिए छिपा दिया है.

पहले से मौजूद ऑडिट टूल की मदद से परफ़ॉर्मेंस ऑडिट करना. इन स्कोर में कुल, परफ़ॉर्मेंस, अनुभव, और सबसे सही तरीके के बारे में बताया जाता है. ये सभी 100 पॉइंट में से 100 होते हैं.
WeChat DevTools में पहले से मौजूद ऑडिट टूल, जिसमें कुल परफ़ॉर्मेंस, परफ़ॉर्मेंस, अनुभव, और सबसे सही तरीके दिखाए गए हैं.

एपीआई मॉकिंग

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

WeChat DevTools में एपीआई एंडपॉइंट के लिए मॉक रिस्पॉन्स सेट अप करना.
WeChat DevTools की इंटिग्रेट की गई एपीआई रिस्पॉन्स मॉकिंग सुविधा.

स्वीकार हैं

इस लेख की समीक्षा जो मेडली, कायस बास्क्स, मिलिका मिहाजलिया, ऐलन केंट, और कीथ गू ने की है.