అయ్యో, నేను మళ్ళీ చేసాను: JavaScriptలో సాధారణ దోషాలను డీబగ్ చేయడం

చాలా మంది డెవలపర్‌లకు తెలిసినందున JavaScript కోడ్‌ను వ్రాయడం సవాలుగా ఉంటుంది మరియు కొన్నిసార్లు భయపెట్టవచ్చు. పని ప్రక్రియలో, లోపాలు అనివార్యంగా తలెత్తుతాయి మరియు వాటిలో కొన్ని తరచుగా పునరావృతమవుతాయి. అనుభవం లేని డెవలపర్‌లను లక్ష్యంగా చేసుకున్న ఈ కథనం, ఈ లోపాల గురించి మరియు వాటిని ఎలా పరిష్కరించాలో మాట్లాడుతుంది. స్పష్టత కోసం, విధులు, లక్షణాలు మరియు వస్తువుల పేర్లు నుండి తీసుకోబడ్డాయి బాగా తెలిసిన పాట. సాధారణ తప్పులను ఎలా సరిదిద్దాలో త్వరగా గుర్తుంచుకోవడానికి ఇవన్నీ మీకు సహాయపడతాయి.

మేము గుర్తు చేస్తున్నాము: Habr పాఠకులందరికీ - Habr ప్రోమో కోడ్‌ని ఉపయోగించి ఏదైనా Skillbox కోర్సులో నమోదు చేసుకున్నప్పుడు 10 రూబుల్ తగ్గింపు.

Skillbox సిఫార్సు చేస్తోంది: ప్రాక్టికల్ కోర్సు "మొబైల్ డెవలపర్ PRO".

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)

ఎగువ ఉదాహరణ కోడ్ లోపాన్ని విసురుతుంది గుర్తించబడలేదు టైప్‌ఎర్రర్: నిర్వచించబడని ఆస్తి 'లక్కీ'ని చదవలేరు. సమస్య ఏమిటంటే, అమ్మాయి వస్తువుకు పేరు ఆస్తి ఉన్నప్పటికీ, పేరు ఆస్తి లేదు. మరియు అమ్మాయి పేరు పెట్టబడిన ఆస్తి నిర్వచించబడనందున, మీరు దానిని యాక్సెస్ చేయలేరు, ఎందుకంటే అధికారికంగా అది ఉనికిలో లేదు. కానీ మీరు girl.named.luckyని girl.nameతో భర్తీ చేస్తే, అప్పుడు ప్రతిదీ పని చేస్తుంది మరియు ప్రోగ్రామ్ లక్కీని తిరిగి ఇస్తుంది.

మీరు లక్షణాల గురించి మరింత తెలుసుకోవచ్చు ఇక్కడ చదవండి.

టైప్ లోపాలను ఎలా పరిష్కరించాలి

ప్రోగ్రామర్ నిర్దిష్ట రకానికి సరిపోలని డేటాపై చర్యలను చేయడానికి ప్రయత్నించినప్పుడు టైప్‌లో లోపాలు సంభవిస్తాయి. ఉదాహరణలు .bold()ని ఉపయోగించడం, నిర్వచించబడని ఆస్తి కోసం అడగడం లేదా నిజానికి ఫంక్షన్ కాని ఫంక్షన్‌కు కాల్ చేయడం.

కాబట్టి, మీరు అమ్మాయి()కి కాల్ చేయడానికి ప్రయత్నిస్తే, మీరు గుర్తించబడని TypeError అనే ఎర్రర్‌ను పొందుతారు: yourVariable.bold అనేది ఫంక్షన్ కాదు మరియు అమ్మాయి అనేది ఫంక్షన్ కాదు, ఎందుకంటే ఇది నిజానికి ఒక వస్తువు అని పిలుస్తారు, ఫంక్షన్ కాదు.

లోపాలను తొలగించడానికి, మీరు వేరియబుల్స్ అధ్యయనం చేయాలి. కాబట్టి, అమ్మాయి అంటే ఏమిటి? అమ్మాయి పేరు ఏమిటి? మీరు కోడ్‌ను విశ్లేషించడం ద్వారా, కన్సోల్.లాగ్, డీబగ్గర్ కమాండ్‌ని ఉపయోగించి వేరియబుల్‌లను ప్రదర్శించడం లేదా కన్సోల్‌లోని వేరియబుల్ పేరును కాల్ చేయడం ద్వారా కనుగొనవచ్చు. వేరియబుల్‌లో ఉన్న డేటా రకంపై ఆపరేట్ చేయడం సాధ్యమేనా అని మీరు నిర్ధారించుకోవాలి. ఇది సరిపోకపోతే, దానిని మార్చండి, ఉదాహరణకు, షరతును జోడించండి లేదా ప్రయత్నించండి..క్యాచ్ బ్లాక్ - మరియు ఆపరేషన్ అమలుపై నియంత్రణను పొందండి.

స్టాక్ ఓవర్ఫ్లో

బేబీ వన్ మోర్ టైమ్ (ఇది బ్రిట్నీ స్పియర్స్, అవును) పాటకు సాహిత్యం రాసిన రచయితలను మీరు విశ్వసిస్తే, ఈ సందర్భంలో హిట్ అనే పదానికి గాయకుడి కోరికను మళ్లీ పిలవాలని అర్థం (ఇక్కడ చాలా సందర్భం యొక్క వివరణ ఉంది పాట - అనువాదకుని గమనిక). ఈ కోరిక నిజ జీవితంలో కాల్‌ల సంఖ్య పెరగడానికి దారితీయవచ్చు. కానీ ప్రోగ్రామింగ్‌లో, ఇది కాల్ స్టాక్ ఓవర్‌ఫ్లో అయితే ఎర్రర్‌కు కారణమయ్యే పునరావృతం.

లోపాలు ఇలా కనిపిస్తాయి:

లోపం: స్టాక్ స్థలం లేదు (ఎడ్జ్)
అంతర్గత లోపం: చాలా పునరావృతం (ఫైర్‌ఫాక్స్)
RangeError: గరిష్ట కాల్ స్టాక్ పరిమాణం మించిపోయింది (Chrome)

డెవలపర్ రికర్షన్‌లో బేస్ కేస్‌ను పరిగణించనట్లయితే లేదా కోడ్ ఉద్దేశించిన కేస్‌ను పరిష్కరించకపోతే స్టాక్ ఓవర్‌ఫ్లో ఏర్పడుతుంది.

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

ఈ సందర్భంలో, స్టిల్‌బిలీవ్ ఎప్పటికీ తప్పు కాదు, కాబట్టి వన్‌మోర్‌టైమ్ ప్రతిసారీ కాల్ చేయబడుతుంది, కానీ ఫంక్షన్ ఎప్పటికీ పూర్తి కాదు.

మీరు ఇద్దరు స్నేహితులపై ఆధారపడటం ప్రారంభిస్తే, ఇది ఒంటరితనాన్ని తగ్గిస్తుంది మరియు మీరు కాల్ కోసం వేచి ఉండాల్సిన అవసరం లేదు.

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

ఒక ఉదాహరణ అనంతమైన లూప్‌లతో కూడిన సందర్భాలు, సిస్టమ్ దోష సందేశాన్ని రూపొందించనప్పుడు, కానీ జావాస్క్రిప్ట్ కోడ్ అమలు చేయబడిన పేజీ కేవలం స్తంభింపజేస్తుంది. ఒకవేళ లూప్‌కు ముగింపు పరిస్థితి లేకపోతే ఇది జరుగుతుంది.

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
}

అనంతమైన లూప్‌లు మరియు రికర్షన్‌లను డీబగ్గింగ్ చేస్తోంది

మీకు అనంతమైన లూప్ సమస్య ఉంటే, మీరు క్రోమ్ లేదా ఎడ్జ్‌లో ట్యాబ్‌ను మూసివేసి, Firefoxలో బ్రౌజర్ విండోను మూసివేయాలి. దీని తరువాత, మీరు కోడ్‌ను జాగ్రత్తగా విశ్లేషించాలి. మీరు సమస్యను కనుగొనలేకపోతే, మీ లూప్ లేదా ఫంక్షన్‌కు డీబగ్గర్ ఆదేశాన్ని జోడించడం మరియు వేరియబుల్స్ విలువలను తనిఖీ చేయడం విలువైనదే. ఫలితం ఊహించిన దానికి అనుగుణంగా లేకపోతే, మేము దానిని భర్తీ చేస్తాము, ఇది సులభంగా చేయవచ్చు.

ఎగువ ఉదాహరణలో, డీబగ్గర్ ఫంక్షన్ లేదా లూప్ యొక్క మొదటి పంక్తిగా జోడించబడాలి. అప్పుడు మీరు స్కోప్‌లోని వేరియబుల్స్‌ని విశ్లేషించి, Chromeలో డీబగ్ ట్యాబ్‌ను తెరవాలి. తదుపరి బటన్‌ని ఉపయోగించి మీరు ప్రతి పునరావృతంతో వారి మార్పులను ట్రాక్ చేయవచ్చు. ఇవన్నీ చేయడం సులభం, మరియు చాలా సందర్భాలలో సమస్య కనుగొనబడింది.

మీరు వీటన్నింటి గురించి ఇక్కడ మరింత చదవవచ్చు (క్రోమ్ కోసం) మరియు ఇక్కడ (Firefox కోసం).

సింటాక్స్ లోపం

జావాస్క్రిప్ట్‌లో అత్యంత సాధారణ లోపాలలో ఒకటి సింటాక్స్ ఎర్రర్. టెక్స్ట్ ఎడిటర్ పొడిగింపులు వాటిని నివారించడంలో మీకు సహాయపడతాయి. ఉదాహరణకు, బ్రాకెట్ పెయిర్ కలరైజర్ కోడ్‌లోని బ్రాకెట్‌లను వేర్వేరు రంగులతో సూచిస్తుంది మరియు ప్రెట్టియర్ లేదా ఇలాంటి విశ్లేషణ సాధనం లోపాలను త్వరగా కనుగొనడం సాధ్యం చేస్తుంది. SyntaxError యొక్క సంభావ్యతను తగ్గించడానికి ఉత్తమ ఎంపిక కనిష్ట గూడు.

వ్యాఖ్యలలో భాగస్వామ్యం చేయండి: తప్పులను నివారించడానికి లేదా వాటిని త్వరగా గుర్తించి తొలగించడానికి మీరు ఏమి చేస్తారు?

Skillbox సిఫార్సు చేస్తోంది:

• రెండేళ్ల ప్రాక్టికల్ కోర్సు "నేను PRO వెబ్ డెవలపర్‌ని".
• ఆన్‌లైన్ కోర్సు "0 నుండి C# డెవలపర్".
• ప్రాక్టికల్ ఒక సంవత్సరం కోర్సు "0 నుండి PRO వరకు PHP డెవలపర్".

మూలం: www.habr.com