Chrome Devtools मध्ये JavaScript कोड डीबग करण्यासाठी तपशीलवार मार्गदर्शक. इतर टॅबसह परस्परसंवाद. फंक्शनसाठी स्टॅक ट्रेस मिळवणे

त्रुटींचे कारण शोधण्याच्या बाबतीत, तुमचे साधन जाणून घेतल्याने सर्व फरक पडू शकतो. जरी JavaScript ला डीबग करणे कठीण असल्याची प्रतिष्ठा असली तरी, तुम्हाला काही युक्त्या माहित असल्यास, त्रुटीचे कारण शोधण्यात कमी वेळ लागेल.

आम्ही 14 डीबगिंग टिपांची सूची तयार केली आहे ज्याबद्दल तुम्हाला कदाचित माहिती नसेल, परंतु ते तुम्हाला तुमचा JavaScript कोड डीबग करण्यात मदत करू शकते.

यापैकी बहुतेक टिपा क्रोम आणि फायरफॉक्ससाठी आहेत, जरी त्यापैकी बहुतेक इतर ब्राउझरसाठी विकास साधनांमध्ये कार्य करतात.

1. 'डीबगर;'

नंतर console.log, ‘डीबगर;माझे आवडते द्रुत आणि गलिच्छ डीबगिंग साधन. एकदा तुम्ही तुमच्या कोडमध्ये ते जोडले की, Chrome आपोआप कोडची अंमलबजावणी थांबवते. तुम्ही ते अशा स्थितीतही गुंडाळू शकता जेणेकरुन जेव्हा तुम्हाला त्याची गरज असेल तेव्हाच ते पेटते.

जर (ही गोष्ट) (डीबगर; )

2. टेबल म्हणून वस्तू प्रदर्शित करणे

काहीवेळा आपल्याकडे ऑब्जेक्ट्सचा एक जटिल संच असतो जो आपण पाहू इच्छिता. तुम्ही वापरू शकता console.logत्यांना प्रदर्शित करण्यासाठी, आणि नंतर मोठ्या सूचीमधून स्क्रोल करा किंवा वापरा console.table. यामुळे तुम्ही काय हाताळत आहात हे समजून घेणे खूप सोपे होते.

वर प्राणी = [ ( प्राणी: "घोडा", नाव: "हेन्री", वय: 43), ( प्राणी: "कुत्रा", नाव: "फ्रेड", वय: 13), ( प्राणी: "मांजर", नाव: " फ्रोडो", वय: १८ )]; console.table(प्राणी);

3. वेगवेगळ्या रिझोल्यूशनवर पाहण्याचा प्रयत्न करा

आपल्या डेस्कवर कोणतेही मोबाइल डिव्हाइस असणे आश्चर्यकारक असेल, परंतु वास्तविक जगात हे शक्य नाही. व्ह्यूपोर्टचा आकार कसा बदलायचा? Chrome तुम्हाला आवश्यक असलेली प्रत्येक गोष्ट देते. डेव्हलपर टूल्स वर जा आणि नंतर स्विच डिव्हाइस मोड बटणावर क्लिक करा. तुमची मीडिया एक्स्प्रेशन्स जिवंत होतात ते पहा!

4. DOM घटक द्रुतपणे शोधा

टूलबॉक्समध्ये एक DOM घटक निवडा आणि नंतर कन्सोलमध्ये प्रवेश करा. Chrome चे dev टूल्स शेवटचे पाच घटक लक्षात ठेवतात: शेवटचा निवडलेला घटक $0, दुसरा ते शेवटचा निवडलेला घटक $1 इ.

तुम्ही 'आयटम-४', 'आयटम-३', 'आयटम-२', 'आयटम-१', 'आयटम-०' या क्रमाने खालील घटक निवडल्यास, कन्सोलमध्ये दाखवल्याप्रमाणे तुम्ही DOM घटकांमध्ये प्रवेश करू शकता:

5. console.time() आणि console.timeEnd() वापरून कोड अंमलबजावणी वेळ मोजणे

कोडचा एक भाग कार्यान्वित करण्यासाठी किती वेळ लागतो हे जाणून घेणे खूप उपयुक्त ठरू शकते, विशेषत: स्लो लूप डीबग करताना. तुम्ही अनेक नामांकित टाइमर सेट करू शकता. चला एक उदाहरण पाहू:

Console.time("Timer1"); var आयटम = ; साठी(var i = 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

हा कोड खालील परिणाम देईल:

6. फंक्शनसाठी स्टॅक ट्रेस मिळवणे

तुम्हाला कदाचित माहित असेल की JavaScript फ्रेमवर्कमध्ये बरेच कोड असतात.

हा कोड इंटरफेस रेंडर करतो, इव्हेंट फायर करतो, म्हणून शेवटी तुम्हाला हे जाणून घ्यायचे असेल की फंक्शन कशामुळे कॉल केले गेले.

JavaScript ही उच्च संरचित भाषा नसल्यामुळे, कधी कधी काय घडले आणि कधी घडले याची माहिती मिळवण्यासाठी ती उपयुक्त ठरते. याच क्षणी तो स्टेजवर येतो console.trace.

कल्पना करा की तुम्हाला फंक्शनसाठी संपूर्ण कॉल स्टॅक पाहायचा आहे funcZकॉपी मध्ये कार 33 ओळीवर.

वर कार; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); .funcZ(); ) this.funcZ = function() ( console.trace('trace car') ) func1(); var कार; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); .funcZ(); ) this.funcZ = function() ( console.trace('trace car'); ) ) func1();

आता आपण पाहतो की func1 ला func2 म्हणतात, ज्याला func4 म्हणतात. Func4 कारचे एक उदाहरण तयार करते आणि नंतर car.funcX इ. फंक्शनला कॉल करते.

जरी तुम्हाला असे वाटत असेल की तुम्हाला प्रोग्राम एक्झिक्युशन स्क्रिप्ट चांगली माहिती आहे, हे खूप सोयीचे असू शकते. समजा तुम्हाला तुमचा कोड सुधारायचा आहे. स्टॅक ट्रेस आणि सर्व संबंधित फंक्शन्सची सूची मिळवा, त्यातील प्रत्येक पाहण्यायोग्य आहे.

7. मिनिफाइड कोड फॉरमॅट करणे

कधीकधी तुम्हाला उत्पादनामध्ये समस्या येऊ शकते, परंतु तुमचे स्त्रोत नकाशे सर्व्हरवर नाहीत. हे ठीक आहे. Chrome तुमच्या JavaScript फाइल्स अधिक वाचनीय फॉरमॅटमध्ये फॉरमॅट करू शकते. अर्थात, कोड सोर्स कोडइतका माहितीपूर्ण नसेल, परंतु त्यात काय चालले आहे ते किमान तुम्ही समजू शकता. () बटणावर क्लिक करा तेही प्रिंट", निरीक्षक मध्ये कोड दर्शक अंतर्गत स्थित.

8. फंक्शन द्रुतपणे डीबग करा

समजा तुम्हाला फंक्शनमध्ये ब्रेकपॉइंट जोडायचा आहे.

हे करण्याचे दोन सर्वात सामान्य मार्ग आहेत:

इन्स्पेक्टरमध्ये इच्छित ओळ शोधा आणि ब्रेकपॉइंट जोडा

तुमच्या स्क्रिप्टमध्ये डीबगर जोडा

या दोन्ही उपायांसाठी योग्य फाइल आणि तुम्हाला डीबग करायची असलेली योग्य ओळ शोधणे आवश्यक आहे.

या उद्देशासाठी कन्सोल वापरणे कदाचित कमी सामान्य आहे. वापरा डीबग(funcName)कन्सोलमध्ये, आणि स्क्रिप्ट इच्छित कार्यापर्यंत पोहोचल्यावर विराम देईल.

ही एक अतिशय वेगवान पद्धत आहे, परंतु ती खाजगी आणि निनावी कार्यांवर कार्य करत नाही. परंतु तुमची परिस्थिती वेगळी असल्यास, फंक्शन डीबग करण्याचा हा कदाचित सर्वात जलद मार्ग आहे. (लेखकाची नोंद: एक कार्य आहे console.debug, जे दुसऱ्यासाठी आवश्यक आहे.)

Var func1 = function() ( func2();); var कार = फंक्शन() ( this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this.funcZ(); ) ) var कार = नवीन कार();

9. स्क्रिप्ट ज्यांना डीबगिंगची आवश्यकता नाही 10. अधिक प्रगत डीबगिंग तंत्रांसह महत्त्वाच्या गोष्टी शोधा

अधिक क्लिष्ट डीबगिंग परिस्थितीसाठी आउटपुटच्या अनेक ओळींची आवश्यकता असू शकते. आउटपुटची रचना करण्याचा एक मार्ग म्हणजे विविध कन्सोल फंक्शन्स वापरणे. उदाहरणार्थ, console.log, console.debug, console.warn, console.info, console.error इ. त्यानंतर तुम्ही त्यांना इन्स्पेक्टरमध्ये फिल्टर करू शकता. परंतु काहीवेळा डीबगिंग करताना आपल्याला हे आवश्यक नसते. आता तुम्ही क्रिएटिव्ह होऊ शकता आणि CSS वापरून तुमचे स्वतःचे कन्सोल आउटपुट स्वरूप तयार करू शकता.

Console.todo = function(msg) ( console.log(' % c % s % s % s', 'रंग: पिवळा; पार्श्वभूमी - रंग: काळा;', '–', संदेश, '–');) कन्सोल .important = function(msg) ( console.log(' % c % s % s % s', 'रंग: तपकिरी; फॉन्ट - वजन: ठळक; मजकूर - सजावट: अधोरेखित;', '–', संदेश, '– '); console.todo("हे असे काहीतरी आहे जे निश्चित करणे आवश्यक आहे"); console.important('हा एक महत्त्वाचा संदेश आहे');

11. फंक्शन कॉल्स आणि फंक्शन आर्ग्युमेंट्सचा मागोवा घ्या.

क्रोम कन्सोलमध्ये, तुम्ही काही फंक्शन्सचे निरीक्षण करू शकता. प्रत्येक वेळी एखादे फंक्शन कॉल केल्यावर, त्यास पास केलेल्या पॅरामीटर्ससह लॉग केले जाईल.

Var func1 = फंक्शन(x, y, z) ( //....);

फंक्शनला कोणत्या आर्ग्युमेंट्ससह कॉल केले जाते हे पाहण्याचा हा एक चांगला मार्ग आहे. परंतु मला असे म्हणायचे आहे की कन्सोलने किती वितर्कांची अपेक्षा करावी हे ठरवता आले तर ते छान होईल. वरील उदाहरणात func1तीन युक्तिवाद अपेक्षित आहे, परंतु फक्त दोनच पास झाले आहेत. जर हे कोडमध्ये हाताळले नाही तर, यामुळे त्रुटी येऊ शकते.

12. कन्सोलमधील घटकांमध्ये द्रुत प्रवेश

कन्सोलमध्ये querySelector वापरण्याचा एक जलद मार्ग म्हणजे $ वापरणे. $('css-selector') प्रथम जुळणारे घटक परत करेल आणि $$('css-selector') सर्व जुळणारे घटक परत करेल. तुम्ही एखादे घटक एकापेक्षा जास्त वेळा वापरल्यास, तुम्ही ते व्हेरिएबलमध्ये सेव्ह करू शकता.

13. पोस्टमन उत्तम आहे (परंतु फायरफॉक्स वेगवान आहे)

अनेक विकसक AJAX विनंत्या तपासण्यासाठी पोस्टमन वापरतात.

कधीकधी या हेतूंसाठी ब्राउझर वापरणे सोपे असते.

जेव्हा तुम्ही पासवर्ड संरक्षित पृष्ठावर काम करत असाल तर लॉगिन कुकीजबद्दल काळजी करू नका. फायरफॉक्समध्ये तुम्ही विनंती कशी संपादित आणि पुन्हा पाठवू शकता ते येथे आहे.

निरीक्षक उघडा आणि नेटवर्क टॅबवर जा. तुम्हाला स्वारस्य असलेल्या विनंतीवर उजवे-क्लिक करा आणि नंतर "संपादित करा" आणि "पुन्हा पाठवा" निवडा. आता तुम्ही काहीही बदलू शकता: शीर्षक दुरुस्त करा, पॅरामीटर्स संपादित करा आणि "पुन्हा पाठवा" क्लिक करा.

खाली मी वेगवेगळ्या पॅरामीटर्ससह अनेक वेळा पाठवलेल्या विनंतीचे उदाहरण दिले आहे:

14. जेव्हा DOM घटक बदलतो तेव्हा ब्रेकपॉइंट

DOM मजेदार असू शकते. काहीवेळा, त्यातील घटक तुम्हाला अज्ञात कारणांमुळे बदलतात. तथापि, जेव्हा तुम्हाला JavaScript डीबग करण्याची आवश्यकता असते, तेव्हा जेव्हा DOM घटक बदलतो तेव्हा Chrome तुम्हाला कोडची अंमलबजावणी थांबवण्याची अनुमती देते. इन्स्पेक्टरमध्ये स्वारस्य असलेल्या घटकावर उजवे-क्लिक करा आणि अंमलबजावणी थांबवण्यासाठी एक अट निवडा.

गेल्या काही वर्षांत, jQuery आणि Prototype सारख्या विविध लायब्ररीच्या उदयामुळे, JavaScript ने वेब प्रकल्पांसाठी स्क्रिप्ट तयार करण्यासाठी भाषांमध्ये अग्रगण्य स्थान प्राप्त केले आहे. वाढती लोकप्रियता आणि वापरात सुलभता यामुळे संपूर्ण ऍप्लिकेशन्सचा उदय झाला आहे, जसे की Gmail, ज्यामध्ये JavaScript च्या हजारो ओळी आहेत, टूल प्रवीणतेच्या बाबतीत विकास कार्यसंघावर वाढीव मागणी आहे.

वाढत्या ऍप्लिकेशन क्लिष्टतेचा परिणाम म्हणजे शक्तिशाली डीबगिंग टूल्सची आवश्यकता आहे जे त्रुटीचे स्त्रोत जलद आणि कार्यक्षमतेने शोधू शकतात. alert() फंक्शन वापरून फक्त व्हेरिएबल व्हॅल्यूज दाखवल्याने त्याची प्रासंगिकता गमावली आहे.

हा धडा आधुनिक विकसक साधनांच्या क्षमतांचे संक्षिप्त विहंगावलोकन प्रदान करतो जे JavaScript कोड डीबग करणे अधिक सुलभ प्रक्रिया बनविण्यात मदत करते. क्रोम ब्राउझरच्या क्षमतांवर आणि फायरफॉक्ससाठी फायरबग ॲड-ऑनवर लक्ष केंद्रित केले जाईल, परंतु वर्णन केलेली बहुतेक वैशिष्ट्ये ऑपेरासाठी ड्रॅगनफ्लाय सारख्या इतर साधनांमध्ये देखील उपलब्ध आहेत.

कन्सोल - सामान्य दृश्य

बहुतेक डेव्हलपर प्रोग्राममध्ये, कन्सोल हा प्रोग्रामरचा सर्वात चांगला मित्र असतो. बहुउद्देशीय पॅनेलचा वापर त्रुटी संदेश लॉग करणे, DOM तपासणी, JavaScript कोड डीबग करणे आणि इतर अनेक कार्यांसाठी केला जातो. ब्राउझरवर अवलंबून, कन्सोलला वेगवेगळ्या कमांडद्वारे कॉल केले जाते (मेनूद्वारे थेट निवड वगळता):

• क्रोम ब्राउझरमध्ये आणि ऑपेरासाठी ड्रॅगनफ्लाय - Ctrl + Shift + I
• फायरबग - F12

स्क्रिप्टच्या अंमलबजावणीदरम्यान आढळलेल्या कोडमधील त्रुटी कन्सोल आपोआप प्रदर्शित करते. फाइल आणि ओळ त्रुटीच्या पुढे सूचीबद्ध आहेत आणि त्रुटीवर क्लिक केल्याने इनपुट फोकस योग्य ठिकाणी हलवले जाते.

आम्ही डेटा कन्सोलवर आउटपुट करतो

कन्सोल केवळ स्क्रिप्ट कोडमधील त्रुटी दर्शवू शकत नाही. कन्सोल API आणि कमांड लाइन API वापरून, तुम्ही कन्सोलवर डेटाचे आउटपुट नियंत्रित करू शकता. सर्वात प्रसिद्ध आणि उपयुक्त कमांड .log() आहे.

फॉर्म कोड विकसित करताना, व्हेरिएबल्सची मूल्ये जाणून घेणे खूप उपयुक्त आहे जेणेकरुन तुम्ही कोड योग्यरित्या कार्य करत असल्याचे सत्यापित करू शकता. व्हिज्युअल तपासणीसाठी alert() फंक्शन वापरणे सामान्य आहे. तथापि, या पद्धतीचा वापर करून डायलॉग बॉक्समधील बटण क्लिक करेपर्यंत उर्वरित कोड कार्यान्वित होण्यापासून अवरोधित करते.

आधुनिक उपाय म्हणजे console.log पद्धत वापरणे, जी कन्सोल पॅनेलवर व्हेरिएबल व्हॅल्यू मुद्रित करते:

Console.log("कॅप्टनचा लॉग"); // कन्सोल पॅनेलमध्ये "कॅप्टन लॉग" प्रदर्शित करते

गणना केलेली मूल्ये आउटपुट करण्यासाठी पद्धत वापरली जाऊ शकते:

फंक्शन calcPhotos() ( total_photos_diff = total_photos - prev_total_photos; // कन्सोल console.log(total_photos_diff) वर व्हेरिएबल व्हॅल्यू मुद्रित करा;)

alert() संवाद पद्धतीवर या दृष्टिकोनाचा फायदा असा आहे की कोड अंमलबजावणीमध्ये व्यत्यय येत नाही आणि रीअल टाइममध्ये डेटा बदलांचे निरीक्षण करण्यासाठी विकसक व्हेरिएबल व्हॅल्यूज अनेक वेळा मुद्रित करू शकतो.

Var t = 3, p = 1; फंक्शन calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // मूल्ये कन्सोल console.log(total_photos_diff) वर आउटपुट करा; // मूल्ये अद्यतनित करा t = p = p*1.1.3; );

संदेश हायलाइट करणे

वरील उदाहरणात, लूप कन्सोलवर अनेक व्हेरिएबल व्हॅल्यू मुद्रित करेल. तथापि, अधिक लक्ष देण्याची आवश्यकता असलेल्या कोडमधील क्षेत्र प्रभावीपणे हायलाइट करण्यासाठी भिन्न डेटा दृश्यमानपणे विभक्त करणे उपयुक्त ठरते. अशा समस्यांचे निराकरण करण्यासाठी, कन्सोल API मध्ये अनेक पद्धती आहेत.

console.info(): एक "माहिती" चिन्ह प्रदर्शित करते आणि सादर केलेल्या माहितीला रंग देते. ही पद्धत विविध घटनांबद्दल चेतावणी देण्यासाठी वापरण्यास सोयीस्कर आहे.

console.warn(): एक "चेतावणी" चिन्ह प्रदर्शित करते आणि सादर केलेल्या माहितीला रंग देते. मर्यादेच्या पलीकडे जाणाऱ्या पॅरामीटर्सबद्दल माहितीसाठी वापरण्यास सोयीस्कर.

console.error() : एक "त्रुटी" चिन्ह प्रदर्शित करते आणि सादर केलेल्या माहितीला रंग देते. त्रुटी आणि गंभीर परिस्थितीचा अहवाल देण्यासाठी उपयुक्त.

टीप: Chrome डेव्हलपर टूलमध्ये कन्सोलमध्ये वेगळ्या पद्धतीने माहिती प्रदर्शित करण्याची क्षमता नाही.

कन्सोलवर माहिती आउटपुट करण्यासाठी विविध पद्धतींचा वापर केल्याने आपल्याला डेटा व्हिज्युअल स्वरूपात सादर करण्याची परवानगी मिळते. ब्लॉक करून माहितीचे सादरीकरण सुधारले जाऊ शकते. console.group() पद्धत वापरली जाते:

// प्रथम गट console.group("फोटो गणना");

console.info("एकूण फरक आता आहे " + total_photos_diff);

console.log(total_photos_diff); console.groupEnd(); // दुसरा ग्रुप console.group("इन्क्रिमेंटिंग व्हेरिएबल");

console.log("एकूण फोटो आता आहेत: " + t);

console.log("मागील एकूण फोटो आता आहेत: " + p); console.groupEnd();

हे उदाहरण कन्सोलमधील माहितीचे गट करेल. व्हिज्युअल प्रेझेंटेशन वेगवेगळ्या ब्राउझरमध्ये बदलू शकते, खालील आकृती ऑपेरासाठी ड्रॅगनफ्लाय मधील दृश्य दर्शवते:

वरील उदाहरणे कन्सोल API मधील उपलब्ध पद्धतींची एक छोटी सूची दर्शवतात. इतर अनेक उपयुक्त पद्धती आहेत, ज्यांचे अधिकृत फायरबग पृष्ठावर वर्णन केले आहे.

स्क्रिप्टच्या अंमलबजावणीमध्ये व्यत्यय आणत आहे

कन्सोलवर माहिती मुद्रित करणे हे एक उपयुक्त वैशिष्ट्य आहे, परंतु कोड खूप लवकर चालू शकतो आणि तरीही अनेक व्हेरिएबल्सचा मागोवा ठेवू शकतो.

डीबगिंग प्रक्रिया सुलभ करण्यासाठी, तुम्ही डेटामध्ये प्रवेश मिळवण्यासाठी एका विशिष्ट टप्प्यावर कोडच्या अंमलबजावणीमध्ये व्यत्यय आणू शकता. यासाठी ब्रेकपॉइंट्स वापरतात.

ब्रेकपॉइंट्ससह कार्य करणे

ब्रेकपॉईंट सेट करण्यासाठी, तुम्हाला "स्क्रिप्ट" टॅबवर जाणे आणि सूचीमधून इच्छित स्क्रिप्ट निवडणे आवश्यक आहे. आता आम्ही स्क्रिप्टच्या अंमलबजावणीमध्ये व्यत्यय आणण्यासाठी आवश्यक असलेली ओळ शोधतो आणि सक्रिय करण्यासाठी लाइन क्रमांकासह फील्डवर क्लिक करा - एक व्हिज्युअल निर्देशक दिसेल. आता आम्ही पृष्ठ रीलोड करतो आणि दिलेल्या बिंदूवर कोड अंमलबजावणीमध्ये व्यत्यय येईल:

कोड डीबग करताना, तुम्हाला काहीवेळा काही अटी पूर्ण झाल्यावरच कोडची अंमलबजावणी थांबवायची असते. उदाहरणार्थ, जर तुमच्या स्क्रिप्टमध्ये लूप असेल ज्याला प्रत्येक पुनरावृत्ती पूर्ण करण्यासाठी 50 मिलीसेकंद लागतात, तर आम्हाला फक्त 300 पुनरावृत्तीची आवश्यकता असताना प्रत्येक पायरीवर थांबल्यानंतर अंमलबजावणी प्रक्रिया सुरू करणे खूप गैरसोयीचे असेल. अशा प्रकरणांसाठी सशर्त व्यत्यय आहेत.

आकृतीमधील उदाहरणामध्ये, total_photos_diff व्हेरिएबलचे मूल्य 200 पेक्षा जास्त होईपर्यंत कोड अंमलबजावणीमध्ये व्यत्यय येणार नाही.

सशर्त व्यत्यय सक्रिय करण्यासाठी, तुम्हाला ब्रेकपॉईंटवर उजवे-क्लिक करावे लागेल आणि व्यत्यय निर्माण करण्यासाठी अटी संपादित करण्यासाठी संवाद प्रदर्शित करण्यासाठी "ब्रेकपॉइंट संपादित करा" निवडा.

कोडमध्ये ब्रेकपॉइंट सेट करणे

ब्राउझरमध्ये डेव्हलपर टूल इंटरफेस वापरून ब्रेकपॉइंट सेट करणे नेहमीच सोयीचे नसते. कधीकधी विशेष कमांड वापरून कोडमधून डीबगर लाँच करणे सोपे होते. काही अटी पूर्ण झाल्यावर तुम्ही कोड कसे रद्द करू शकता हे खालील उदाहरण दाखवते:

जर (total_photos_diff > 300) (डीबगर; // डीबगर लाँच करा आणि कोड अंमलबजावणीमध्ये व्यत्यय आणा)

कोडच्या अंमलबजावणीमध्ये व्यत्यय आणण्याचे इतर मार्ग

ब्रेकपॉइंट वापरण्याव्यतिरिक्त, डेव्हलपर टूल वेगवेगळ्या प्रकरणांमध्ये कोडची अंमलबजावणी थांबवण्यासाठी इतर पर्याय प्रदान करते.

DOM बदलल्यावर थांबत आहे

तुम्हाला DOM बदल हाताळणारा कोडचा तुकडा डीबग करायचा असल्यास, DOM नोड बदलल्यावर डेव्हलपर टूल कोडची अंमलबजावणी करण्यापासून थांबवण्याचा मार्ग प्रदान करते.

HTML कोड पॅनेलमध्ये, जेव्हा तुम्ही इच्छित घटकावर उजवे-क्लिक करता, तेव्हा तुम्ही DOM बदलल्यावर कोड थांबवण्यासाठी (विशेषणे बदलणे, मुले जोडणे/काढणे, घटक हटवणे) अटी निवडू शकता. कोड ओव्हरलोड करा आणि जेव्हा घटक बदलतात, तेव्हा कोडची अंमलबजावणी थांबेल.

जेव्हा सर्व किंवा न हाताळलेले अपवाद येतात तेव्हा थांबवा

जेव्हा अपवाद आढळतात तेव्हा बहुतेक विकसक साधने तुम्हाला स्क्रिप्टची अंमलबजावणी थांबवण्याची परवानगी देतात. Chrome मध्ये, इंटरफेसच्या तळाशी असलेल्या "विराम द्या" चिन्हाचा वापर करून ही कार्यक्षमता सक्षम केली जाऊ शकते.

तुम्ही कोड एक्झिक्यूशन थांबवायचे अपवाद निवडू शकता. खालील उदाहरण एक न हाताळलेला अपवाद आणि एक हाताळलेला (प्रयत्न| पकडलेला ब्लॉक) अपवाद दर्शवते:

Var t = 3, p = 1; फंक्शन calcPhotos(total_photos, prev_total_photos) ( var total_photos_diff = total_photos - prev_total_photos; // प्रथम गट console.info("एकूण फरक आता आहे " + total_photos_diff); // मूल्ये अद्यतनित करा t = t+5; p = t+1 ; // न हाताळलेला अपवाद जर (total_photos_diff > 300) ( फेकणे 0; ) // हाताळलेला अपवाद (total_photos_diff > 200) ( प्रयत्न करा ( $$("#nonexistent-element").hide(); ) catch(e) ( कन्सोल (ई);

कॉल स्टॅकचा परिचय

तुमची स्क्रिप्ट कार्यान्वित करताना त्रुटी आढळल्यास, वर वर्णन केलेल्या पद्धती तुम्हाला त्रुटीचे विश्लेषण करण्यासाठी प्रोग्राम थांबविण्यास मदत करतील. परंतु याचे कारण कोठे आहे हे नेहमीच स्पष्ट होत नाही.

जेव्हा स्क्रिप्टच्या अंमलबजावणीमध्ये व्यत्यय येतो, तेव्हा उजव्या पॅनेलकडे लक्ष द्या, जे कॉल स्टॅकसह उपयुक्त माहिती प्रदान करते.

कॉल स्टॅक संपूर्ण मार्ग दाखवतो ज्यामुळे त्रुटी आली आणि कोडची अंमलबजावणी थांबली.

खालील आकृतीमध्ये, incrementValues() फंक्शनमध्ये एक त्रुटी हेतुपुरस्सर टाकण्यात आली होती, ज्यामुळे कोड कार्यान्वित होणे थांबले. डेव्हलपर टूल संपूर्ण कॉल स्टॅक दाखवते, जे तुम्हाला संभाव्य धोकादायक ठिकाणे ओळखू देते.

निष्कर्ष

तुम्ही सक्रियपणे वापरण्याची योजना करत असलेल्या साधनाच्या दस्तऐवजीकरणाच्या अधिक तपशीलवार अभ्यासासाठी हा धडा एक प्रारंभिक बिंदू आहे.

कल्पना करा की तुम्ही या अविश्वसनीय नवीन वेब ॲप्लिकेशनवर काम करत आहात आणि तुमच्या परीक्षकांनी तुम्हाला खालील बगचे निराकरण करण्यास सांगितले आहे:

ॲप्लिकेशन लोडिंग पूर्ण झाल्यावर "लोड करत आहे..." स्टेटस बार मेसेज अदृश्य होत नाही.

डीफॉल्ट भाषा नॉर्वेजियन आहे, अगदी IE आणि Firefox च्या इंग्रजी आवृत्त्यांमध्ये.

कोडमध्ये कुठेतरी एक ग्लोबल व्हेरिएबल प्रोप तयार केला होता.

काही कारणास्तव, DOM दर्शकातील सर्व घटकांमध्ये "क्लोन" विशेषता असते.

डीबगर चालवत आहे

• फायरफॉक्समध्ये, तुम्ही फायरबग एक्स्टेंशन इन्स्टॉल केल्याची खात्री करा. “टूल्स > फायरबग > फायरबग उघडा” निवडा.
• Opera 9.5+ मध्ये, “Tools > Advanced > Development Tools” निवडा.
• IE बीटामध्ये, “टूल्स > पॅनेल > एक्सप्लोरर बार > IE विकसक टूलबार” वर जा.
• सफारी किंवा वेबकिटमध्ये, प्रथम डीबग मेनू (1) सक्षम करा, नंतर “डेव्हलप > वेब इन्स्पेक्टर दाखवा” निवडा.

डीबगर लाँच करण्याची वेळ आली आहे. काही सूचनांमध्ये कोड बदल आवश्यक असल्याने, तुम्ही चाचणी पृष्ठ जतन करू शकता आणि ते तुमच्या ब्राउझरमधील डिस्कवरून लोड करू शकता चूक #1: "लोड करत आहे..." संदेश तुम्ही डीबग करत असलेला अनुप्रयोग पाहिल्यास, तुम्हाला प्रथम काय दिसेल. आकृती 1 मध्ये दाखवले आहे.


तांदूळ 1: अनुक्रमे ड्रॅगनफ्लाय आणि फायरबग मधील आमच्या JavaScript अनुप्रयोगाचे प्रारंभिक दृश्य.

जेव्हा तुम्ही डीबगरमधील सोर्स कोड पाहता, तेव्हा कोडच्या अगदी सुरुवातीला clearLoadingMessage() फंक्शन लक्षात घ्या. चेकपॉईंटसाठी ही चांगली जागा आहे.

ते कसे स्थापित करावे:

पहिल्या ओळीवर ब्रेकपॉइंट सेट करण्यासाठी ओळ क्रमांकावरील डाव्या समासावर क्लिक करा

पृष्ठ रीलोड करा.

लक्षात घ्या की ब्रेकपॉईंट कोडच्या ओळीवर सेट करणे आवश्यक आहे जे फंक्शन चालवल्यावर अंमलात आणले जाईल. clearLoadingMessage() () असलेली ओळ योग्य नाही कारण तुम्ही येथे ब्रेकपॉईंट सेट केल्यास, त्याऐवजी ब्रेकपॉईंट सेट करणे आवश्यक आहे.

जेव्हा पृष्ठ रीलोड केले जाते, तेव्हा स्क्रिप्ट चालणे थांबेल आणि आकृती दोनमध्ये काय दाखवले आहे ते तुम्हाला दिसेल.

तांदूळ 2: clearLoadingMessage मधील ब्रेकपॉइंटवर डीबगर थांबले.

फंक्शन कोडवर एक नजर टाकू. जसे तुम्ही सहज पाहू शकता, ते दोन DOM घटक अद्यतनित करते आणि 31 ओळ स्टेटसबार शब्दाचा उल्लेख करते. हे getElements("p", ("class":"statusbar")) सारखे दिसते.innerHTML DOM ट्रीमधील स्टेटसबार घटक शोधते. आपण आपल्या गृहीतकाची पटकन चाचणी कशी करू शकतो?

चाचणीसाठी कमांड लाइनमध्ये हे विधान पेस्ट करा. आकृती तीन तीन स्क्रीनशॉट दाखवते (ड्रॅगनफ्लाय, फायरबग आणि IE8) तुम्ही तपासत असलेल्या कमांडद्वारे परत आलेल्या घटकाचे इनरएचटीएमएल किंवा आऊटरएचटीएमएल वाचल्यानंतर.

तपासण्यासाठी, पुढील गोष्टी करा:

कमांड लाइन शोधा:
* फायरबगमध्ये, "कन्सोल" टॅबवर स्विच करा.
* ड्रॅगनफ्लायमध्ये, JavaScript कोड पॅनेलच्या खाली पहा.
* IE8 मध्ये, उजवीकडे "कन्सोल" टॅब शोधा.

कमांड लाइनमध्ये getElements("p", ("class":"statusbar")).innerHTML पेस्ट करा.

एंटर दाबा.

तांदूळ 3: अनुक्रमे ड्रॅगनफ्लाय, फायरबग आणि IE8 मध्ये कमांडचा परिणाम आउटपुट करा.

कमांड लाइन हे एक अतिशय उपयुक्त साधन आहे जे तुम्हाला कोडच्या छोट्या तुकड्यांचे द्रुतपणे परीक्षण करण्यास अनुमती देते. फायरबग कन्सोल इंटिग्रेशन खूप उपयुक्त आहे - जर तुमची कमांड एखादे ऑब्जेक्ट आउटपुट करते, तर तुम्हाला एक अतिशय बुद्धिमान दृश्य मिळेल. उदाहरणार्थ, जर ते DOM ऑब्जेक्ट असेल तर - तुम्हाला मार्कअप केलेला निकाल दिसेल.

तुम्ही अधिक सखोल संशोधन करण्यासाठी कन्सोल वापरू शकता. आपण शिकत असलेली JavaScript लाइन खालील तीन गोष्टी करते:

स्टेटसबार घटकाचा संदर्भ मिळतो.

फर्स्टचाइल्ड शोधतो, दुसऱ्या शब्दांत, या परिच्छेदातील पहिला नोड.

innerText गुणधर्म सेट करते.

कन्सोलमध्ये मागील कमांडपेक्षा काहीतरी अधिक चालवण्याचा प्रयत्न करूया. उदाहरणार्थ, innerText गुणधर्माला नवीन मूल्य नियुक्त करण्यापूर्वी त्याचे वर्तमान मूल्य काय आहे हे जाणून घेण्याचा प्रयत्न करू शकता. हे शोधण्यासाठी, तुम्ही कमांड लाइनमध्ये "=" चिन्हापर्यंत संपूर्ण कमांड टाइप करू शकता: getElements("p" , ("class" :"statusbar" )).firstChild.innerText

आश्चर्य, शेवटी... काहीच नाही. अशाप्रकारे, अभिव्यक्ती getElements("p",("class:"statusbar"")).firstChild DOM मधील काही ऑब्जेक्टकडे निर्देश करते ज्यामध्ये कोणताही मजकूर नसतो किंवा आतील मजकूर गुणधर्म नसतो.

मग पुढील प्रश्न आहे: परिच्छेदाचे पहिले मूल म्हणजे काय? कमांड लाइनवर हा प्रश्न विचारूया. (चौथे चित्र पहा).

तांदूळ 4: StDragonfly डीबगर कमांड लाइन, आउटपुट [मजकूर ऑब्जेक्ट].

ड्रॅगनफ्लायचे डीबगर आउटपुट - [टेक्स्ट ऑब्जेक्ट] हे DOM टेक्स्ट नोड असल्याचे दर्शविते. अशा प्रकारे आम्हाला पहिल्या समस्येचे कारण सापडले. मजकूर नोडमध्ये आतील मजकूर गुणधर्म नसतो, म्हणून p.firstChild.innerText ला मूल्यावर सेट करणे काहीही करत नाही. इनरटेक्स्टला नोडव्हॅल्यूसह बदलून ही त्रुटी सहजपणे निश्चित केली जाऊ शकते, जी मजकूर नोड्ससाठी W3C मानकाने परिभाषित केलेली गुणधर्म आहे.

आता आम्ही पहिली त्रुटी हाताळली आहे:

स्क्रिप्ट पूर्ण करण्यासाठी बटणावर क्लिक करा किंवा चालवा.

लाइन नंबरवर पुन्हा क्लिक करून सेट चेकपॉईंट रीसेट करण्यास विसरू नका.

चूक दोन: भाषा व्याख्या समस्या. स्क्रिप्टच्या सुरुवातीला तुम्हाला lang;/*language*/ व्हेरिएबल लक्षात आले असेल. या व्हेरिएबलचे मूल्य सेट करणाऱ्या कोडमुळे समस्या उद्भवत आहे अशी शंका येऊ शकते. तुम्ही डीबगरमध्ये तयार केलेले सर्च फंक्शन वापरून हा कोड शोधण्याचा प्रयत्न करू शकता. ड्रॅगनफ्लायमध्ये, शोध कोड व्ह्यूअरच्या अगदी वर स्थित आहे, फायरबगमध्ये - वरच्या उजव्या कोपर्यात (आकृती 5 पहा)

स्थानिकीकरण समस्या कोठे उद्भवण्याची शक्यता आहे हे शोधण्यासाठी, पुढील गोष्टी करा:

lang = शोध फील्डमध्ये टाइप करा.

रेषेवर ब्रेकपॉईंट सेट करा जेथे lang व्हेरिएबल मूल्यावर सेट केले आहे.

पृष्ठ रीलोड करा.

WebInspector मध्ये अतिशय सोयीस्कर शोध कार्य देखील आहे. हे तुम्हाला पेज मार्कअप, CSS आणि JavaScript कोडमध्ये एकाच वेळी काहीही शोधण्याची परवानगी देते. परिणाम एका वेगळ्या पॅनेलमध्ये दर्शविले आहेत, जेथे स्क्रीनशॉटमध्ये दर्शविल्याप्रमाणे, इच्छित स्थानावर जाण्यासाठी तुम्ही त्यावर डबल-क्लिक करू शकता.

तांदूळ 5: Dragonfly आणि WebInspector मध्ये शोधा.

हे कार्य काय करते हे तपासण्यासाठी:

getLanguage फंक्शन प्रविष्ट करण्यासाठी "स्टेप इन" बटणावर क्लिक करा.

स्टेप बाय स्टेप कोड अंमलात आणून ते पुन्हा पुन्हा दाबा

व्हेरिएबल व्ह्यूइंग विंडोमध्ये, त्यांची मूल्ये कशी बदलतात ते पहा.

जेव्हा तुम्ही फंक्शन एंटर कराल, तेव्हा तुम्हाला navigator.userAgent चे विश्लेषण करून ब्राउझर यूजर एजंट स्ट्रिंगमधून भाषा वाचण्याचा प्रयत्न दिसेल.
var str1 = navigator.userAgent.match(/\((.*)\)/);
var ar1 = str1.split(/\s*;\s*/), lang;
साठी (var i = 0; i< ar1.length; i++){
जर (ar1[i].match(/^(.(2))$/))(
lang = ar1[i];
}
}

तुम्ही कोडमधून पाऊल टाकताच, तुम्ही लोकल व्हेरिएबल्स व्ह्यूअर वापरू शकता. आकृती 6 दाखवते की ते फायरबग आणि IE8 DT मध्ये कसे दिसते;

तांदूळ 6: फायरबग IE8 मध्ये getLanguage फंक्शनचे स्थानिक व्हेरिएबल्स पाहण्यासाठी उपखंड

ar1[i].match(/^(.(2))$/) ही अभिव्यक्ती फक्त दोन वर्ण असलेली स्ट्रिंग शोधते, जसे की “no”, “en”. तथापि, आपण फायरफॉक्समधील स्क्रीनशॉटमध्ये पाहू शकता की, भाषेबद्दलची माहिती “nn-NO” (2) स्वरूपात सादर केली आहे. IE वापरकर्ता एजंटमध्ये भाषा माहिती अजिबात टाकत नाही.

अशा प्रकारे, आम्हाला दुसरी त्रुटी आढळली: वापरकर्ता एजंट लाइनमध्ये दोन-अक्षरी कोड शोधून भाषा निर्धारित केली गेली होती, परंतु फायरफॉक्समध्ये पाच-अक्षरांची भाषा पदनाम आहे आणि IE कडे ती अजिबात नाही. असा कोड एकतर Accept-Language HTTP हेडर वापरून किंवा navigator.language (IE साठी navigator.userLanguage) वरून पुनर्प्राप्त करून सर्व्हरच्या बाजूने भाषा शोधणेसह पुनर्लेखन आणि पुनर्स्थित करणे आवश्यक आहे. असे कार्य काय असू शकते याचे येथे एक उदाहरण आहे

फंक्शन getLanguage() (
var lang;

जर (navigator.language) (
lang = navigator.language;
) अन्यथा जर (navigator.userLanguage) (
lang = navigator.userLanguage;
}

जर (lang && lang.length > 2) (
lang = lang.substring(0, 2);
}

रिटर्न lang;
}

चूक तीन: रहस्यमय "प्रॉप" व्हेरिएबल
तांदूळ 7: ग्लोबल प्रोप व्हेरिएबल फायरबग आणि ड्रॅगनफ्लाय व्हेरिएबल व्ह्यू पॅनलमध्ये दृश्यमान आहे

आकृती 7 मध्ये तुम्ही "प्रॉप" व्हेरिएबल स्पष्टपणे पाहू शकता. चांगल्या प्रकारे लिहिलेल्या ऍप्लिकेशन्समध्ये, ग्लोबल व्हेरिएबल्सची संख्या कमीत कमी ठेवली पाहिजे, कारण ते समस्या निर्माण करू शकतात जेव्हा, उदाहरणार्थ, ऍप्लिकेशनचे दोन भाग समान व्हेरिएबल वापरू इच्छितात. समजू की उद्या दुसरी टीम आमच्या ऍप्लिकेशनमध्ये नवीन वैशिष्ट्ये जोडेल आणि "प्रॉप" व्हेरिएबल देखील घोषित करेल. आम्ही वेगवेगळ्या गोष्टींसाठी समान नाव वापरून ऍप्लिकेशन कोडच्या दोन वेगवेगळ्या तुकड्यांसह समाप्त करू. या परिस्थितीमुळे अनेकदा संघर्ष आणि चुका होतात. तुम्ही हे व्हेरिएबल शोधण्याचा प्रयत्न करू शकता आणि ते स्थानिक घोषित करू शकता. हे करण्यासाठी, आपण शोध वापरू शकता, जसे आम्ही मागील प्रकरणात केले होते, परंतु एक हुशार मार्ग आहे...

इतर बऱ्याच प्रोग्रामिंग भाषांसाठी डीबगरमध्ये "वॉच" ची संकल्पना असते, जी जेव्हा निर्दिष्ट व्हेरिएबल बदलते तेव्हा डीबगिंग मोडमध्ये प्रवेश करते. यावेळी फायरबग किंवा ड्रॅगनफ्लाय दोन्हीपैकी कोणीही "निरीक्षकांना" समर्थन देत नाही, परंतु आम्ही पहात असलेल्या कोडच्या शीर्षस्थानी खालील ओळ जोडून आम्ही सहजपणे समान वर्तनाचे अनुकरण करू शकतो:

__defineSetter__("prop" , function () ( debugger; ));

पुढील गोष्टी करा:

पहिल्या स्क्रिप्टच्या सुरुवातीला डीबगिंग कोड जोडा.

पृष्ठ रीलोड करा.

स्क्रिप्टच्या अंमलबजावणीमध्ये व्यत्यय कसा येतो ते पहा.

IE8 DT मध्ये "वॉच" टॅब आहे, परंतु व्हेरिएबल बदलल्यावर कोणताही व्यत्यय येत नाही. तर हे उदाहरण फक्त फायरफॉक्स, ऑपेरा आणि सफारीमध्ये काम करते.

जेव्हा तुम्ही पेज रीलोड कराल, तेव्हा "प्रॉप" व्हेरिएबल परिभाषित केले असेल तेथे कोडची अंमलबजावणी त्वरित थांबेल. तुम्ही वरील ओळ ज्या ठिकाणी जोडली त्या ठिकाणी प्रत्यक्ष थांबा येईल. "स्टेप आउट" बटणावर एक क्लिक तुम्हाला व्हेरिएबल सेट केलेल्या ठिकाणी घेऊन जाईल.

साठी (विशेषता मध्ये प्रॉप) (
जर (el.getAttribute(prop) != attributes) includeThisElement = false ;


फॉर लूप लक्षात घेणे सोपे आहे ज्यामध्ये var कीवर्डशिवाय प्रोप व्हेरिएबल घोषित केले आहे, उदा. जागतिक याचे निराकरण करणे कठीण नाही, फक्त var जोडा आणि त्रुटी दुरुस्त करा: "क्लोन" विशेषता, जी तेथे नसावी चौथी त्रुटी उघडपणे डीओएम निरीक्षक वापरून प्रगत परीक्षकाने शोधली, कारण तिचे अस्तित्व दिसत नाही. अनुप्रयोगाच्या वापरकर्ता इंटरफेसमध्ये कोणत्याही प्रकारे. जर आपण DOM इन्स्पेक्टर उघडला (फायरबगमध्ये हा “HTML” टॅब आहे, ड्रॅगनफ्लायमध्ये त्याला “DOM” म्हणतात), तर आपल्याला दिसेल की अनेक घटकांमध्ये क्लोन विशेषता असते, जी तिथे नसावी.

तांदूळ 8: ड्रॅगनफ्लायचा DOM निरीक्षक समस्याप्रधान कोड दाखवतो.

याचा कोणत्याही प्रकारे ऍप्लिकेशनच्या वापरकर्त्यांवर परिणाम होत नसल्यामुळे, हा बग गंभीर मानला जाऊ शकत नाही, परंतु स्क्रिप्ट शेकडो आणि हजारो घटकांवर विशेषता सेट करत असल्याने, ते कार्यक्षमतेवर लक्षणीय परिणाम करू शकते हे विसरू नका.

ही समस्या शोधण्याचा जलद मार्ग म्हणजे HTML घटकावर क्लोन नावाची विशेषता सेट केल्यावर सक्रिय होणारा ब्रेकपॉइंट सेट करणे. डीबगर हे करू शकतात का?

JavaScript ही एक अतिशय लवचिक भाषा आहे, आणि तिची एक ताकद (किंवा कमकुवतता, तुमच्या दृष्टिकोनावर अवलंबून) म्हणजे तुम्ही भाषेची मुख्य फंक्शन्स तुमच्या स्वतःच्या बरोबर बदलू शकता. कोडचा हा भाग पृष्ठावर जोडा, ते सिस्टमच्या setAttribute पद्धतीला ओव्हरराइड करेल, ज्यामुळे "क्लोन" गुणधर्म सेट केल्यावर कोड थांबेल:

var funcSetAttr = Element.prototype.setAttribute; /* सिस्टम पद्धतीचा संदर्भ जतन करा */
Element.prototype.setAttribute = कार्य (नाव, मूल्य) (
जर (नाव == "क्लोन") (
डीबगर; /* स्क्रिप्ट थांबवा*/
}
funcSetAttr.call(हे ,नाव,मूल्य); /* पूर्वी जतन केलेल्या सिस्टम पद्धतीवर कॉल करा जेणेकरून सामान्य गुणधर्म योग्यरित्या सेट केले जातील */
};

तर, आम्ही पुढील गोष्टी करतो:

पृष्ठावरील पहिल्या स्क्रिप्टच्या सुरुवातीला खालील कोड जोडा.

पृष्ठ रीलोड करा.

रीबूट केल्यानंतर, स्क्रिप्ट DOM ट्रीवर प्रक्रिया करण्यास प्रारंभ करते, परंतु "खराब" विशेषता सेट केल्यावर लगेच थांबते. (लक्षात ठेवा की फायरफॉक्सच्या सध्याच्या आवृत्त्यांमध्ये, setAttribute ची अंमलबजावणी वेगवेगळ्या घटकांसाठी वेगळी आहे. वरील कोड नेहमी Opera मध्ये अपेक्षेप्रमाणे कार्य करतो; Firefox मध्ये समान प्रभाव मिळविण्यासाठी, अधिक विशिष्ट गोष्टी ओव्हरराइड करण्यासाठी तुम्ही Element हा शब्द HTMLFormElement ने बदलू शकता. पद्धत HTMLFormElement.prototype.setAttribute).

जेव्हा ब्रेकपॉईंटवर अंमलबजावणी थांबते, तेव्हा तुम्हाला setAttribute() कॉल कोठे आला हे जाणून घ्यायचे असेल, म्हणजे तुम्हाला फंक्शन कॉल चेनमध्ये परत जावे लागेल आणि तेथे काय होत आहे ते पहावे लागेल. यासाठी तुम्ही कॉल स्टॅक वापरू शकता.

तांदूळ 9: ड्रॅगनफ्लाय आणि IE8 मध्ये कॉल स्टॅक.

आकृती 10 फायरबगमधील स्टॅक दाखवते. ओळीत " setAtribute