ക്ഷമിക്കണം, ഞാൻ അത് വീണ്ടും ചെയ്തു: JavaScript-ലെ സാധാരണ പിശകുകൾ ഡീബഗ്ഗിംഗ്

ജാവാസ്ക്രിപ്റ്റ് കോഡ് എഴുതുന്നത് വെല്ലുവിളി നിറഞ്ഞതും ചിലപ്പോൾ ഭയപ്പെടുത്തുന്നതുമാണ്, കാരണം പല ഡെവലപ്പർമാർക്കും പരിചിതമാണ്. ജോലിയുടെ പ്രക്രിയയിൽ, പിശകുകൾ അനിവാര്യമായും ഉയർന്നുവരുന്നു, അവയിൽ ചിലത് പതിവായി ആവർത്തിക്കുന്നു. തുടക്കക്കാരായ ഡവലപ്പർമാരെ ലക്ഷ്യമിട്ടുള്ള ഈ ലേഖനം, ഈ പിശകുകളെക്കുറിച്ചും അവ എങ്ങനെ പരിഹരിക്കാമെന്നതിനെക്കുറിച്ചും സംസാരിക്കുന്നു. വ്യക്തതയ്ക്കായി, ഫംഗ്‌ഷനുകൾ, പ്രോപ്പർട്ടികൾ, ഒബ്‌ജക്റ്റുകൾ എന്നിവയുടെ പേരുകൾ എടുത്തതാണ് പ്രശസ്ത ഗാനം. സാധാരണ തെറ്റുകൾ എങ്ങനെ ശരിയാക്കാമെന്ന് വേഗത്തിൽ ഓർക്കാൻ ഇതെല്ലാം നിങ്ങളെ സഹായിക്കുന്നു.

ഞങ്ങൾ ഓർമ്മിപ്പിക്കുന്നു: "Habr"-ന്റെ എല്ലാ വായനക്കാർക്കും - "Habr" പ്രൊമോഷണൽ കോഡ് ഉപയോഗിച്ച് ഏതെങ്കിലും സ്കിൽബോക്സ് കോഴ്സിൽ ചേരുമ്പോൾ 10 റൂബിൾസ് കിഴിവ്.

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു: പ്രായോഗിക കോഴ്സ് "മൊബൈൽ ഡെവലപ്പർ PRO".

ടൈപ്പ് പിശക്: പ്രോപ്പർട്ടി നിർവചിച്ചിട്ടില്ല

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)

മുകളിലെ ഉദാഹരണ കോഡ് പിശക് എറിയുന്നു, പിടിക്കപ്പെടാത്ത ടൈപ്പ് പിശക്: നിർവചിക്കാത്തതിന്റെ പ്രോപ്പർട്ടി 'ലക്കി' വായിക്കാൻ കഴിയില്ല. പെൺകുട്ടിയുടെ വസ്തുവിന് പേരുള്ള സ്വത്തുണ്ടെങ്കിലും പേരുള്ള വസ്തുവില്ല എന്നതാണ് പ്രശ്നം. പെൺകുട്ടിയുടെ പേരുള്ള സ്വത്ത് നിർവചിച്ചിട്ടില്ലാത്തതിനാൽ, നിങ്ങൾക്ക് അത് ആക്സസ് ചെയ്യാൻ കഴിയില്ല, കാരണം അത് ഔപചാരികമായി നിലവിലില്ല. എന്നാൽ നിങ്ങൾ girl.named.lucky എന്നത് girl.name എന്നാക്കി മാറ്റുകയാണെങ്കിൽ, എല്ലാം പ്രവർത്തിക്കുകയും പ്രോഗ്രാം ലക്കി തിരികെ നൽകുകയും ചെയ്യും.

നിങ്ങൾക്ക് ഗുണങ്ങളെക്കുറിച്ച് കൂടുതലറിയാൻ കഴിയും ഇവിടെ വായിക്കുക.

ടൈപ്പ് പിശകുകൾ എങ്ങനെ പരിഹരിക്കാം

ഒരു നിർദ്ദിഷ്ട തരവുമായി പൊരുത്തപ്പെടാത്ത ഡാറ്റയിൽ ഒരു പ്രോഗ്രാമർ പ്രവർത്തനങ്ങൾ നടത്താൻ ശ്രമിക്കുമ്പോൾ ടൈപ്പ് പിശകുകൾ സംഭവിക്കുന്നു. ഉദാഹരണങ്ങളിൽ .bold(), നിർവചിക്കാത്ത പ്രോപ്പർട്ടി ആവശ്യപ്പെടുക, അല്ലെങ്കിൽ യഥാർത്ഥത്തിൽ ഒരു ഫംഗ്‌ഷൻ അല്ലാത്ത ഒരു ഫംഗ്‌ഷൻ വിളിക്കുക എന്നിവ ഉൾപ്പെടുന്നു.

അതിനാൽ, നിങ്ങൾ പെൺകുട്ടി() എന്ന് വിളിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് പിശക് ലഭിക്കും Uncaught TypeError: yourVariable.bold ഒരു ഫംഗ്‌ഷനല്ല, പെൺകുട്ടി ഒരു ഫംഗ്‌ഷനല്ല, കാരണം ഇത് യഥാർത്ഥത്തിൽ വിളിക്കപ്പെടുന്ന ഒരു വസ്തുവാണ്, ഒരു ഫംഗ്‌ഷൻ അല്ല.

പിശകുകൾ ഇല്ലാതാക്കാൻ, നിങ്ങൾ വേരിയബിളുകൾ പഠിക്കേണ്ടതുണ്ട്. അപ്പോൾ, ഒരു പെൺകുട്ടി എന്താണ്? എന്താണ് പെൺകുട്ടിയുടെ പേര്? കോഡ് വിശകലനം ചെയ്‌ത്, console.log, ഡീബഗ്ഗർ കമാൻഡ് ഉപയോഗിച്ച് വേരിയബിളുകൾ പ്രദർശിപ്പിക്കുക അല്ലെങ്കിൽ കൺസോളിലെ വേരിയബിൾ നെയിം വിളിച്ച് നിങ്ങൾക്ക് കണ്ടെത്താനാകും. വേരിയബിളിൽ അടങ്ങിയിരിക്കുന്ന ഡാറ്റ തരത്തിൽ പ്രവർത്തിക്കുന്നത് സാധ്യമാണെന്ന് നിങ്ങൾ ഉറപ്പാക്കേണ്ടതുണ്ട്. ഇത് അനുയോജ്യമല്ലെങ്കിൽ, അത് മാറ്റുക, ഉദാഹരണത്തിന്, ഒരു വ്യവസ്ഥ ചേർക്കുക അല്ലെങ്കിൽ ശ്രമിക്കുക..ബ്ലോക്ക് പിടിക്കുക - പ്രവർത്തനത്തിന്റെ നിർവ്വഹണത്തിൽ നിയന്ത്രണം നേടുക.

സ്റ്റാക്ക് ഓവർഫ്ലോ

ബേബി വൺ മോർ ടൈം (ഇത് ബ്രിട്‌നി സ്പിയേഴ്സ്, അതെ) എന്ന ഗാനത്തിന്റെ വരികളുടെ രചയിതാക്കളെ നിങ്ങൾ വിശ്വസിക്കുന്നുവെങ്കിൽ, ഈ സന്ദർഭത്തിലെ ഹിറ്റ് എന്ന വാക്കിന്റെ അർത്ഥം ഗായകന്റെ വീണ്ടും വിളിക്കാനുള്ള ആഗ്രഹമാണ് (ഇവിടെ അതിന്റെ സന്ദർഭത്തിന്റെ ഒരു വിശദീകരണം ഉണ്ട്. ഗാനം - വിവർത്തകന്റെ കുറിപ്പ്). ഈ ആഗ്രഹം യഥാർത്ഥ ജീവിതത്തിൽ കോളുകളുടെ എണ്ണം വർദ്ധിക്കുന്നതിലേക്ക് നയിച്ചേക്കാം. എന്നാൽ പ്രോഗ്രാമിംഗിൽ, കോൾ സ്റ്റാക്ക് ഓവർഫ്ലോ ആണെങ്കിൽ ഒരു പിശക് ഉണ്ടാക്കുന്ന ഒരു ആവർത്തനമാണിത്.

പിശകുകൾ ഇതുപോലെ കാണപ്പെടുന്നു:

പിശക്: സ്‌റ്റാക്ക് സ്‌പെയ്‌സ് തീർന്നു (എഡ്ജ്)
ആന്തരിക പിശക്: വളരെയധികം ആവർത്തനം (ഫയർഫോക്സ്)
RangeError: പരമാവധി കോൾ സ്റ്റാക്ക് വലുപ്പം കവിഞ്ഞു (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-ലോ എഡ്ജിലോ ടാബ് അടയ്ക്കുകയും Firefox-ൽ ബ്രൗസർ വിൻഡോ അടയ്ക്കുകയും വേണം. ഇതിനുശേഷം, നിങ്ങൾ കോഡ് ശ്രദ്ധാപൂർവ്വം വിശകലനം ചെയ്യേണ്ടതുണ്ട്. നിങ്ങൾക്ക് പ്രശ്നം കണ്ടെത്താൻ കഴിയുന്നില്ലെങ്കിൽ, നിങ്ങളുടെ ലൂപ്പിലേക്കോ പ്രവർത്തനത്തിലേക്കോ ഒരു ഡീബഗ്ഗർ കമാൻഡ് ചേർത്ത് വേരിയബിളുകളുടെ മൂല്യങ്ങൾ പരിശോധിക്കുന്നത് മൂല്യവത്താണ്. ഫലം പ്രതീക്ഷിച്ചതിനോട് പൊരുത്തപ്പെടുന്നില്ലെങ്കിൽ, ഞങ്ങൾ അത് മാറ്റിസ്ഥാപിക്കുന്നു, ഇത് എളുപ്പത്തിൽ ചെയ്യാൻ കഴിയും.

മുകളിലെ ഉദാഹരണത്തിൽ, ഫംഗ്‌ഷന്റെ അല്ലെങ്കിൽ ലൂപ്പിന്റെ ആദ്യ വരിയായി ഡീബഗ്ഗർ ചേർക്കണം. അതിനുശേഷം നിങ്ങൾ Chrome-ൽ ഡീബഗ് ടാബ് തുറക്കേണ്ടതുണ്ട്, വ്യാപ്തിയിലെ വേരിയബിളുകൾ വിശകലനം ചെയ്യുക. അടുത്ത ബട്ടൺ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഓരോ ആവർത്തനത്തിലും അവരുടെ മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യാം. ഇതെല്ലാം ചെയ്യാൻ എളുപ്പമാണ്, മിക്ക കേസുകളിലും പ്രശ്നം കണ്ടെത്തി.

ഇതിനെ കുറിച്ച് നിങ്ങൾക്ക് ഇവിടെ കൂടുതൽ വായിക്കാം (ക്രോമിനായി) പിന്നെ ഇവിടെ (ഫയർഫോക്സിനായി).

വാക്യഘടന പിശക്

JavaScript-ലെ ഏറ്റവും സാധാരണമായ പിശകുകളിലൊന്ന് SyntaxError ആണ്. അവ ഒഴിവാക്കാൻ ടെക്സ്റ്റ് എഡിറ്റർ വിപുലീകരണങ്ങൾ നിങ്ങളെ സഹായിക്കും. ഉദാഹരണത്തിന്, ബ്രാക്കറ്റ് പെയർ കളറൈസർ വ്യത്യസ്ത നിറങ്ങളുള്ള കോഡിലെ ബ്രാക്കറ്റുകളെ അടയാളപ്പെടുത്തുന്നു, കൂടാതെ പ്രെറ്റിയർ അല്ലെങ്കിൽ സമാനമായ വിശകലന ഉപകരണം പിശകുകൾ വേഗത്തിൽ കണ്ടെത്തുന്നത് സാധ്യമാക്കുന്നു. SyntaxError-ന്റെ സാധ്യത കുറയ്ക്കുന്നതിനുള്ള ഏറ്റവും നല്ല ഓപ്ഷൻ ഏറ്റവും കുറഞ്ഞ നെസ്റ്റിംഗ് ആണ്.

അഭിപ്രായങ്ങളിൽ പങ്കിടുക: തെറ്റുകൾ തടയുന്നതിനോ അല്ലെങ്കിൽ അവ പെട്ടെന്ന് കണ്ടെത്തി ഇല്ലാതാക്കുന്നതിനോ നിങ്ങൾ എന്തുചെയ്യും?

സ്കിൽബോക്സ് ശുപാർശ ചെയ്യുന്നു:

• രണ്ടുവർഷത്തെ പ്രാക്ടിക്കൽ കോഴ്സ് "ഞാൻ ഒരു PRO വെബ് ഡെവലപ്പർ ആണ്".
• ഓൺലൈൻ കോഴ്സ് "0 മുതൽ C# ഡെവലപ്പർ".
• പ്രായോഗിക വർഷ കോഴ്സ് "0 മുതൽ PRO വരെയുള്ള PHP ഡവലപ്പർ".

അവലംബം: www.habr.com