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

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

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

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

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

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

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

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

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

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

   1. settings पर क्लिक करके या Ctrl + , (Windows/Linux/ChromeOS पर) या Cmd + , (MacOS पर) दबाकर, सेटिंग खोलें.
   2. Firebase Studio: Web Dev Tools सेटिंग ढूंढें और इसे चालू करें. अगर 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 की मदद से डीबग करना

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

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

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

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

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

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

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

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

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

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

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