JavaScript डीबग करें

Kayce Basques

Sofia Emelianova

इस ट्यूटोरियल में, DevTools में JavaScript से जुड़ी किसी भी समस्या को डीबग करने का बुनियादी वर्कफ़्लो बताया गया है. इस ट्यूटोरियल के बारे में पढ़ें या इसका वीडियो वर्शन देखें.

गड़बड़ी को दोबारा दिखाना

डीबग करने का पहला चरण, ऐसी कार्रवाइयों की सीरीज़ ढूंढना है जिनसे लगातार गड़बड़ी होती है.

1. इस डेमो को नए टैब में खोलें.
2. पहला नंबर बॉक्स में 5 डालें.
3. दूसरा नंबर बॉक्स में 1 डालें.
4. पहला और दूसरा नंबर जोड़ें पर क्लिक करें. बटन के नीचे मौजूद लेबल में 5 + 1 = 51 लिखा है. नतीजा 6 होना चाहिए. यह वह गड़बड़ी है जिसे आपको ठीक करना है.

इस उदाहरण में, 5 + 1 का नतीजा 51 है. यह संख्या 6 होनी चाहिए.

सोर्स पैनल के यूज़र इंटरफ़ेस (यूआई) के बारे में जानकारी

DevTools में अलग-अलग टास्क के लिए कई अलग-अलग टूल उपलब्ध होते हैं. जैसे, सीएसएस बदलना, पेज लोड होने की परफ़ॉर्मेंस की प्रोफ़ाइल बनाना, और नेटवर्क अनुरोधों की निगरानी करना. सोर्स पैनल में, JavaScript को डीबग किया जाता है.

1. DevTools खोलें और सोर्स पैनल पर जाएं.

   

सोर्स पैनल में तीन सेक्शन होते हैं:

1. फ़ाइल ट्री वाला पेज टैब. पेज से अनुरोध की गई हर फ़ाइल यहां दी गई है.
2. कोड एडिटर सेक्शन. पेज टैब में कोई फ़ाइल चुनने के बाद, उस फ़ाइल का कॉन्टेंट यहां दिखता है.

3. डीबगर सेक्शन. पेज के JavaScript की जांच करने के लिए अलग-अलग टूल.

   अगर आपकी DevTools विंडो चौड़ी है, तो डिफ़ॉल्ट रूप से, कोड एडिटर की दाईं ओर डीबगर मौजूद होगा. इस मामले में, स्कोप और वॉच टैब, ब्रेकपॉइंट, कॉल स्टैक, और अन्य सेक्शन के साथ, छोटा किया जा सकने वाले सेक्शन के तौर पर जुड़ते हैं.

ब्रेकपॉइंट की मदद से कोड को रोकना

इस तरह की समस्या को डीबग करने का एक सामान्य तरीका यह है कि स्क्रिप्ट के चलने के दौरान वैल्यू की जांच करने के लिए, कोड में कई console.log() स्टेटमेंट डालें. उदाहरण के लिए:

function updateLabel() {
  var addend1 = getNumber1();
  console.log('addend1:', addend1);
  var addend2 = getNumber2();
  console.log('addend2:', addend2);
  var sum = addend1 + addend2;
  console.log('sum:', sum);
  label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

console.log() वाले तरीके से काम हो सकता है, लेकिन ब्रेकपॉइंट से यह काम तेज़ी से हो सकता है. ब्रेकपॉइंट की मदद से, कोड को उसके चलने के दौरान रोका जा सकता है और उस समय सभी वैल्यू की जांच की जा सकती है. console.log() तरीके की तुलना में, ब्रेकपॉइंट के कुछ फ़ायदे हैं:

• console.log() का इस्तेमाल करने के लिए, आपको सोर्स कोड को मैन्युअल तरीके से खोलना होगा. इसके बाद, उसमें काम का कोड ढूंढकर, console.log() स्टेटमेंट डालने होंगे. इसके बाद, Console में मैसेज देखने के लिए, पेज को फिर से लोड करें. ब्रेकपॉइंट की मदद से, काम के कोड पर रोक लगाई जा सकती है. इसके लिए, यह जानना ज़रूरी नहीं है कि कोड का स्ट्रक्चर कैसा है.
• अपने console.log() स्टेटमेंट में, आपको हर उस वैल्यू के बारे में साफ़ तौर पर बताना होगा जिसकी आपको जांच करनी है. ब्रेकपॉइंट की मदद से, DevTools आपको उस समय सभी वैरिएबल की वैल्यू दिखाता है. कभी-कभी ऐसे वैरिएबल आपके कोड पर असर डालते हैं जिनके बारे में आपको पता भी नहीं होता.

कम शब्दों में, ब्रेकपॉइंट की मदद से, console.log() तरीके से ज़्यादा तेज़ी से गड़बड़ियों का पता लगाया जा सकता है और उन्हें ठीक किया जा सकता है.

अगर आप थोड़ी देर के लिए रुककर, इस बारे में सोचें कि ऐप्लिकेशन कैसे काम करता है, तो यह अनुमान लगाया जा सकता है कि गलत जोड़ (5 + 1 = 51) का हिसाब, पहला नंबर और दूसरा नंबर जोड़ें बटन से जुड़े click इवेंट लिसनर में लगाया जाता है. इसलिए, हो सकता है कि आप click listener के चालू होने के समय कोड को रोकना चाहें. इवेंट लिसनर ब्रेकपॉइंट की मदद से, ऐसा किया जा सकता है:

1. डीबगर सेक्शन में, सेक्शन को बड़ा करने के लिए इवेंट लिसनर ब्रेकपॉइंट पर क्लिक करें. DevTools ऐनिमेशन और क्लिपबोर्ड जैसी बड़ी की जा सकने वाली इवेंट कैटगरी की सूची दिखाता है.
2. माउस इवेंट कैटगरी के बगल में, arrow_right बड़ा करें पर क्लिक करें. DevTools, माउस इवेंट की सूची दिखाता है. जैसे, click और mousedown. हर इवेंट के बगल में एक चेकबॉक्स होता है.

3. क्लिक चेकबॉक्स को चुनें. DevTools को अब इस तरह से सेट अप किया गया है कि कोई भी click इवेंट लिसनर ट्रिगर होने पर, यह अपने-आप रुक जाए.

   

4. डेमो पर वापस जाकर, पहला और दूसरा नंबर जोड़ें पर फिर से क्लिक करें. DevTools, डेमो को रोक देता है और सोर्स पैनल में कोड की एक लाइन को हाइलाइट करता है. DevTools को इस कोड की इस लाइन पर रोक दिया जाना चाहिए:

   function onClick() {
   

   अगर आपने कोड की किसी दूसरी लाइन पर रोक लगाई है, तो फिर से शुरू करें स्क्रिप्ट को फिर से चलाएं को तब तक दबाकर रखें, जब तक कि आप सही लाइन पर न पहुंच जाएं.

इवेंट लिसनर ब्रेकपॉइंट, DevTools में उपलब्ध कई तरह के ब्रेकपॉइंट में से एक है. अलग-अलग तरह के डेटा को एक्सप्लोर करना ज़रूरी है, क्योंकि हर तरह के डेटा से आपको अलग-अलग स्थितियों को जल्द से जल्द डीबग करने में मदद मिलती है. हर तरह के ब्रेकपॉइंट का इस्तेमाल कब और कैसे करना है, यह जानने के लिए ब्रेकपॉइंट की मदद से अपना कोड रोकना लेख पढ़ें.

कोड को सिलसिलेवार तरीके से देखना

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

1. DevTools के सोर्स पैनल में, onClick() फ़ंक्शन के एक बार में एक लाइन को पूरा करने के लिए, step_into अगले फ़ंक्शन कॉल में जाएं पर क्लिक करें. DevTools, कोड की इस लाइन को हाइलाइट करता है:

   if (inputsAreEmpty()) {
   

2. step_over अगले फ़ंक्शन कॉल पर जाएं पर क्लिक करें.

   DevTools, inputsAreEmpty() को बिना बताए उसे एक्ज़ीक्यूट करता है. ध्यान दें कि DevTools, कोड की कुछ लाइनों को कैसे स्किप करता है. इसकी वजह यह है कि inputsAreEmpty() की वैल्यू गलत है. इसलिए, if स्टेटमेंट का कोड ब्लॉक लागू नहीं हुआ.

यही कोड इस्तेमाल करने का बुनियादी आइडिया है. अगर get-started.js में कोड को देखा जाता है, तो आपको पता चल सकता है कि यह गड़बड़ी, शायद updateLabel() फ़ंक्शन में कहीं भी मौजूद है. कोड की हर लाइन को सिलसिलेवार तरीके से देखने के बजाय, गड़बड़ी की संभावित जगह के आस-पास कोड को रोकने के लिए, किसी दूसरे तरह के ब्रेकपॉइंट का इस्तेमाल किया जा सकता है.

कोड की लाइन के लिए ब्रेकपॉइंट सेट करें

कोड की लाइन में ब्रेकपॉइंट लगाना, ब्रेकपॉइंट का सबसे सामान्य टाइप है. अगर आपको कोड की किसी खास लाइन पर रोक लगानी है, तो कोड की लाइन के ब्रेकपॉइंट का इस्तेमाल करें:

1. updateLabel() में कोड की आखिरी लाइन देखें:

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
   

2. कोड की बाईं ओर, कोड की इस लाइन का लाइन नंबर दिखता है, जो कि 32 है. 32 पर क्लिक करें. DevTools 32 के ऊपर नीला आइकॉन डालता है. इसका मतलब है कि इस लाइन पर कोड का लाइन-ऑफ़-ब्रेकपॉइंट मौजूद है. DevTools अब हमेशा कोड की इस लाइन के लागू होने से पहले रुक जाता है.

3. फिर से शुरू करें स्क्रिप्ट एक्ज़ीक्यूशन फिर से शुरू करें पर क्लिक करें. स्क्रिप्ट तब तक चलती रहेगी, जब तक वह लाइन 32 तक नहीं पहुंच जाती. DevTools, 29, 30, और 31वीं लाइन में, addend1, addend2, और sum की वैल्यू को उनके एलान के बगल में इनलाइन दिखाता है.

इस उदाहरण में, DevTools लाइन 32 पर, कोड-ऑफ़-कोड ब्रेकपॉइंट पर रुक जाता है.

वैरिएबल की वैल्यू देखना

addend1, addend2, और sum की वैल्यू संदिग्ध लग रही है. इन्हें कोटेशन में रखा जाता है, जिसका मतलब है कि ये स्ट्रिंग हैं. यह गड़बड़ी की वजह को समझाने के लिए एक अच्छा अनुमान है. अब ज़्यादा जानकारी इकट्ठा करने का समय आ गया है. DevTools में, वैरिएबल की वैल्यू की जांच करने के लिए कई टूल उपलब्ध होते हैं.

पहला तरीका: दायरे की जांच करना

जब कोड की किसी लाइन पर रोक लगाई जाती है, तो स्कोप टैब में आपको दिखता है कि कोड के इस हिस्से में कौनसे लोकल और ग्लोबल वैरिएबल तय किए गए हैं. साथ ही, हर वैरिएबल की वैल्यू भी दिखती है. अगर लागू हो, तो इसमें क्लोज़र वैरिएबल भी दिखते हैं. जब आपको कोड की लाइन पर नहीं रोका जाता, तो स्कोप टैब खाली रहता है.

वैरिएबल की वैल्यू में बदलाव करने के लिए, उस पर दो बार क्लिक करें.

दूसरा तरीका: स्मार्टवॉच के एक्सप्रेशन

वॉच टैब की मदद से, समय के साथ वैरिएबल की वैल्यू को मॉनिटर किया जा सकता है. वॉच सिर्फ़ वैरिएबल तक ही सीमित नहीं है. देखें टैब में, किसी भी मान्य JavaScript एक्सप्रेशन को सेव किया जा सकता है.

इसे अभी आज़माएं:

1. देखें टैब पर क्लिक करें.
2. जोड़ें वॉच एक्सप्रेशन जोड़ें पर क्लिक करें.
3. typeof sum टाइप करें.
4. Enter दबाएँ. DevTools typeof sum: "string" दिखाता है. कोलन के दाईं ओर मौजूद वैल्यू, आपके एक्सप्रेशन का नतीजा होती है.

इस स्क्रीनशॉट में, typeof sum स्मार्टवॉच के लिए एक्सप्रेशन बनाने के बाद, स्मार्टवॉच टैब (सबसे नीचे दाईं ओर) दिखाया गया है.

संदिग्ध के तौर पर, sum का आकलन एक स्ट्रिंग के रूप में किया जा रहा है, जब यह एक संख्या होनी चाहिए. अब आपने पुष्टि कर ली है कि गड़बड़ी की वजह यही है.

तीसरा तरीका: कंसोल

console.log() मैसेज देखने के अलावा, Console का इस्तेमाल करके, मनमुताबिक JavaScript स्टेटमेंट का आकलन भी किया जा सकता है. गड़बड़ियों को ठीक करने के लिए, Console का इस्तेमाल करके गड़बड़ियों को ठीक करने के संभावित तरीकों की जांच की जा सकती है. इसे अभी आज़माएं:

1. अगर आपने Console का ड्रॉवर नहीं खोला है, तो उसे खोलने के लिए Escape दबाएं. यह आपकी DevTools विंडो के सबसे नीचे खुलता है.
2. Console में, parseInt(addend1) + parseInt(addend2) टाइप करें. यह स्टेटमेंट काम करता है, क्योंकि आप कोड की उस लाइन पर रोके गए हैं जहां addend1 और addend2 स्कोप में हैं.
3. Enter दबाएँ. DevTools, स्टेटमेंट का आकलन करता है और 6 को प्रिंट करता है. यह वही नतीजा है जो आपको उम्मीद है कि डेमो दिखाएगा.

इस स्क्रीनशॉट में, parseInt(addend1) + parseInt(addend2) का आकलन करने के बाद कंसोल ड्रॉअर दिखाया गया है.

समस्या ठीक करना

आपको गड़बड़ी को ठीक करने का तरीका पता हो. अब आपको कोड में बदलाव करके, डिमो को फिर से चलाकर देखना होगा कि समस्या ठीक हुई है या नहीं. समस्या को ठीक करने के लिए, आपको DevTools से बाहर निकलने की ज़रूरत नहीं है. JavaScript कोड में बदलाव करने के लिए, सीधे तौर पर DevTools के यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल किया जा सकता है. इसे अभी आज़माएं:

1. फिर से शुरू करें स्क्रिप्ट एक्ज़ीक्यूशन फिर से शुरू करें पर क्लिक करें.
2. कोड एडिटर में, लाइन 31, var sum = addend1 + addend2 को var sum = parseInt(addend1) + parseInt(addend2) से बदलें.
3. अपने बदलाव सेव करने के लिए Command + S (Mac) या Control + S (Windows, Linux) दबाएं.
4. label_off ब्रेकपॉइंट बंद करें पर क्लिक करें. इसका रंग नीला हो जाता है, ताकि यह पता चल सके कि यह चालू है. हालांकि, यह सेट है, लेकिन DevTools आपके सेट किए गए किसी भी ब्रेकपॉइंट को अनदेखा कर देता है.
5. अलग-अलग वैल्यू के साथ डेमो आज़माएं. डेमो अब सही तरीके से कैलकुलेट करता है.

अगले चरण

इस ट्यूटोरियल में, ब्रेकपॉइंट सेट करने के सिर्फ़ दो तरीके बताए गए हैं. DevTools में, इनके अलावा और भी कई तरीके उपलब्ध हैं:

• शर्त के हिसाब से ब्रेकपॉइंट, जो सिर्फ़ तब ट्रिगर होते हैं, जब आपने जो शर्त दी है वह सही हो.
• मिलने वाले या न मिलने वाले अपवादों पर ब्रेकपॉइंट.
• XHR ब्रेकपॉइंट, जो अनुरोध किए गए यूआरएल के आपके दिए गए सबस्ट्रिंग से मैच होने पर ट्रिगर होते हैं.

हर तरह के ब्रेकपॉइंट का इस्तेमाल कब और कैसे करना है, यह जानने के लिए ब्रेकपॉइंट की मदद से कोड को रोकना लेख पढ़ें.

कोड स्टेपिंग के कुछ कंट्रोल दिए गए हैं. इनके बारे में इस ट्यूटोरियल में नहीं बताया गया है. ज़्यादा जानने के लिए, कोड की लाइन को स्किप करना लेख पढ़ें.