प्रोजेक्ट आईडीX में अपना ऐप्लिकेशन डीबग करना

Project IDX की मदद से, सीधे अपने वर्कस्पेस से, ऐप्लिकेशन को डीबग करने के कुछ अलग-अलग तरीके दिखते हैं. वेब और Flutter ऐप्लिकेशन आपके फ़ाइल फ़ोल्डर में मौजूद Chrome वेब की झलक में Lighthouse और Chrome DevTools की सुविधा देते हैं. Flutter ऐप्लिकेशन iOS, Android, और वेब झलक की सुविधा देता है. इनकी मदद से, कोडिंग करते समय आपके ऐप्लिकेशन की पहचान की जा सकती है और उसे टेस्ट किया जा सकता है. पहले से मौजूद डीबग कंसोल, सबसे आम भाषाओं के लिए अपने-आप डीबग होने की सुविधा के साथ काम करता है. साथ ही, आपके पास अपने फ़ाइल फ़ोल्डर की launch.json फ़ाइल में कस्टम डीबग करने की सुविधा भी है.

अपने ऐप्लिकेशन की झलक देखें

IDX में, वेब ऐप्लिकेशन (Chrome और मोबाइल Safari) और Flutter ऐप्लिकेशन (iOS, Android, Chrome) के लिए, वर्कस्पेस में ऐप्लिकेशन की झलक शामिल हैं. Android और Chrome की झलक में हॉट रीलोड और हॉट रीफ़्रेश की सुविधा है. साथ ही, इनमें एम्युलेटर की सभी सुविधाएं भी मिलती हैं. Safari और iOS सिम्युलेटर कई तरह के iOS डिवाइसों पर विज़ुअल और इंटरैक्टिव झलक दिखाते हैं. साथ ही, ये मोबाइल और वेब ऐप्लिकेशन को iOS के अनुभव जैसा अनुभव देते हैं.

IDX की झलक के बारे में ज़्यादा जानने के लिए, अपने ऐप्लिकेशन की झलक देखें.

वेब की झलक के लिए Chrome DevTools का इस्तेमाल करें (एक्सपेरिमेंट के तौर पर उपलब्ध)

Chrome DevTools की मदद से, सीधे वेब झलक से अपने ऐप्लिकेशन में समस्याओं का पता लगाया जा सकता है. Chrome ब्राउज़र में DevTools खोलने की तरह ही IDX के वेब झलक पैनल में, Chrome DevTools को ऐक्सेस किया जा सकता है.

इस सुविधा को एक्सपेरिमेंट के तौर पर शुरू किया गया है, क्योंकि हम उपयोगकर्ताओं को बेहतरीन अनुभव देने की दिशा में काम कर रहे हैं. इसे बेहतर बनाने में हमारी मदद करने के लिए, हमें सुझाव/राय भेजें या शिकायत करें.

1. Chrome DevTools को अपने IDX फ़ाइल फ़ोल्डर में जोड़ें:

   1. गियर आइकॉन पर क्लिक करके या Windows/Linux/ChromeOS पर Ctrl + , या MacOS पर Cmd + , दबाकर सेटिंग विंडो खोलें.
   2. IDX: वेब डेवलपर टूल सेटिंग ढूंढें और वेब की झलक के लिए Chrome DevTools चालू करें (ब्राउज़र को फिर से लोड करना ज़रूरी है) चुनें. अगर settings.json फ़ाइल का इस्तेमाल किया जाता है, तो "IDX.webDevTools": true को भी सेट किया जा सकता है.
   3. ब्राउज़र विंडो को रीफ़्रेश करें और IDX फ़ाइल फ़ोल्डर को फिर से लोड करें.

2. प्रोजेक्ट आईडीएक्स में वेब झलक खोलें: कमांड पैलेट (Mac पर Cmd+Shift+P या ChromeOS, Windows या Linux पर Ctrl+Shift+P) खोलें और प्रोजेक्ट आईडीX: वेब झलक दिखाएं चुनें.

3. वेब की झलक दिखाने वाले पैनल में DevTools पैनल को छोटा किया गया है. पैनल को बड़ा करने के लिए, DevTools बार पर क्लिक करें. इसके बाद, वेब झलक पैनल में DevTools का इस्तेमाल करें.

IDX वेब की झलक में, DevTools पैनल का इस्तेमाल ठीक उसी तरह करें जिस तरह Chrome ब्राउज़र में अपने ऐप्लिकेशन को डीबग करने के लिए किया जाता है.

वेब झलक के लिए लाइटहाउस चलाएं

Lighthouse ऑडिट की चुनी गई कैटगरी के आधार पर आपके ऐप्लिकेशन का ऑडिट करता है और नतीजों और सुझावों के साथ एक रिपोर्ट देता है. Project IDX में, सीधे वेब झलक से लाइटहाउस रिपोर्ट चलाई जा सकती है.

1. प्रोजेक्ट आईडीएक्स में वेब झलक खोलें: कमांड पैलेट (Mac पर Cmd+Shift+P या ChromeOS, Windows या Linux पर Ctrl+Shift+P) खोलें और प्रोजेक्ट आईडीX: वेब झलक दिखाएं चुनें.

2. वेब झलक टूलबार में, परफ़ॉर्मेंस की जांच करने वाले आइकॉन पर क्लिक करें.

3. लाइटहाउस पैनल में, अपनी पसंद की ऑडिट कैटगरी चुनें. परफ़ॉर्मेंस, सुलभता, सबसे सही तरीकों के हिसाब से बदलाव, एसईओ, और प्रोग्रेसिव वेब ऐप्लिकेशन की परफ़ॉर्मेंस की ऑडिट रिपोर्ट में से, किसी एक को चुना जा सकता है. रिपोर्ट जनरेट करने के लिए पेज का विश्लेषण करें पर क्लिक करें.

   रिपोर्ट जनरेट होने में कुछ मिनट लग सकते हैं.

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

डीबग कंसोल का इस्तेमाल करना

Project IDX में, Code OSS का पहले से मौजूद Debug Console शामिल है. सबसे ज़्यादा इस्तेमाल की जाने वाली प्रोग्रामिंग भाषाओं के लिए, अपने ऐप्लिकेशन को सामान्य डीबगर की मदद से डीबग करने के लिए, इस कंसोल का इस्तेमाल करें. इसके अलावा, VSCode Marketplace से डीबग करने का एक्सटेंशन जोड़ें.

अगर आपको कस्टम डीबगिंग लिखनी है, तो अपने फ़ाइल फ़ोल्डर में launch.json फ़ाइल जोड़ें.