जावास्क्रिप्ट त्रुटियाँ: फिक्स, प्रक्रिया, मरम्मत

सभी को नमस्कार! पिछले लेख की सफलता से प्रेरित होकर, जिसे " फुलस्टैक जावास्क्रिप्ट डेवलपर " पाठ्यक्रम के लॉन्च से पहले लिखा गया था, हमने शुरुआती और उन सभी लोगों के लिए लेखों की श्रृंखला जारी रखने का फैसला किया, जो अभी जावास्क्रिप्ट में प्रोग्रामिंग करना शुरू कर रहे हैं। आज हम जेएस में होने वाली बग्स के बारे में बात करेंगे, साथ ही साथ उनसे कैसे निपटेंगे।

एक व्यक्ति के लिए एक गलती करें, और वह एक पुल अनुरोध के लिए आपका आभारी होगा। उसे अपने दम पर डेब्यू करना सिखाएं, और वह पूरी परियोजना के लिए आपका आभारी रहेगा।

अज्ञात समय

सामान्य शुरुआत की गलतियाँ

तो, चलो सबसे आदिम गलतियों से शुरू करते हैं। मान लें कि आपने अभी हाल ही में HTML और CSS की मूल बातें सीख ली हैं और अब जावास्क्रिप्ट प्रोग्रामिंग पर सक्रिय रूप से कार्य कर रहे हैं। उदाहरण के लिए: आप चाहते हैं, जब आप एक बटन पर क्लिक करते हैं, उदाहरण के लिए, आप इस क्षण तक छिपा हुआ एक मोडल विंडो खोलते हैं। इसके अलावा, आप चाहते हैं कि यह विंडो क्रॉस पर क्लिक करके बंद हो जाए। एक इंटरेक्टिव उदाहरण यहां उपलब्ध है (मैंने इस तथ्य के कारण बिटबकेट चुना था कि इसका इंटरफ़ेस मुझे सबसे सरल लगता है, और जीथब पर बैठने के लिए यह सब समान नहीं है)।

let modal_alert = document.querySelector(".modal_alert") let hero__btn = document.querySelector(".hero__btn") let modal_close = document.querySelector(".modal-close ") //   DOM   .  ,   bulma     //       - : hero__btn.addEventListener("click", function(){ modal_alert.classList.add("helper_visible"); }) modal_close.addEventListener("click", function(){ modal_alert.classList.remove("helper_visible"); }) //    ,    . ,    css- display:flex.  ,   . 

हमारे index.html में, लेआउट के अलावा, हम अपना टैग हेड टैग के अंदर डालते हैं:

  <script src="code.js"></script> 

index.html head टैग के अंदर लेआउट के अलावा, हम अपनी script सम्मिलित करते हैं:

  <script src="code.js"></script> 

हालांकि, इस तथ्य के बावजूद कि हम सभी जुड़े हुए हैं, कुछ भी काम नहीं करेगा और एक त्रुटि दुर्घटना होगी:



जो बहुत दुख की बात है, शुरुआती अक्सर खो जाते हैं और यह नहीं समझते कि लाल रेखाओं का क्या करना है, जैसे कि यह किसी तरह का फैसला है, और आपके कार्यक्रम में क्या गलत है, इस बारे में संकेत नहीं। addEventListener , ब्राउज़र हमें बताता है कि यह शून्य मान की addEventListener संपत्ति को नहीं पढ़ सकता है। तो, किसी कारण से, हमें DOM मॉडल से हमारा तत्व नहीं मिला। क्या कार्रवाई एल्गोरिथ्म लिया जाना चाहिए?

सबसे पहले, देखें कि आपको किस बिंदु पर javascript कहा जाता है। ब्राउज़र आपके HTML कोड को ऊपर से नीचे तक पढ़ता है, जैसा कि आप पढ़ते हैं, उदाहरण के लिए, एक किताब। जब वह script टैग देखता है, तो वह तुरंत अपनी सामग्री निष्पादित करेगा और निम्नलिखित तत्वों को पढ़ना जारी रखेगा, वास्तव में परवाह नहीं करता है कि आप अपनी स्क्रिप्ट में डोम तत्व प्राप्त करने की कोशिश कर रहे हैं, लेकिन उसने अभी तक उन्हें नहीं पढ़ा है और इसलिए, एक मॉडल नहीं बनाया है।

इस मामले में क्या करना है? बस अपने टैग टैग (या async भीतर defer विशेषता जोड़ें, लेकिन मैं अब उनके काम के विवरण में नहीं जाऊंगा, इसे यहां देखा जा सकता है )। या आप अपने body को बंद करने से पहले अपने script टैग को नीचे ले जा सकते हैं, यह भी काम करेगा।

दूसरे, टाइपो की जाँच करें। BEM कार्यप्रणाली जानें - यह भी उपयोगी है क्योंकि आप जानते हैं कि आपका तत्व कैसे लिखा जाता है - आप उसी तर्क के अनुसार कक्षाएं लिखते हैं, और केवल सही अंग्रेजी भाषा का उपयोग करने का प्रयास करते हैं। या सीधे जेएस फ़ाइल में तत्व का नाम कॉपी करें।

बहुत बढ़िया। अब जब आपने त्रुटियों को ठीक कर लिया है, तो आप निम्नलिखित पते पर कोड के काम करने वाले संस्करण का आनंद ले सकते हैं।

रहस्यमयी गलती

कोड की अंतिम पंक्ति की अजीब गलती से सभी नए लोग भ्रमित होते हैं। यहाँ एक उदाहरण है:



कंसोल में कुछ समझ से बाहर दिखाया गया है। अनुवादित, यह शाब्दिक "इनपुट का अप्रत्याशित अंत" है - और इसके बारे में क्या करना है? इसके अलावा, नवागंतुक की आदत लाइन नंबर पर दिखती है। उस पर सब कुछ सामान्य लगता है। और फिर कंसोल इसे इंगित क्यों करता है?

सब कुछ सरल है। अपने कार्यक्रम की व्याख्या कैसे करें, यह समझने के लिए, जेएस दुभाषिया को यह जानना होगा कि फ़ंक्शन का शरीर कहां समाप्त होता है और लूप का शरीर कहां समाप्त होता है। कोड के इस संस्करण में, मैं जानबूझकर अंतिम ब्रेस भूल गया:

  //           let root = document.getElementById("root"); //    root let article__btn = document.querySelector("article__btn"); //       article__btn.onclick = () => { for (let i = 0; i < headers.length; i++) { root.insertAdjacentHTML("beforeend", ` <div class="content is-medium"> <h1>${headers[i]} </h1> <p>${paragraps[i]}</p> </div>`) //    .     } 

अब, जावास्क्रिप्ट को यह समझ में नहीं आता है कि इसमें फ़ंक्शन बॉडी का अंत कहां है और लूप का अंत कोड की व्याख्या नहीं कर सकता है।

इस मामले में क्या करना है? किसी भी आधुनिक कोड एडिटर में, यदि आप कर्सर को ओपनिंग ब्रैकेट के सामने रखते हैं, तो इसके क्लोजिंग ऑप्शन को हाइलाइट किया जाता है (यदि एडिटर ने अभी तक रेड में इस एरर को अंडरलाइन नहीं किया है)। जेएस में कोई एकल ब्रेसिज़ नहीं हैं, इस बात को ध्यान में रखते हुए कोड की फिर से सावधानीपूर्वक समीक्षा करें। आप यहाँ समस्याग्रस्त संस्करण देख सकते हैं, और सही - यहाँ ।

हम कोड को विभाजित करते हैं

अधिकांश बार यह कोड लिखने के लायक होता है, छोटे टुकड़ों में इसके काम का परीक्षण करता है या, एक सामान्य व्यक्ति के रूप में, टीडीडी सीखें। उदाहरण के लिए, आपको एक सरल प्रोग्राम की आवश्यकता है जो उपयोगकर्ता से इनपुट प्राप्त करता है, इसे एक सरणी में जोड़ता है, और फिर उनके औसत मूल्यों को प्रदर्शित करता है:

  let input_number = prompt("  "); // ,       let numbers = []; function toArray(input_number){ for (let i = 0; i < input_number; i++) { let x = prompt(`  ${i}`); numbers.push(x); //      } } toArray(input_number); function toAverage(numbers){ let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } return sum/numbers.length; } alert(toAverage(numbers)); 

पहली नज़र में, इस कोड में सब कुछ ठीक है। इसके मूल तर्क हैं, जिन्हें दो कार्यों में विभाजित किया गया है, जिनमें से प्रत्येक को फिर से अलग से लागू किया जा सकता है। हालांकि, एक अनुभवी प्रोग्रामर तुरंत कहेगा कि यह काम नहीं करेगा, क्योंकि prompt डेटा एक स्ट्रिंग के रूप में हमारे पास आता है। इसके अलावा, जेएस (जैसे कि यह सहिष्णु और उदासीन प्रकृति है) हमारे लिए सब कुछ शुरू कर देगा, लेकिन आउटपुट पर यह इस तरह के अविश्वसनीय बकवास देगा कि यह समझना आसान नहीं होगा कि हमें इस तरह का जीवन कैसे मिला। तो, चलिए अपने इंटरेक्टिव उदाहरण में कुछ गिनने की कोशिश करते हैं। हमें चर संख्या में 1, और डेटा प्रविष्टि क्षेत्र में 1 2 3 का परिचय दें:



क्या? क्या? ठीक है, यह जावास्क्रिप्ट है। चलो बेहतर है, हम इस तरह के एक अजीब निष्कर्ष से कैसे बच सकते हैं। पायथन में लिखना आवश्यक था, वह हमें एक त्रुटि के बारे में चेतावनी देगा । प्रत्येक संदिग्ध क्षण के बाद, हमें चर के प्रकार के बारे में एक निष्कर्ष निकालना था और हमारे सरणी की स्थिति को देखना था।

कोड का एक प्रकार जिसमें अप्रत्याशित उत्पादन की संभावना कम हो जाती है:

  let input_number = prompt("  "); console.log(typeof(input_number)); let numbers = []; function toArray(input_number){ for (let i = 0; i < input_number; i++) { let x = prompt(`  ${i}`); numbers.push(x); } } toArray(input_number); console.log(numbers); function toAverage(numbers){ let sum = 0; for (let i = 0; i < numbers.length; i++) { sum += numbers[i]; } return sum/numbers.length; } console.log(typeof(toAverage(numbers))); alert(toAverage(numbers)); 

दूसरे शब्दों में, मैंने सभी संदिग्ध स्थानों को रखा जिसमें कंसोल में कुछ गलत हो सकता है ताकि यह सुनिश्चित हो सके कि सब कुछ वैसा ही हो रहा है जैसा मैं उम्मीद करता हूं। बेशक, console.log डेटा बच्चों के खिलौने हैं, और आम तौर पर, निश्चित रूप से, आपको परीक्षण के लिए किसी भी सभ्य पुस्तकालय का अध्ययन करने की आवश्यकता है। उदाहरण के लिए यह एक । इस डिबगिंग प्रोग्राम का परिणाम यहां डेवलपर टूल में देखा जा सकता है । इसे कैसे ठीक किया जाए, मुझे लगता है, कोई सवाल नहीं होगा, लेकिन अगर यह दिलचस्प है, तो यहां (और हां, यह केवल दो प्लसस के साथ किया जा सकता है)।

स्टेप अप: मास्ट्रिंग क्रोम देव टूल्स

कंसोल का उपयोग करना। 2019 में कंसोल पहले से ही थोड़ा पुरातन चीज है (लेकिन हम अभी भी इसे कभी नहीं भूलेंगे, यह पहले से ही अपनी तरह है)। प्रत्येक डेवलपर जो एक पेशेवर का गर्व शीर्षक पहनना चाहता है, उसे आधुनिक विकास के साधनों के समृद्ध साधनों में महारत हासिल करनी चाहिए।

आइए Dev टूल का उपयोग करके हमारे कोड में समस्या क्षेत्रों को ठीक करने का प्रयास करें। यदि आपको उदाहरणों के साथ प्रलेखन की आवश्यकता है, तो आप यहां सब कुछ पढ़ सकते हैं। और हम Dev Tools का उपयोग करके पिछले उदाहरण को पार्स करने का प्रयास करेंगे।

इसलिए, हम एक उदाहरण खोलते हैं। हमें स्पष्ट रूप से कोड में किसी प्रकार की बग छिपी हुई थी, लेकिन आप कैसे जानते हैं कि जावास्क्रिप्ट ने किस बिंदु पर गलत तरीके से पढ़ना शुरू किया? यह सही है, हम इस खुशी को एक चर के प्रकार के लिए परीक्षण के साथ लपेटते हैं, यह बहुत सरल है। हम डेवलपर टूल में स्रोत टैब पर जाते हैं। code.js फ़ाइल खोलें। आपके पास 3 भाग होंगे: पहले बाईं ओर, जो फाइलों की एक सूची प्रदर्शित करता है, और दूसरा - जिसमें हम कोड प्रदर्शित करते हैं। लेकिन अधिकांश जानकारी हम नीचे से तीसरे भाग से प्राप्त कर सकते हैं, जो हमारे कोड की प्रगति को प्रदर्शित करता है। आइए लाइन 15 पर एक breakpoint डालें (इसे करने के लिए, विंडो में लाइन नंबर पर क्लिक करें जहां हमारे पास कोड प्रदर्शित है, जिसके बाद आपको एक नीला लेबल दिखाई देगा)। पृष्ठ को पुनरारंभ करें और हमारे कार्यक्रम में किसी भी मान को दर्ज करें।



अब आप नीचे debug पैनल से बहुत सारी उपयोगी जानकारी खींच सकते हैं। आप पाएंगे कि जेएस वास्तव में चर के प्रकार के बारे में नहीं सोच रहा है, क्योंकि सांख्यिकीय भाषाएं बेहतर रूप से बेहतर हैं और आपको केवल उन्हें पूर्वानुमानित रूप से काम करने के लिए लिखने की आवश्यकता है और तेज कार्यक्रम जो चर को हमारे सरणी में एक स्ट्रिंग के रूप में डालते हैं। अब, जो कुछ हो रहा है उसकी तस्वीर को महसूस करने के बाद, हम काउंटरमेसर ले सकते हैं।

गलतियों को पकड़ना सीखना

कोशिश ... पकड़ निर्माण सभी आधुनिक प्रोग्रामिंग भाषाओं में पाया जाता है। यह वाक्य रचना क्यों आवश्यक है? तथ्य यह है कि जब कोड में कोई त्रुटि होती है, तो वह त्रुटि के स्थान पर अपने निष्पादन को रोक देता है - और दुभाषिया आगे के सभी निर्देशों को निष्पादित नहीं करेगा। वास्तव में काम करने वाले एप्लिकेशन में, कोड की कई सौ लाइनों में से, यह हमें सूट नहीं करेगा। और मान लीजिए कि हम त्रुटि कोड को रोकना चाहते हैं, तो डेवलपर को कोड पास करें, और आगे भी निष्पादन जारी रखें।

जावास्क्रिप्ट में मुख्य प्रकार की त्रुटियों के संक्षिप्त विवरण के बिना हमारा लेख अधूरा होगा:

• त्रुटि त्रुटि ऑब्जेक्ट का सामान्य निर्माता है।
• EvalError एक प्रकार की त्रुटि है जो eval() निष्पादन त्रुटियों के दौरान होती है, लेकिन सिंटैक्स त्रुटियों में नहीं, लेकिन जब इस वैश्विक फ़ंक्शन का गलत तरीके से उपयोग किया जाता है।
• RangeError - तब होता है जब आप अपने कोड के निष्पादन में अनुमेय सीमा से परे जाते हैं।
• ReferenceError - तब होता है जब आप एक वैरिएबल, फंक्शन या ऑब्जेक्ट को कॉल करने की कोशिश करते हैं जो प्रोग्राम में नहीं है।
• SyntaxError - सिंटैक्स त्रुटि।
• TypeError - तब होता है जब किसी अज्ञात चर प्रकार के साथ कोई ऑब्जेक्ट बनाने की कोशिश करते समय या किसी भी नॉन-कॉन्टेंट विधि को कॉल करने का प्रयास करते समय
• URIError एक दुर्लभ कोड है जो तब होता है जब EncodeURL और DecodeURL विधियों का अनुचित उपयोग किया जाता है।

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

चलो सबसे सरल कैलकुलेटर बनाते हैं (यहां तक ​​कि इसे ज़ोर से कैलकुलेटर कहते हैं, मैं कहूंगा: "प्रवेश किए गए भावों का निष्पादक")। उनका संवादात्मक उदाहरण यहां पाया जा सकता है । ठीक है, अब हमारे कोड को देखें:

  let input = document.querySelector("#enter"); let button = document.querySelector("#enter_button"); let result_el = document.querySelector("#result "); button.onclick = () => { try { let result = eval(input.value); //,    ,  catch   result_el.innerHTML = result; } catch (error) { console.error(error.name); result_el.innerHTML = " -   ,  <br>   "; //  ,    ,     //       )) } } 

यदि आप सही गणितीय अभिव्यक्ति दर्ज करने की कोशिश करते हैं, तो सब कुछ ठीक काम करेगा। हालांकि, एक गलत अभिव्यक्ति दर्ज करने का प्रयास करें, उदाहरण के लिए, बस एक स्ट्रिंग, फिर प्रोग्राम उपयोगकर्ता को एक चेतावनी प्रदर्शित करेगा।

मुझे आशा है कि आप इस तरह के एक के रूप में त्रुटि फँसाने के अन्य भागों को समझाते हुए और अधिक लेख पढ़ेंगे, ताकि प्रोग्राम डिबगिंग की आपकी समझ को व्यापक बनाया जा सके, और finally और साथ ही साथ अपनी स्वयं की त्रुटियों के निर्माण के लिए अन्य सिंटैक्टिक निर्माणों का अध्ययन किया जा सके।

वह सब है। मुझे उम्मीद है कि यह लेख उपयोगी था और अब, जब अनुप्रयोगों को डीबग करना होगा, तो आप अधिक आत्मविश्वास महसूस करेंगे। हमने सबसे प्राथमिक से विशिष्ट त्रुटियों का विश्लेषण किया है कि जेएस प्रोग्रामिंग के लिए नवागंतुक केवल कुछ दिनों में त्रुटि करते हैं, और अधिक उन्नत डेवलपर्स द्वारा उपयोग की जाने वाली त्रुटि ट्रैपिंग तकनीक।

और परंपरा के अनुसार, उपयोगी लिंक:

• हम अपना स्वयं का परीक्षण ढांचा लिख ​​रहे हैं। परीक्षण रणनीतियों की एक सामान्य समझ के लिए उपयोगी है।
• प्रायोगिक सुविधाओं सहित त्रुटियों का पूर्ण प्रलेखन
• एमडीएन पर अविश्वसनीय रूप से उपयोगी लेख, जो जेएस पर विकास की शुरुआत में उत्पन्न होने वाली अधिकांश समस्याओं का वर्णन करता है: डीबगिंग, पॉलीफिल, डीबगर और बहुत कुछ
  

वह सब है। हम आपकी टिप्पणियों की प्रतीक्षा करते हैं और आपको एक निःशुल्क वेबिनार में आमंत्रित करते हैं , जहाँ हम SvelteJS ढांचे की विशेषताओं के बारे में बात करते हैं ।