JavaScript डीबग करें

Kayce Basques

Sofia Emelianova

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

गड़बड़ी दोबारा शुरू करना

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

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

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

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

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.log() स्टेटमेंट में, आपको हर उस वैल्यू के बारे में साफ़ तौर पर बताना होगा जिसकी जांच करनी है. ब्रेकपॉइंट की मदद से, DevTools आपको उस समय सभी वैरिएबल की वैल्यू दिखाता है. कभी-कभी आपके कोड पर ऐसे वैरिएबल असर डालते हैं जिनके बारे में आपको पता भी नहीं होता.

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

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

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

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

   

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

   function onClick() {
   

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

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

कोड का इस्तेमाल करना

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

1. DevTools के सोर्स पैनल में, step_into अगले फ़ंक्शन कॉल पर जाएं पर क्लिक करें. इससे, onClick() फ़ंक्शन को एक बार में एक लाइन के लिए लागू किया जा सकता है. 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 Watch एक्सप्रेशन बनाने के बाद वॉच टैब (सबसे नीचे दाईं ओर) दिखाया गया है.

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

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

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

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

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

सुझाव लागू करें

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

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 ब्रेकपॉइंट तब ट्रिगर होते हैं, जब अनुरोध किया गया यूआरएल आपकी दी गई सबस्ट्रिंग से मेल खाता है.

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

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