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. पर क्लिक करके या 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 में वेब की झलक से, सीधे लाइटहाउस रिपोर्ट चलाई जा सकती हैं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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