Firebase Studio में अपने ऐप्लिकेशन को डीबग करना

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

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

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

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

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

वेब प्रीव्यू के लिए, इंटिग्रेट की गई वेब कंसोल का इस्तेमाल करना

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

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

1. अपनी Firebase Studio फ़ाइल फ़ोल्डर में वेब कंसोल जोड़ें:

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

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

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

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

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

वेब की झलक देखने के लिए Lighthouse चलाएं

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

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

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

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

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

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

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

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

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

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

Gemini का इस्तेमाल करके, अपने कोड की गड़बड़ियों को ठीक किया जा सकता है. इसके लिए, Code वर्कस्पेस या App Prototyping agent में चैट करें.

Gemini आपके लिए कोड लिख सकता है. हालांकि, कभी-कभी इसमें गड़बड़ियां भी हो सकती हैं. गड़बड़ी का पता चलने पर, यह उसे ठीक करने की कोशिश करेगा. अगर आपको लगता है कि गड़बड़ी के मैसेज के बावजूद समस्या हल नहीं हो रही है, तो यहां दिए गए कुछ तरीके आज़माएं:

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

• सीधे तौर पर सवाल पूछें: अपने कोड के बारे में Gemini सीधे तौर पर सवाल पूछने में न हिचकिचाएं. उदाहरण के लिए, "इस फ़ंक्शन में नल पॉइंटर एक्सेप्शन किस वजह से हो सकता है?" या "मैं इस रेस कंडीशन को कैसे रोकूं?"

• मुश्किल समस्याओं को छोटे-छोटे हिस्सों में बांटें: अगर आपको किसी मुश्किल समस्या का सामना करना पड़ रहा है, तो उसे छोटे-छोटे और आसान हिस्सों में बांट लें. Gemini से हर हिस्से को अलग-अलग डीबग करने के लिए कहें. साथ ही, समस्याओं के बारे में सिलसिलेवार तरीके से सोचने के लिए कहें.

• कोड फ़ेंस का इस्तेमाल करें: कोड स्निपेट शेयर करते समय, कोड फ़ेंस का इस्तेमाल करें. इससे यह पक्का किया जा सकता है कि कोड को सही तरीके से फ़ॉर्मैट किया गया हो. इससे Gemini को आपके कोड को पढ़ने और समझने में आसानी होती है.

• बेहतर बनाने के लिए लगातार सुधार करें: ऐसा हो सकता है कि Gemini पहली बार में सही जवाब न दे. जवाबों की समीक्षा करें, सवालों के बारे में ज़्यादा जानकारी पाएं, और ज़रूरत के मुताबिक ज़्यादा जानकारी दें.

• प्रॉम्प्ट के लूप से बचें: अगर Gemini किसी लूप में फंस जाता है या आपके सवाल का जवाब नहीं दे पाता है, तो अपने प्रॉम्प्ट को अलग तरीके से पूछें या ज़्यादा जानकारी दें. कभी-कभी, अपने सवाल को बदलकर पूछने से Gemini को यह समझने में मदद मिल सकती है कि आपको क्या जानकारी चाहिए.

  अगर प्रॉम्प्ट को फिर से लिखने पर भी लूप की समस्या ठीक नहीं होती है, तो ये तरीके आज़माएं:

  • नई चैट शुरू करें: अगर Code Workspace में Gemini चैट का इस्तेमाल किया जा रहा है, तो Gemini के कॉन्टेक्स्ट को रीसेट करने के लिए, एक नया चैट सेशन शुरू करें. इससे पिछली बातचीत में Gemini की ओर से की गई किसी भी गलतफ़हमी या अनुमान से छुटकारा पाने में मदद मिल सकती है.

  • विपरीत उदाहरण दें: अगर Gemini गलत अनुमान लगा रहा है, तो उसे सही व्यवहार समझने में मदद करने के लिए, विपरीत उदाहरण दें.