खोज…
ब्रेकप्वाइंट
ब्रेकप्वाइंट आपके प्रोग्राम को एक निश्चित बिंदु तक पहुंचने के बाद रोक देता है। इसके बाद आप प्रोग्राम लाइन के माध्यम से कदम बढ़ा सकते हैं, इसके निष्पादन और अपने चर की सामग्री का निरीक्षण कर सकते हैं।
ब्रेकपॉइंट बनाने के तीन तरीके हैं।
- कोड से,
debugger;का उपयोग करकेdebugger;बयान। - डेवलपर टूल का उपयोग करके ब्राउज़र से।
- एक एकीकृत विकास पर्यावरण (आईडीई) से।
डिबगर कथन
आप debugger; रख सकते हैं debugger; आपके जावास्क्रिप्ट कोड में कहीं भी बयान। एक बार JS दुभाषिया उस रेखा तक पहुँच जाता है, तो यह स्क्रिप्ट निष्पादन को रोक देगा, जिससे आप अपने कोड के माध्यम से चर का निरीक्षण कर सकते हैं।
डेवलपर उपकरण
दूसरा विकल्प ब्राउज़र के डेवलपर टूल से सीधे कोड में एक ब्रेकपॉइंट जोड़ना है।
डेवलपर टूल को खोलना
क्रोम या फ़ायरफ़ॉक्स
- डेवलपर टूल खोलने के लिए F12 दबाएं
- स्रोत टैब (Chrome) या डीबगर टैब (फ़ायरफ़ॉक्स) पर जाएं
- Ctrl + P दबाएं और अपनी जावास्क्रिप्ट फ़ाइल का नाम टाइप करें
- इसे खोलने के लिए Enter दबाएं।
इंटरनेट एक्सप्लोरर या एज
- डेवलपर टूल खोलने के लिए F12 दबाएं
- डीबगर टैब पर स्विच करें।
- फ़ाइल-चयन फलक को खोलने के लिए विंडो के ऊपरी-बाएँ कोने के पास फ़ोल्डर आइकन का उपयोग करें; आप अपनी जावास्क्रिप्ट फ़ाइल वहां पा सकते हैं।
सफारी
- डेवलपर टूल खोलने के लिए कमांड + विकल्प + सी दबाएं
- संसाधन टैब पर जाएँ
- बाईं ओर के पैनल में "लिपियों" फ़ोल्डर खोलें
- अपनी जावास्क्रिप्ट फ़ाइल चुनें।
डेवलपर टूल से एक ब्रेकपॉइंट जोड़ना
एक बार जब आप डेवलपर टूल्स में अपनी जावास्क्रिप्ट फाइल खोल लेते हैं, तो आप ब्रेकपॉइंट लगाने के लिए एक लाइन नंबर पर क्लिक कर सकते हैं। अगली बार जब आपका कार्यक्रम चलेगा, तो यह वहीं विराम देगा।
न्यूनतम स्रोतों के बारे में ध्यान दें: यदि आपका स्रोत छोटा है, तो आप इसे प्रिंट कर सकते हैं (पठनीय प्रारूप में बदल सकते हैं)। क्रोम में, यह स्रोत कोड दर्शक के निचले दाएं कोने में {} बटन पर क्लिक करके किया जाता है।
IDEs
विजुअल स्टूडियो कोड (VSC)
VSC ने जावास्क्रिप्ट को डीबग करने के लिए अंतर्निहित समर्थन किया है।
- बाईं ओर या डिबग बटन पर क्लिक करें Ctrl + Shift + D
- यदि पहले से नहीं किया गया है, तो गियर आइकन दबाकर एक लॉन्च कॉन्फ़िगरेशन फ़ाइल (
launch.json)launch.json। - हरे रंग के प्ले बटन को दबाकर या F5 हिट करके VSC से कोड चलाएँ।
VSC में एक ब्रेकप्वाइंट जोड़ना
ब्रेकपॉइंट जोड़ने के लिए अपने जावास्क्रिप्ट स्रोत फ़ाइल में लाइन नंबर के बगल में क्लिक करें (यह लाल रंग के रूप में चिह्नित किया जाएगा)। ब्रेकपॉइंट को हटाने के लिए, लाल सर्कल पर फिर से क्लिक करें।
युक्ति: आप ब्राउज़र के dev टूल में सशर्त विराम बिंदुओं का उपयोग कर सकते हैं। ये निष्पादन में अनावश्यक विराम को रोकने में मदद करते हैं। उदाहरण परिदृश्य: आप 5 वें पुनरावृत्ति पर एक लूप में एक चर की जांच करना चाहते हैं।
कोड के माध्यम से कदम
एक बार जब आप एक ब्रेकपॉइंट पर निष्पादन रोक देते हैं, तो आप यह देखने के लिए निष्पादन लाइन-दर-लाइन का पालन करना चाहते हैं कि क्या होता है। अपने ब्राउज़र के डेवलपर टूल खोलें और निष्पादन नियंत्रण आइकन देखें। (यह उदाहरण Google Chrome में आइकन का उपयोग करता है, लेकिन वे अन्य ब्राउज़र में समान होंगे।)
फिर से शुरू करें: निष्पादन को अनपॉज़ करें । Shorcut: F8 (क्रोम, फ़ायरफ़ॉक्स)
स्टेप ओवर: कोड की अगली लाइन चलाएं। यदि उस लाइन में फ़ंक्शन कॉल है, तो पूरे फ़ंक्शन को चलाएं और फ़ंक्शन को परिभाषित करने के लिए कूदने के बजाय अगली पंक्ति पर जाएं। शॉर्टकट: F10 (क्रोम, फ़ायरफ़ॉक्स, IE / एज), F6 (सफारी)
चरण में: कोड की अगली पंक्ति चलाएँ। यदि उस पंक्ति में फ़ंक्शन कॉल है, तो फ़ंक्शन में कूदें और वहां रुकें। शॉर्टकट: F11 (क्रोम, फ़ायरफ़ॉक्स, IE / एज), F7 (सफारी)
स्टेप आउट: वर्तमान फ़ंक्शन के बाकी हिस्सों को चलाएं, जहां फ़ंक्शन से कॉल किया गया था, वहां वापस जाएं और अगले बयान पर विराम दें। शॉर्टकट: Shift + F11 (क्रोम, फ़ायरफ़ॉक्स, IE / एज), F8 (सफारी)
कॉल स्टैक के साथ संयोजन के रूप में इनका उपयोग करें, जो आपको बताएगा कि आप वर्तमान में किस फ़ंक्शन के अंदर हैं, किस फ़ंक्शन को उस फ़ंक्शन कहा जाता है, और इसके बाद।
अधिक विवरण और सलाह के लिए "कोड के माध्यम से चरण कैसे करें" पर Google का मार्गदर्शिका देखें।
ब्राउज़र शॉर्टकट कुंजी प्रलेखन के लिए लिंक:
स्वचालित रूप से ठहराव निष्पादन
Google Chrome में, आप ब्रेकपॉइंट लगाने की आवश्यकता के बिना निष्पादन को रोक सकते हैं।
अपवाद पर रोकें: जबकि यह बटन चालू रहता है, यदि आपका प्रोग्राम बिना किसी अपवाद के हिट करता है, तो कार्यक्रम रुक जाएगा जैसे कि यह एक ब्रेकपॉइंट मारा था। बटन निष्पादन नियंत्रणों के पास पाया जा सकता है और त्रुटियों का पता लगाने के लिए उपयोगी है।
जब HTML टैग (DOM नोड) को संशोधित किया जाता है, या जब इसकी विशेषताओं को बदल दिया जाता है, तो आप निष्पादन को रोक सकते हैं। ऐसा करने के लिए, तत्वों टैब पर डोम नोड पर राइट क्लिक करें और "ब्रेक ऑन ..." चुनें।
इंटरएक्टिव दुभाषिया चर
ध्यान दें कि ये केवल कुछ ब्राउज़रों के डेवलपर टूल में काम करते हैं।
$_ आपको जो भी अभिव्यक्ति का मूल्यांकन किया गया था उसका मूल्य देता है।
"foo" // "foo"
$_ // "foo"
$0 इंसपेक्टर में वर्तमान में चयनित DOM तत्व को संदर्भित करता है। इसलिए यदि <div id="foo"> हाइलाइट किया गया है:
$0 // <div id="foo">
$0.getAttribute('id') // "foo"
$1 पहले चयनित तत्व को संदर्भित करता है, उससे पहले चुने गए को $2 , और $3 और $4 लिए आगे।
CSS चयनकर्ता से मेल खाने वाले तत्वों का एक संग्रह प्राप्त करने के लिए, $$(selector) उपयोग करें। यह अनिवार्य रूप से document.querySelectorAll लिए एक शॉर्टकट है।
var images = $$('img'); // Returns an array or a nodelist of all matching elements
| $ _ | $ () ¹ | $$ () | $ 0 | $ 1 | $ 2 | $ 3 | $ 4 | |
|---|---|---|---|---|---|---|---|---|
| ओपेरा | 15+ | 11+ | 11+ | 11+ | 11+ | 15+ | 15+ | 15+ |
| क्रोम | 22+ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| फ़ायरफ़ॉक्स | 39+ | ✓ | ✓ | ✓ | × | × | × | × |
| अर्थात | 1 1 | 1 1 | 1 1 | 1 1 | 1 1 | 1 1 | 1 1 | 1 1 |
| सफारी | 6.1+ | 4+ | 4+ | 4+ | 4+ | 4+ | 4+ | 4+ |
Y उपनाम को या तो document.getElementById .getElementById या document.querySelector
तत्व निरीक्षक
क्लिक कर रहा है 
डेवलपर टूल से उपलब्ध क्रोम में इंस्पेक्टर टैब के ऊपरी बाएं कोने में बटन का निरीक्षण करने के लिए पृष्ठ में एक तत्व का चयन करें, या डेवलपर टूल्स से उपलब्ध है, और फिर पृष्ठ के एक तत्व पर क्लिक करके तत्व को उजागर करता है और इसे $0 असाइन करता है। परिवर्तनशील ।
तत्व निरीक्षक का उपयोग विभिन्न तरीकों से किया जा सकता है, उदाहरण के लिए:
- आप यह जांच सकते हैं कि आपका जेएस डोम से किस तरह से हेरफेर कर रहा है।
- आप अपने सीएसएस को अधिक आसानी से डीबग कर सकते हैं, जब यह देखते हुए कि कौन से नियम तत्व को प्रभावित करते हैं
( स्टाइल्स टैब क्रोम में) - आप पृष्ठ को फिर से लोड किए बिना सीएसएस और HTML के साथ खेल सकते हैं।
इसके अलावा, Chrome को एलिमेंट्स टैब में अंतिम 5 चयन याद हैं। $0 वर्तमान चयन है, जबकि $1 पिछला चयन है। आप $4 तक जा सकते हैं। इस तरह से आप आसानी से कई नोड्स को डिबग कर सकते हैं बिना चयन को लगातार स्विच किए।
आप Google डेवलपर्स पर अधिक पढ़ सकते हैं।
एक संपत्ति को बदलने के लिए बसने और पाने वालों का उपयोग करना
मान लीजिए कि आपके पास एक वस्तु है:
var myObject = {
name: 'Peter'
}
बाद में आपके कोड में, आप myObject.name तक पहुंचने का प्रयास करते हैं और आपको पीटर के बजाय जॉर्ज मिलता है। आप यह सोचने लगते हैं कि इसे किसने बदला और वास्तव में इसे कहां बदला गया। हर सेट पर एक debugger (या कुछ और) रखने का एक तरीका है (हर बार जब कोई myObject.name = 'something' ):
var myObject = {
_name: 'Peter',
set name(name){debugger;this._name=name},
get name(){return this._name}
}
नोट हम नाम दिया है कि name करने के लिए _name और हम एक सेटर और के लिए एक गेटर परिभाषित करने के लिए जा रहे हैं name ।
set name सेटर है। यह एक प्यारी जगह है जहाँ आप debugger , console.trace() , या कुछ और जो आपको डीबगिंग की आवश्यकता है, रख सकते हैं। सेटर _name में नाम के लिए मान सेट करेगा। गेट्टर ( get name भाग) वहां से मूल्य पढ़ेगा। अब हमारे पास डिबगिंग कार्यक्षमता के साथ पूरी तरह कार्यात्मक वस्तु है।
हालांकि, ज्यादातर समय, जो वस्तु बदल जाती है वह हमारे नियंत्रण में नहीं होती है। सौभाग्य से, हम मौजूदा ऑब्जेक्ट्स पर बसेरों और गेटर्स को डिबग करने के लिए परिभाषित कर सकते हैं।
// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;
// Create setter and getter
Object.defineProperty(otherObject, "name", {
set: function(name) {debugger;this._name = name},
get: function() {return this._name}
});
की जाँच करें setters और getters अधिक जानकारी के लिए MDN पर।
बसने वालों / पाने वालों के लिए ब्राउज़र का समर्थन:
| क्रोम | फ़ायरफ़ॉक्स | अर्थात | ओपेरा | सफारी | मोबाइल | |
|---|---|---|---|---|---|---|
| संस्करण | 1 | 2.0 | 9 | 9.5 | 3 | सब |
किसी फंक्शन को बुलाए जाने पर ब्रेक लें
नामित (गैर-अनाम) कार्यों के लिए, आप फ़ंक्शन निष्पादित होने पर टूट सकते हैं।
debug(functionName);
अगली बार जब functionName नामांकित होता है, तो डिबगर अपनी पहली पंक्ति पर रुक जाएगा।
कंसोल का उपयोग करना
कई वातावरणों में, आपके पास वैश्विक console ऑब्जेक्ट तक पहुंच होती है जिसमें मानक आउटपुट डिवाइसों के साथ संचार करने के लिए कुछ बुनियादी तरीके होते हैं। आमतौर पर, यह ब्राउज़र का जावास्क्रिप्ट कंसोल होगा (अधिक जानकारी के लिए क्रोम , फ़ायरफ़ॉक्स , सफारी और एज देखें)।
// At its simplest, you can 'log' a string
console.log("Hello, World!");
// You can also log any number of comma-separated values
console.log("Hello", "World!");
// You can also use string substitution
console.log("%s %s", "Hello", "World!");
// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);
आप अपने आउटपुट को अलग-अलग तरीके से हाइलाइट करने के लिए विभिन्न कंसोल विधियों का उपयोग कर सकते हैं। अन्य तरीके अधिक उन्नत डिबगिंग के लिए भी उपयोगी हैं।
अधिक दस्तावेज़ीकरण के लिए, संगतता पर जानकारी, और अपने ब्राउज़र के कंसोल को खोलने के तरीके के बारे में निर्देश, कंसोल विषय देखें।
नोट: यदि आप IE9 समर्थन करते हैं, या तो हटाने की जरूरत है, तो console.log या इस प्रकार है, अपने कॉल लपेट क्योंकि console जब तक डेवलपर टूल खोल रहे हैं अपरिभाषित है:
if (console) { //IE9 workaround
console.log("test");
}