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

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

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

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

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

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

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

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

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

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

   1. सेटिंग पर क्लिक करके या Windows/Linux/ChromeOS पर Ctrl + , या MacOS पर Cmd + , दबाकर, खोलें.
   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 की रिपोर्ट चलाई जा सकती हैं Firebase Studio.

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 में डीबग करने के लिए, लॉन्च कॉन्फ़िगरेशन फ़ाइलों का इस्तेमाल करने के बारे में ज़्यादा जानने के लिए, Visual Studio Code में डीबग करने के लिए कॉन्फ़िगरेशन लेख पढ़ें.

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

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

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

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

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

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

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

• बार-बार कोशिश करना और बेहतर बनाना: Gemini पहली बार में सही जवाब न दे. जवाबों की समीक्षा करें, ज़रूरी होने पर सवाल पूछें, और ज़्यादा जानकारी दें.

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

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

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

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