अरेरे, मी ते पुन्हा केले: JavaScript मधील सामान्य त्रुटी डीबग करणे

JavaScript कोड लिहिणे आव्हानात्मक आणि काहीवेळा सरळ भीतीदायक असू शकते, कारण बरेच विकासक परिचित आहेत. कामाच्या प्रक्रियेत, त्रुटी अपरिहार्यपणे उद्भवतात आणि त्यापैकी काही वारंवार पुनरावृत्ती होतात. हा लेख, नवशिक्या विकसकांच्या उद्देशाने, या त्रुटींबद्दल आणि त्यांचे निराकरण कसे करावे याबद्दल बोलतो. स्पष्टतेसाठी, फंक्शन्स, गुणधर्म आणि ऑब्जेक्ट्सची नावे घेतली जातात प्रसिद्ध गाणे. हे सर्व आपल्याला सामान्य चुका कशा दुरुस्त करायच्या हे द्रुतपणे लक्षात ठेवण्यास मदत करते.

आम्ही आठवण करून देतो: सर्व Habr वाचकांसाठी - Habr प्रोमो कोड वापरून कोणत्याही स्किलबॉक्स कोर्समध्ये नावनोंदणी करताना 10 रूबल सवलत.

स्किलबॉक्स शिफारस करतो: प्रॅक्टिकल कोर्स "मोबाइल डेव्हलपर प्रो".

TypeError: मालमत्ता परिभाषित केलेली नाही

let girl = {
    name: "Lucky",
    location: "Hollywood",
    profession: "star",
    thingsMissingInHerLife: true,
    lovely: true,
    cry: function() {
        return "cry, cry, cries in her lonely heart"
    }
}
console.log(girl.named.lucky)

वरील उदाहरण कोड त्रुटी फेकते Uncaught TypeError: अपरिभाषित 'लकी' गुणधर्म वाचू शकत नाही. समस्या अशी आहे की मुलीच्या ऑब्जेक्टमध्ये नावाची मालमत्ता नसली तरीही तिच्याकडे नावाची मालमत्ता आहे. आणि मुलीच्या नावाच्या मालमत्तेची व्याख्या नसल्यामुळे, तुम्ही त्यात प्रवेश करू शकत नाही, कारण औपचारिकपणे ती अस्तित्वात नाही. परंतु जर तुम्ही girl.named.lucky च्या जागी girl.name ने केले तर सर्वकाही कार्य करेल आणि प्रोग्राम लकी परत करेल.

आपण गुणधर्मांबद्दल अधिक जाणून घेऊ शकता येथे वाचा.

TypeErrors कसे सोडवायचे

जेव्हा प्रोग्रामर विशिष्ट प्रकाराशी जुळत नसलेल्या डेटावर क्रिया करण्याचा प्रयत्न करतो तेव्हा TypeErrors उद्भवतात. उदाहरणांमध्ये .bold() वापरणे, अपरिभाषित गुणधर्म विचारणे किंवा फंक्शन कॉल करणे समाविष्ट आहे जे प्रत्यक्षात फंक्शन नाही.

तर, जर तुम्ही गर्ल() ला कॉल करण्याचा प्रयत्न केलात, तर तुम्हाला Uncaught TypeError अशी त्रुटी येईल: yourVariable.bold हे फंक्शन नाही आणि गर्ल हे फंक्शन नाही, कारण ती प्रत्यक्षात कॉल केलेली ऑब्जेक्ट आहे, फंक्शन नाही.

त्रुटी दूर करण्यासाठी, आपल्याला व्हेरिएबल्सचा अभ्यास करणे आवश्यक आहे. तर, मुलगी म्हणजे काय? मुलीचे नाव काय आहे? तुम्ही कोडचे विश्लेषण करून, console.log, डीबगर कमांड वापरून व्हेरिएबल्स प्रदर्शित करून किंवा कन्सोलमधील व्हेरिएबल नावावर कॉल करून शोधू शकता. व्हेरिएबलमध्ये समाविष्ट असलेल्या डेटा प्रकारावर ऑपरेट करणे शक्य आहे याची आपल्याला खात्री करणे आवश्यक आहे. जर ते बसत नसेल, तर ते बदला, उदाहरणार्थ, एक अट जोडा किंवा प्रयत्न करा..ब्लॉक पकडा - आणि ऑपरेशनच्या अंमलबजावणीवर नियंत्रण मिळवा.

स्टॅक ओव्हरफ्लो

जर तुम्ही बेबी वन मोअर टाईम (हे ब्रिटनी स्पीयर्स, होय) गाण्याचे बोल लेखकांवर विश्वास ठेवत असाल, तर या संदर्भात हिट या शब्दाचा अर्थ गायकाची पुन्हा बोलावण्याची इच्छा आहे (येथे या गाण्याच्या अगदी संदर्भाचे स्पष्टीकरण आहे. गाणे - अनुवादकाची नोंद). असे होऊ शकते की या इच्छेमुळे वास्तविक जीवनात कॉलची संख्या वाढेल. परंतु प्रोग्रामिंगमध्ये, हे एक पुनरावृत्ती आहे ज्यामुळे कॉल स्टॅक ओव्हरफ्लो झाल्यास त्रुटी येऊ शकते.

त्रुटी यासारख्या दिसतात:

एरर: स्टॅक स्पेस संपली (एज)
अंतर्गत त्रुटी: खूप जास्त पुनरावृत्ती (फायरफॉक्स)
रेंजएरर: कॉल स्टॅकचा कमाल आकार ओलांडला (Chrome)

विकासकाने पुनरावृत्तीमध्ये बेस केस विचारात न घेतल्यास किंवा कोड इच्छित केसला संबोधित करत नसल्यास स्टॅक ओव्हरफ्लो होतो.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness++
    return oneMoreTime(stillBelieve, loneliness)
}

या प्रकरणात, stillBelieve कधीही खोटे असू शकत नाही, म्हणून प्रत्येक वेळी OneMoreTime कॉल केला जाईल, परंतु फंक्शन कधीही पूर्ण होणार नाही.

जर तुम्ही दोन मित्रांवर विसंबून राहण्यास सुरुवात केली तर यामुळे एकटेपणा कमी होईल आणि तुम्हाला कॉलची प्रतीक्षा करावी लागणार नाही.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

उदाहरण म्हणजे अनंत लूप असलेली प्रकरणे, जेव्हा सिस्टम एरर मेसेज व्युत्पन्न करत नाही, परंतु ज्या पृष्ठावर JavaScript कोड कार्यान्वित केला जातो ते फक्त फ्रीझ होते. हे घडते जर while लूपमध्ये टर्मिनेशन अट नसेल.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

आपण खालीलप्रमाणे समस्या सोडवू शकता:

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
  worldEnded = true
}

अनंत लूप आणि पुनरावृत्ती डीबग करणे

तुम्हाला अनंत लूप समस्या असल्यास, तुम्हाला Chrome किंवा Edge मधील टॅब बंद करणे आणि Firefox मधील ब्राउझर विंडो बंद करणे आवश्यक आहे. यानंतर, आपल्याला कोडचे काळजीपूर्वक विश्लेषण करणे आवश्यक आहे. तुम्हाला समस्या सापडत नसल्यास, तुमच्या लूप किंवा फंक्शनमध्ये डीबगर कमांड जोडणे आणि व्हेरिएबल्सची व्हॅल्यू तपासणे फायदेशीर आहे. जर परिणाम अपेक्षित होता त्या अनुरूप नसेल, तर आम्ही ते बदलतो, हे सहजपणे केले जाऊ शकते.

वरील उदाहरणामध्ये, फंक्शन किंवा लूपची पहिली ओळ म्हणून डीबगर जोडले जावे. मग तुम्हाला Chrome मध्ये डीबग टॅब उघडण्याची आवश्यकता आहे, स्कोपमधील व्हेरिएबल्सचे विश्लेषण करा. पुढील बटण वापरून तुम्ही प्रत्येक पुनरावृत्तीसह त्यांच्या बदलांचा मागोवा घेऊ शकता. हे सर्व करणे सोपे आहे, आणि बहुतेक प्रकरणांमध्ये समस्या आढळते.

आपण या सर्वांबद्दल येथे अधिक वाचू शकता (Chrome साठी) आणि इथे (फायरफॉक्स साठी).

वाक्यरचनेची चूक

JavaScript मधील सर्वात सामान्य त्रुटींपैकी एक म्हणजे सिंटॅक्स एरर. मजकूर संपादक विस्तार तुम्हाला ते टाळण्यास मदत करतील. उदाहरणार्थ, ब्रॅकेट पेअर कलराइजर कोडमधील कंसांना वेगवेगळ्या रंगांसह चिन्हांकित करते आणि प्रीटियर किंवा तत्सम विश्लेषण साधनामुळे त्वरीत त्रुटी शोधणे शक्य होते. सिंटॅक्स एररची शक्यता कमी करण्याचा सर्वोत्तम पर्याय म्हणजे किमान घरटे बांधणे.

टिप्पण्यांमध्ये सामायिक करा: चुका टाळण्यासाठी किंवा त्वरीत शोधून काढून टाकण्यासाठी तुम्ही काय करता?

स्किलबॉक्स शिफारस करतो:

• दोन वर्षांचा प्रॅक्टिकल कोर्स "मी प्रो वेब डेव्हलपर आहे".
• ऑनलाईन कोर्स "0 वरून C# विकसक".
• एक वर्षाचा प्रॅक्टिकल कोर्स "PHP विकसक 0 ते PRO".

स्त्रोत: www.habr.com