फायरबग का उपयोग करके जावास्क्रिप्ट को डिबग करना

डिबगिंग दोषों को दूर करने की व्यवस्थित विधि है। यह सब परीक्षण मामलों के निष्पादन के साथ शुरू होता है। जब भी परीक्षण मामलों को निष्पादित किया जाता है, वास्तविक परिणामों की तुलना अपेक्षित परिणामों से की जाती है। यदि वास्तविक परिणामों और अपेक्षित परिणामों के बीच पत्राचार की कोई कमी है, तो मूल कारण विश्लेषण किया जाता है और अतिरिक्त परीक्षण जैसे प्रतिगमन परीक्षण किए जाते हैं ताकि यह सुनिश्चित हो सके कि परिणाम अपेक्षित लाइनों के साथ हैं।

स्थिर वेब पेजों को डिजाइन करने के लिए, HTML का व्यापक रूप से उपयोग किया जाता है। गतिशील वेब-आधारित अनुप्रयोगों को विकसित करने के लिए, जावास्क्रिप्ट, वेब की स्क्रिप्टिंग भाषा का उपयोग किया जाना चाहिए। अपने कोड को बग-मुक्त बनाने के लिए, प्रोग्रामर कई डिबगिंग तकनीकों पर भरोसा करते हैं। त्रुटियों और अपवादों को दूर रखने का यह एक शानदार तरीका है। हालांकि, जावास्क्रिप्ट उत्कृष्ट डिबगिंग कार्यक्षमताओं से लैस नहीं है। सौभाग्य से, वेब ब्राउज़र-आधारित डीबगर फायरबग का उपयोग करके जावास्क्रिप्ट में लिखे गए कोड की पंक्तियों को डीबग करना आसान है।

आइए अब मैं आपको तकनीकी शब्दजाल से परिचित कराता हूं। फ़ायरबग डीबगर के घटकों पर कुछ व्यावहारिक वाक्य यहां दिए गए हैं:

• JSEditor - JSEditor और कुछ नहीं बल्कि JavaScript संपादक है। सभी उद्देश्यों और उद्देश्यों के लिए, JSEditor आपको "सभी त्रुटियों को तोड़ें" का उपयोग करके जावास्क्रिप्ट कोड को डीबग करने की अनुमति देता है। एक उपयोगकर्ता को बस इतना करना है कि स्क्रिप्ट निष्पादन को रोकने के लिए इस विकल्प की जांच करें।
• स्क्रिप्ट टैब - कंसोल फ़ायरबग डीबगर के फलक पर मौजूद पहला टैब है। HTML और CSS फलक पर मौजूद दूसरे और तीसरे टैब हैं। स्क्रिप्ट टैब चौथा है। स्क्रिप्ट पैनल को दो उप-पैनलों में विभाजित किया गया है-बाईं ओर का पैनल जावास्क्रिप्ट संपादक है। दाईं ओर के पैनल में दो उप-पैनल शामिल हैं- वॉच और ब्रेकपॉइंट।
• JSFileSelector - JSFileSelector आपके पेज के दायरे में आने वाली सभी JavaScript फ़ाइलों की सूची प्रदर्शित करता है।
• ब्रेकपॉइंट - जावास्क्रिप्ट निष्पादन ब्रेकप्वाइंट पर रुक जाएगा। यह पूरी निष्पक्षता में कहा जा सकता है कि फायरबग में तीन प्रकार के ब्रेकप्वाइंट होते हैं- स्टेटिक, कंडीशनल और डायनेमिक। स्थिर विराम बिंदु सेट करने के लिए, स्क्रिप्ट पैनल में कोड की वांछित पंक्ति पर क्लिक करें। जैसा कि नाम से पता चलता है, सशर्त विराम बिंदु एक शर्त के आधार पर निर्धारित किए जाने चाहिए। फ़ंक्शन नामों के आधार पर ब्रेकप्वाइंट सेट करने के लिए, आप डायनेमिक ब्रेकप्वाइंट पर बैंक कर सकते हैं। गतिशील ब्रेकप्वाइंट के लिए कुछ प्रिय है- उन्हें कमांडलाइन से सेट किया जा सकता है। इसके अलावा, उन्हें दो लोकप्रिय रूप से उपयोग किए जाने वाले फ़ंक्शन- डिबग और अनबग का उपयोग करके सेट किया जा सकता है।
• ब्रेकप्वाइंट की सूची - सभी ब्रेकप्वाइंट पैनल में प्रदर्शित होंगे। आप अनावश्यक ब्रेकप्वाइंट हटा सकते हैं।
• विंडो देखें - 'वॉच विंडो' उन सभी के लिए एक जाना-पहचाना शब्द है जो माइक्रोसॉफ्ट विजुअल स्टूडियो की बारीकियों से अच्छी तरह वाकिफ हैं। हालांकि, फायरबग की वॉच विंडो और माइक्रोसॉफ्ट विजुअल स्टूडियो के बीच मौजूद अंतर की बारीक रेखाओं को समझने से दुनिया अच्छी होगी। फ़ायरबग की विंडो देखें एक सूची के रूप में उपलब्ध चर के सभी मूल्यों को प्रदर्शित करेगा। शोक पेश आना! वेरिएबल के मान जो दायरे में हैं, केवल प्रदर्शित होते हैं। इसके विपरीत, माइक्रोसॉफ्ट विजुअल स्टूडियो की वॉच विंडो चयनित चरों के मान प्रदर्शित करेगी।

फ़ायरबग ऐड-ऑन कैसे स्थापित करें

• मोज़िला फ़ायरफ़ॉक्स ब्राउज़र खोलें। विंडो के ऊपरी दाएं कोने में, आप मेनू खोलें . पा सकते हैं
• मेनू खोलें क्लिक करें और ऐड-ऑन पर क्लिक करें। एक नई विंडो दिखाई देती है।
• खोज बॉक्स में, फ़ायरबग टाइप करें और Enter . दबाएं कुंजीपटल की कुंजी.
• फ़ायरबग ऐड-ऑन दिखाई देता है। इंस्टॉल करें Click क्लिक करें ।

फ़ायरबग अब आपके Firefox ब्राउज़र में जोड़ दिया गया है।

फ़ायरबग का उपयोग करके Javascript कोड को डीबग कैसे करें

यहां, एक सरल 8 चरण की प्रक्रिया है जो आपको फायरबग का उपयोग करके फ़ायरफ़ॉक्स में जावास्क्रिप्ट कोड को डीबग करने देती है:

• एक नोटपैड फ़ाइल में अपना जावास्क्रिप्ट कोड लिखें। इसे .htm एक्सटेंशन से सेव करें। इस .htm फाइल को फायरफॉक्स ब्राउजर में खोलें। बिना किसी दूसरे विचार के, फ़ायरबग डीबगर का कंसोल लॉन्च करें।
• कोड की वांछित रेखा पर एक स्थिर विराम बिंदु सेट करें। स्क्रिप्ट टैब के दाहिने पैनल पर, आप कोड की उस पंक्ति को देख सकते हैं, जिसके लिए स्थिर विराम बिंदु नियत किया गया है।
• “स्टेप ओवर” बटन पर क्लिक करके कोड लाइन को लाइन दर लाइन निष्पादित करें। यह बटन फायरबग टूलबार पर मौजूद है। स्टेप ओवर बटन के अलावा, आप तीन अन्य बटन देख सकते हैं- कंटिन्यू, स्टेप इन और स्टेप आउट। एक बार ब्रेकपॉइंट का सामना करने के बाद स्क्रिप्ट के निष्पादन को फिर से शुरू करने के लिए, जारी रखें पर क्लिक करें। वैकल्पिक क्रिया के रूप में, आप F8 बटन दबा सकते हैं। किसी विशेष फ़ंक्शन कॉल पर कदम रखने के लिए, स्टेप ओवर पर क्लिक करें। वैकल्पिक क्रिया के रूप में, आप F10 बटन दबा सकते हैं। किसी विशेष फ़ंक्शन के मुख्य भाग में जाने के लिए, स्टेप इन पर क्लिक करें। वैकल्पिक क्रिया के रूप में, आप F11 बटन दबा सकते हैं। स्क्रिप्ट के निष्पादन को फिर से शुरू करने और अगले ब्रेकपॉइंट पर रुकने के लिए, स्टेप आउट पर क्लिक करें।
• वॉच विंडो पर प्रदर्शित होने वाले मानों को ध्यान से देखें।
• जरूरतमंद काम करें। बग की पहचान करें और बग को ठीक करें।
• पेज को फिर से लोड करें। ऐसा करने के लिए, फ़ायरफ़ॉक्स के पुनः लोड बटन पर क्लिक करें। एक वैकल्पिक क्रिया के रूप में, आप कुंजियों के संयोजन को दबा सकते हैं- Ctrl+R.
• अधिकांश चरों के मान वॉच विंडो पर प्रदर्शित होंगे। हालाँकि, एक या दो चर के मान गायब हो सकते हैं। उस स्थिति में, विवेकपूर्ण डिबगर्स कमांडलाइन एपीआई की दक्षता की पुष्टि करते हैं। किसी विशेष फ़ंक्शन की पहली पंक्ति पर ब्रेकपॉइंट जोड़ने के लिए, डिबग (fn) का उपयोग करें। किसी विशेष फ़ंक्शन की पहली पंक्ति पर मौजूद ब्रेकपॉइंट को हटाने के लिए, undebug(fu) का उपयोग करें।
• बग को ठीक करने के बाद, कोड को एक बार फिर से निष्पादित करें। यदि इसमें कोई बग है, तो उपरोक्त 7 चरणों का पालन करके कोड को डीबग करें। फ़ाइल को सहेजें और फ़ायरफ़ॉक्स में उसका पूर्वावलोकन करें।

प्रोग्रामर फ़ायरबग की दक्षता पर बैंकिंग द्वारा अपने सबसे बुरे सपने-बग फिक्सिंग को दूर कर सकते हैं। आपके निपटान में फायरबग के साथ, डिबगिंग आसान हो जाती है।