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. पर क्लिक करके या 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 सीधे सवाल पूछने से न डरें. उदाहरण के लिए, "इस फ़ंक्शन में null pointer exception की वजह क्या हो सकती है?" या "मैं इस रेस कंडिशन को कैसे रोकूं?"

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

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

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

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

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

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

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