मैं अपने जावास्क्रिप्ट कोड को कैसे डीबग कर सकता हूं? [बन्द है]
जवाबों:
इस उद्देश्य के लिए फायरबग सबसे लोकप्रिय उपकरणों में से एक है।
सभी आधुनिक ब्राउज़र एक अंतर्निहित जावास्क्रिप्ट डीबगिंग एप्लिकेशन के कुछ रूप के साथ आते हैं। इनका ब्योरा संबंधित प्रौद्योगिकियों के वेब पेजों पर दिया जाएगा। जावास्क्रिप्ट डीबग करने के लिए मेरी व्यक्तिगत प्राथमिकता फायरबग है फ़ायरफ़ॉक्स में है। मैं यह नहीं कह रहा हूं कि फायरबग किसी अन्य की तुलना में बेहतर है; यह आपकी व्यक्तिगत पसंद पर निर्भर करता है और आपको वैसे भी सभी ब्राउज़रों में अपनी साइट का परीक्षण करना चाहिए (मेरी व्यक्तिगत पहली पसंद हमेशा फायरबग है)।
मैं नीचे दिए गए कुछ उच्च-स्तरीय समाधानों को कवर करूँगा, उदाहरण के तौर पर Firebug का उपयोग करते हुए :
फ़ायरफ़ॉक्स
फ़ायरफ़ॉक्स अपने स्वयं के इनबिल्ट जावास्क्रिप्ट डिबगिंग टूल के साथ आता है, लेकिन मैं आपको फायरबग ऐड को स्थापित करने की सलाह दूंगा । यह मूल संस्करण के आधार पर कई अतिरिक्त सुविधाएँ प्रदान करता है जो आसान हैं। मैं यहाँ केवल Firebug की बात करने जा रहा हूँ।
एक बार फायरबग स्थापित होने के बाद आप इसे नीचे की तरह एक्सेस कर सकते हैं:
सबसे पहले यदि आप किसी भी तत्व पर राइट क्लिक करते हैं तो आप Firebug के साथ तत्व का निरीक्षण कर सकते हैं :
इसे क्लिक करने से ब्राउज़र के नीचे Firebug पेन खुल जाएगा:
फायरबग कई सुविधाएँ प्रदान करता है, लेकिन हम जिसकी रुचि रखते हैं वह स्क्रिप्ट टैब है। स्क्रिप्ट टैब पर क्लिक करने से यह विंडो खुलती है:
जाहिर है, डीबग करने के लिए आपको पुनः लोड करने की आवश्यकता है :
आप अब ब्रेकपॉइंट जोड़ सकते हैं जावास्क्रिप्ट कोड के बाईं ओर रेखा पर क्लिक करके आप ब्रेकपॉइंट को जोड़ना चाहते हैं:
जब आपका ब्रेकपॉइंट हिट होता है, तो यह नीचे की तरह दिखेगा:
आप वॉच चर भी जोड़ सकते हैं और आम तौर पर वे सब कुछ कर सकते हैं जो आप एक आधुनिक डीबगिंग टूल में चाहते हैं।
फायरबग में दिए गए विभिन्न विकल्पों के बारे में अधिक जानकारी के लिए, फायरबग एफएक्यू देखें ।
क्रोम
क्रोम में निर्मित जावास्क्रिप्ट डिबगिंग विकल्प भी अपना है, जो बहुत ही समान तरीके से, राइट क्लिक, निरीक्षण तत्व, आदि में काम करता है । Chrome डेवलपर टूल पर एक नज़र डालें । मुझे आमतौर पर फायरबग से बेहतर क्रोम में स्टैक के निशान मिलते हैं ।
इंटरनेट एक्स्प्लोरर
यदि आप .NET में विकसित हो रहे हैं और वेब डेवलपमेंट वातावरण का उपयोग करके विजुअल स्टूडियो का उपयोग कर रहे हैं, तो आप सीधे ब्रेकपॉइंट्स लगाकर जावास्क्रिप्ट कोड को डीबग कर सकते हैं, आदि आपका जावास्क्रिप्ट कोड बिल्कुल वैसा ही दिखता है जैसे आप अपने C # या VB.NET कोड को डीबग कर रहे थे ।
यदि आपके पास यह नहीं है, तो इंटरनेट एक्सप्लोरर ऊपर दिखाए गए सभी उपकरण भी प्रदान करता है। क्रोम या फ़ायरफ़ॉक्स के राइट क्लिक इंस्पेक्ट एलिमेंट फीचर्स होने के बजाय , आप F12 दबाकर डेवलपर टूल्स को एक्सेस करते हैं । यह प्रश्न अधिकांश बिंदुओं को शामिल करता है।
- इंटरनेट एक्सप्लोरर 8 (डेवलपर टूल - F12)। इंटरनेट एक्सप्लोरर की भूमि में दूसरी चीज कुछ भी है
- फ़ायरफ़ॉक्स और फायरबग । F12प्रदर्शित करने के लिए मारो ।
- सफ़ारी (मेन्यू बार दिखाएं, वरीयताएँ -> उन्नत -> मेन्यू बार दिखाएँ दिखाएँ )
- Google Chrome जावास्क्रिप्ट कंसोल ( F12या ( Ctrl+ Shift+ J))। ज्यादातर वही ब्राउज़र है जो सफारी के रूप में है, लेकिन सफारी बेहतर IMHO है।
- ओपेरा ( उपकरण -> उन्नत -> डेवलपर उपकरण )
जावास्क्रिप्ट कोड को डीबग करने के लिए जावास्क्रिप्ट में एक डीबगर कीवर्ड होता है। डिबगर रखो ; आपके जावास्क्रिप्ट कोड में स्निपेट। यह स्वचालित रूप से उस बिंदु पर जावास्क्रिप्ट कोड डीबग करना शुरू कर देगा।
उदाहरण के लिए:
मान लीजिए कि यह आपकी test.js फ़ाइल है
function func(){
//Some stuff
debugger; //Debugging is automatically started from here
//Some stuff
}
func();- जब ब्राउज़र सक्षम डिबगर के साथ डेवलपर विकल्प में वेब पेज चलाता है, तो यह स्वचालित रूप से डीबगर से डीबग करना शुरू कर देता है; बिंदु।
- ब्राउज़र को डेवलपर विंडो खोलनी चाहिए।
मैं पुराने अच्छे printfदृष्टिकोण का उपयोग करता हूं (एक प्राचीन तकनीक जो किसी भी समय अच्छी तरह से काम करेगी)।
जादू देखें %o:
console.log("this is %o, event is %o, host is %s", this, e, location.host);%oजेएस ऑब्जेक्ट की डंप क्लिक करने योग्य और गहरी-भूरे रंग की, सुंदर-मुद्रित सामग्री। %sसिर्फ एक रिकॉर्ड के लिए दिखाया गया था।
और इस:
console.log("%s", new Error().stack);आपको जावा-जैसे स्टैक ट्रेस टू पॉइंट ऑफ new Error()इन्वोकेशन ( फाइल और लाइन नंबर के लिए पथ !!) सहित देता है।
दोनों %oऔर new Error().stackक्रोम और फ़ायरफ़ॉक्स में उपलब्ध है।
ऐसे शक्तिशाली साधनों से आप अनुमान लगाते हैं कि आपके जेएस में क्या गलत हो रहा है, डिबग आउटपुट डालें ( ifडेटा की मात्रा कम करने के लिए बयान में लपेटें मत भूलना ) और अपनी धारणा को सत्यापित करें। समस्या को ठीक करें या नई धारणा बनाएं या बिट समस्या के लिए अधिक डिबग आउटपुट डालें।
इसके अलावा स्टैक निशान के उपयोग के लिए:
console.trace();कंसोल के रूप में कहते हैं
हैप्पी हैकिंग!
फायरबग और IE डिबगर से शुरू करें।
हालांकि जावास्क्रिप्ट में डीबगर्स के साथ सावधान रहें। हर बार एक समय में वे पर्यावरण को प्रभावित करेंगे बस कुछ त्रुटियों के कारण जो आप डिबग करने की कोशिश कर रहे हैं।
उदाहरण:
इंटरनेट एक्सप्लोरर के लिए, यह आमतौर पर एक क्रमिक मंदी है और कुछ प्रकार की मेमोरी लीक प्रकार की डील है। आधे घंटे के बाद या तो मुझे पुनः आरंभ करने की आवश्यकता है। यह काफी नियमित लगता है।
फायरबग के लिए, यह शायद एक वर्ष से अधिक हो गया है इसलिए यह एक पुराना संस्करण हो सकता है। नतीजतन, मुझे बारीकियों की याद नहीं है, लेकिन मूल रूप से कोड सही ढंग से नहीं चल रहा था और थोड़ी देर के लिए इसे डीबग करने की कोशिश करने के बाद मैंने फायरबग को निष्क्रिय कर दिया और कोड ने ठीक काम किया।
यद्यपि alert(msg);उन "में काम करता है" मैं सिर्फ यह जानना चाहता हूं कि "परिदृश्यों पर क्या चल रहा है ... हर डेवलपर ने उस मामले का सामना किया है जहां आप एक (बहुत बड़े या अंतहीन) लूप में समाप्त होते हैं जिसे आप बाहर नहीं तोड़ सकते हैं।
मैं आपको विकास के दौरान सलाह दूंगा कि यदि आप एक बहुत ही इन-फेस डिबग विकल्प चाहते हैं, तो एक डीबग विकल्प का उपयोग करें जो आपको बाहर निकालने देता है। (PS ओपेरा, सफारी और क्रोम? सभी अपने मूल संवादों में यह उपलब्ध है)
//global flag
_debug = true;
function debug(msg){
if(_debug){
if(!confirm(msg + '\n\nPress Cancel to stop debugging.')){
_debug = false;
}
}
}के साथ आप ऊपर पॉपअप डिबगिंग की एक बड़ी पाश, जहां दबाने में अपने आप प्राप्त कर सकते हैं Enter/ Okआप प्रत्येक संदेश के माध्यम से पर जा सकते हैं, लेकिन दबाने Escape/ Cancelकी मदद से आप अच्छी तरह से बाहर तोड़।
विजुअल स्टूडियो 2008 में कुछ बहुत अच्छे जावास्क्रिप्ट डिबगिंग टूल हैं। आप अपने क्लाइंट साइड जावास्क्रिप्ट कोड में एक ब्रेकपॉइंट ड्रॉप कर सकते हैं और इसके माध्यम से उसी टूल का उपयोग करके कदम बढ़ा सकते हैं जैसे आप सर्वर साइड कोड। इसे सक्षम करने के लिए किसी प्रक्रिया से जुड़ने या कुछ भी मुश्किल करने की आवश्यकता नहीं है।
मैं कुछ टूल्स का इस्तेमाल करता हूं: फिडलर , फायरबग और विजुअल स्टूडियो। मैंने सुना है इंटरनेट एक्सप्लोरर 8 में एक अच्छा अंतर्निहित डिबगर है।
जब तक Internet Explorer 8 बाहर नहीं आया, तब तक मैं Firebug का उपयोग करता था। मैं इंटरनेट एक्सप्लोरर का बहुत बड़ा प्रशंसक नहीं हूं, लेकिन अंतर्निहित डेवलपर टूल के साथ कुछ समय बिताने के बाद, जिसमें वास्तव में अच्छा डीबगर शामिल है, यह किसी और चीज का उपयोग करने के लिए व्यर्थ लगता है। मुझे अपनी टोपी माइक्रोसॉफ्ट को देनी होगी, उन्होंने इस टूल पर शानदार काम किया।
आप YUI लकड़हारा भी देख सकते हैं । आपको इसका उपयोग करने के लिए अपने HTML में टैग के एक जोड़े को शामिल करना होगा। यह फायरबग के लिए एक सहायक जोड़ है, जो कमोबेश जरूरी है।
विज़ुअल स्टूडियो के जावास्क्रिप्ट डिबगर का उपयोग करने के अलावा, मैंने अपना स्वयं का सरल पैनल लिखा था जिसे मैं एक पृष्ठ पर शामिल करता हूं। यह केवल विजुअल स्टूडियो की तत्काल विंडो की तरह है । मैं अपने चर के मूल्यों को बदल सकता हूं, अपने कार्यों को कॉल कर सकता हूं, और चर के मूल्यों को देख सकता हूं। यह केवल पाठ क्षेत्र में लिखे गए कोड का मूल्यांकन करता है।
फ़ायरबग और ब्राउज़र-देशी डेवलपर एक्सटेंशन के अलावा JetBrains WebStorm IDE फ़ायरफ़ॉक्स और क्रोम (एक्सटेंशन आवश्यक) के लिए दूरस्थ डीबग समर्थन के साथ आता है।
यह भी समर्थन करता है:
यह नि: शुल्क परीक्षण करने के लिए विकल्प 30 परीक्षण या एक प्रारंभिक एक्सेस संस्करण का उपयोग कर रहे हैं ।
यदि आप विज़ुअल स्टूडियो का उपयोग कर रहे हैं , तो debugger;उस कोड के ऊपर रखें जिसे आप डीबग करना चाहते हैं। निष्पादन के दौरान नियंत्रण उस स्थान पर रुक जाएगा, और आप वहां से कदम दर कदम डीबग कर सकते हैं।
अधिकांश उत्तरों के साथ, यह वास्तव में निर्भर करता है: आप अपने डिबगिंग के साथ क्या हासिल करना चाहते हैं? बुनियादी विकास, प्रदर्शन के मुद्दों को ठीक करना? बुनियादी विकास के लिए, पिछले सभी उत्तर पर्याप्त से अधिक हैं।
विशेष रूप से प्रदर्शन परीक्षण के लिए, मैं फायरबग की सलाह देता हूं। समय के संदर्भ में कौन सी विधियाँ सबसे अधिक महंगी हैं, यह प्रोफाइल करने में सक्षम है, जिन परियोजनाओं पर मैंने काम किया है, उनके लिए अमूल्य है। चूंकि क्लाइंट-साइड लाइब्रेरी अधिक मजबूत हो जाती हैं, और अधिक जिम्मेदारी क्लाइंट-साइड को सामान्य रूप से रखा जाता है, इस प्रकार की डिबगिंग और प्रोफाइलिंग केवल अधिक उपयोगी हो जाएगी।
फायरबग कंसोल एपीआई: http://getfirebug.com/console.html
F12वेब डेवलपर्स को दबाकर ब्राउज़र छोड़ने के बिना जावास्क्रिप्ट कोड को जल्दी से डीबग कर सकते हैं। यह विंडोज के हर इंस्टॉलेशन में बनाया गया है।
में इंटरनेट एक्सप्लोरर 11 , F12 उपकरण ऐसे breakpoints, घड़ी और स्थानीय चर देखने, और संदेशों और तत्काल कोड निष्पादन के लिए एक सांत्वना के रूप में उपकरण डिबगिंग प्रदान करता है।