JavaScript डीबग करें

कायस बैस्क

Twitter GitHub Glitch

सोफ़िया इमेलियानोवा

GitHub

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

पहला चरण: बग को फिर से जनरेट करना

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

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

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

दूसरा चरण: सोर्स पैनल के यूज़र इंटरफ़ेस (यूआई) को समझना

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

1. Command+Option+J (Mac) या Control+Shift+J (Windows, Linux) दबाकर DevTools खोलें. इस शॉर्टकट से कंसोल पैनल खुलता है.

   

2. सोर्स टैब पर क्लिक करें.

   

सोर्स पैनल के यूज़र इंटरफ़ेस (यूआई) के तीन हिस्से होते हैं:

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

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

इस तरह की समस्या को डीबग करने का एक सामान्य तरीका है, कोड में बहुत सारे 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() वाले तरीके की तुलना में, गड़बड़ियों को तेज़ी से ढूंढने और ठीक करने में मदद कर सकते हैं.

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

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

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

   

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

   function onClick() {
   

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

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

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

चौथा चरण: कोड देखना

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

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

   if (inputsAreEmpty()) {
   

2. अगले फ़ंक्शन कॉल पर जाएं पर क्लिक करें. 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 लाइन पर, DevTools अपने एलान के बगल में addend1, addend2, और sum की इनलाइन वैल्यू दिखाता है.

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

छठा चरण: वैरिएबल की वैल्यू की जांच करना

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

पहला तरीका: स्कोप पैनल

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

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

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

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

ऊपर दिया गया स्क्रीनशॉट, typeof sum वॉच एक्सप्रेशन बनाने के बाद, वॉच एक्सप्रेशन पैनल (सबसे नीचे दाईं ओर) दिखाता है. अगर आपकी DevTools विंडो बड़ी है, तो इवेंट लिसनर ब्रेकपॉइंट पैनल के ऊपर, वॉच एक्सप्रेशन पैनल दाईं ओर मौजूद होता है.

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

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

अहम जानकारी: Chrome के वर्शन 105 में, रोके गए फ़ंक्शन में लाइव बदलाव किए जा सकते हैं.

अगले चरण

बधाई! अब आपको पता है कि JavaScript को डीबग करते समय, Chrome DevTools का ज़्यादा से ज़्यादा फ़ायदा कैसे पाया जा सकता है. इस ट्यूटोरियल में आपने जो टूल और तरीके सीखे हैं, उनसे आपके काम के घंटों की बचत की जा सकती है.

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

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

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

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