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

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

ज़्यादा बेहतर और ब्रेकपॉइंट पर आधारित डीबगिंग, ज़्यादातर सामान्य भाषाओं के लिए भी उपलब्ध है. इसके लिए, पहले से मौजूद डीबग कंसोल का इस्तेमाल किया जाता है. साथ ही, OpenVSX से मिले डीबगर एक्सटेंशन की मदद से, डीबगिंग की सुविधा को बेहतर बनाया जा सकता है. अपने फ़्रंटएंड वेब कोड की ब्रेकपॉइंट पर आधारित डिबगिंग के लिए (उदाहरण के लिए, JavaScript), तो अपने ब्राउज़र में पहले से मौजूद डेवलपर टूल का इस्तेमाल जारी रखा जा सकता है. जैसे, Chrome के DevTools.

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

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

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

वेब झलक देखने के लिए, इंटिग्रेट किए गए वेब कंसोल का इस्तेमाल करना

इंटिग्रेट किए गए वेब कंसोल की मदद से, सीधे वेब की झलक से अपने ऐप्लिकेशन की समस्याओं का पता लगाया जा सकता है. IDX वेब की झलक वाले पैनल में वेब कंसोल को ऐक्सेस करने के लिए, सबसे नीचे मौजूद बार को बड़ा करें.

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

1. अपने IDX वर्कस्पेस में वेब कंसोल जोड़ें:

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

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

3. वेब कंसोल पैनल, डिफ़ॉल्ट रूप से वेब की झलक दिखाने वाले पैनल में छोटा हो जाता है. बार को बड़ा करने के लिए, उस पर क्लिक करें या उसे ऊपर की ओर खींचें और छोड़ें.

IDX वेब की झलक में वेब कंसोल पैनल, दूसरे कंसोल की तरह ही काम करता है. जैसे, Chrome DevTools में उपलब्ध कंसोल:

• ऐप्लिकेशन का इस्तेमाल करने पर, आपको JavaScript से जुड़ी गड़बड़ियां और console.log स्टेटमेंट दिखेंगे
  • गड़बड़ियों और चेतावनियों के लिए, आपके पास Gemini in IDX से मदद पाने का विकल्प भी होगा. इसके लिए, गड़बड़ी के मैसेज की दाईं ओर मौजूद, इस गड़बड़ी को समझें बटन को चुनें.
• नीचे दिए गए प्रॉम्प्ट बार का इस्तेमाल करके, वेब झलक के संदर्भ में किसी भी JavaScript का आकलन किया जा सकता है.

वेब झलक के लिए Lighthouse चलाना

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

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

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

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

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

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

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

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

डीबग करने के अनुभव को पसंद के मुताबिक बनाने के लिए, अपने वर्कस्पेस में .vscode/launch.json फ़ाइल भी जोड़ी जा सकती है. साथ ही, लॉन्च के लिए कस्टम कॉन्फ़िगरेशन भी तय किए जा सकते हैं.