JavaScript डीबग करें

Kayce Basques

Sofia Emelianova

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

गड़बड़ी का दोबारा पता लगाएं

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

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

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

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

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

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

   

4. डेमो पर वापस आने के बाद, नंबर 1 और नंबर 2 जोड़ें पर फिर से क्लिक करें. DevTools डेमो को रोक देता है और Sources पैनल में कोड की लाइन को हाइलाइट करता है. 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() मैसेज देखने के अलावा, कंसोल का इस्तेमाल करके आर्बिट्रेरी वैल्यू को भी मेज़र किया जा सकता है JavaScript स्टेटमेंट. डीबग करने के बारे में, कंसोल का इस्तेमाल करके संभावित सुधारों की जांच की जा सकती है ट्रैक करने में मदद मिलती है. इसे अभी आज़माएं:

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

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

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