Oeps, ik die it nochris: Debuggen fan mienskiplike flaters yn JavaScript

It skriuwen fan JavaScript-koade kin útdaagjend en soms gewoan yntimidearjend wêze, lykas in protte ûntwikkelders bekend binne. Yn it proses fan wurk ûntsteane ûnûntkomber flaters, en guon fan harren wurde faak werhelle. Dit artikel, rjochte op begjinnende ûntwikkelders, fertelt oer dizze flaters en hoe't se se kinne oplosse. Foar de dúdlikens binne de nammen fan funksjes, eigenskippen en objekten út helle populêr ferske. Dit alles helpt jo fluch te ûnthâlden hoe't jo gewoane flaters korrigearje.

Wy herinnerje: foar alle lêzers fan "Habr" - in koarting fan 10 roebel by it ynskriuwen fan in Skillbox-kursus mei de promoasjekoade "Habr".

Skillbox advisearret: Praktyske kursus "Mobiele ûntwikkelder PRO".

TypeError: eigenskip is net definiearre

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)

De foarbyldkoade hjirboppe smyt de flater Uncaught TypeError: Kin eigendom 'lokkich' fan ûndefiniearre net lêze. It probleem is dat it famke foarwerp hat gjin neamd eigendom, hoewol't it hat in namme eigendom. En sûnt de girl.named eigendom is net definiearre, do kinst gjin tagong ta it, want formeel bestiet it net. Mar as jo ferfange girl.named.lucky mei girl.name, dan sil alles wurkje en it programma sil weromkomme Lucky.

Jo kinne mear leare oer de eigenskippen lês hjir.

Hoe kinne jo TypeErrors oplosse

TypeFouten komme foar as in programmeur besiket aksjes út te fieren op gegevens dy't net oerienkomme mei in spesifyk type. Foarbylden omfetsje it brûken fan .bold (), it freegjen fan in net definieare eigenskip, of it oproppen fan in funksje dy't eins gjin funksje is.

Dus, as jo besykje te neamen famke (), do silst krije de flater Uncaught TypeError: yourVariable.bold is gjin funksje en famke is gjin funksje, want it is eins in objekt wurdt neamd, gjin funksje.

Om flaters te eliminearjen, moatte jo de fariabelen studearje. Dus, wat is in famke? Wat is girl.named? Jo kinne útfine troch de koade te analysearjen, fariabelen te werjaan mei console.log, it debuggerkommando, of de fariabelenamme yn 'e konsole te neamen. Jo moatte der wis fan wêze dat it mooglik is om te operearjen op it gegevenstype befette yn 'e fariabele. As it net past, feroarje it, bygelyks, foegje in betingst of try..catch blok - en fa kontrôle oer de útfiering fan de operaasje.

Stack oerstreaming

As jo ​​​​leauwe dat de skriuwers fan 'e teksten fan it ferske Baby One More Time (dit is Britney Spears, ja), dan betsjut it wurd hit yn dizze kontekst de winsk fan' e sjonger om opnij neamd te wurden (hjir is in útlis fan 'e kontekst fan' e liet - oersetternota). It kin wêze dat dizze winsk sil liede ta in tanimming fan it oantal oproppen yn it echte libben. Mar yn programmearring, dit is in rekursje dat kin feroarsaakje in flater as de oprop stack oerstreamt.

De flaters sjogge der sa út:

Flater: Out of stack space (Edge)
Ynterne flater: te folle rekursje (Firefox)
RangeError: maksimale opropstackgrutte is oerskreaun (Chrome)

In stack oerstreaming komt foar as de ûntwikkelder net beskôgje de basis gefal yn 'e rekursje, of as de koade net oanpakt de bedoeld gefal.

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

Yn dit gefal kin stillBelieve nea falsk wêze, dus oneMoreTime sil elke kear wurde neamd, mar de funksje sil nea foltôgje.

As jo ​​begjinne in berop dwaan op twa freonen, dit sil ferminderje iensumens, en do silst net hoege te wachtsjen op in oprop.

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

In foarbyld is gefallen mei ûneinige loops, as it systeem gjin flaterberjocht genereart, mar de side wêrop de JavaScript-koade wurdt útfierd gewoan befriest. Dit bart as de while-lus gjin beëinigingsbetingst hat.

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

Jo kinne it probleem as folgjend oplosse:

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

Debuggen fan ûneinige loops en rekursjes

As jo ​​in ûneinich loopprobleem hawwe, moatte jo de ljepper yn Chrome of Edge slute, en it browserfinster yn Firefox slute. Hjirnei moatte jo de koade foarsichtich analysearje. As jo ​​​​it probleem net kinne fine, is it de muoite wurdich om in debuggerkommando ta te foegjen oan jo loop of funksje en de wearden fan 'e fariabelen te kontrolearjen. As it resultaat net oerienkomt mei wat ferwachte waard, dan ferfange wy it, dit kin maklik dien wurde.

Yn it foarbyld hjirboppe, debugger moat wurde tafoege as de earste rigel fan de funksje of loop. Dan moatte jo de debug-ljepper yn Chrome iepenje, de fariabelen yn omfang analysearje. Mei de folgjende knop kinne jo har wizigingen by elke iteraasje folgje. Dit alles is maklik te dwaan, en yn 'e measte gefallen wurdt it probleem fûn.

Jo kinne hjir mear oer dit alles lêze (foar chrome) en hjir (foar Firefox).

Syntaksis flater

Ien fan 'e meast foarkommende flaters yn JavaScript is SyntaxError. Tafoegings foar tekstbewurker sille jo helpe om se te foarkommen. Bygelyks, Bracket Pair Colorizer markearret heakjes yn de koade mei ferskillende kleuren, en Prettier of in ferlykbere analyse ark makket it mooglik om fluch fine flaters. De bêste opsje om de kâns op in SyntaxError te ferminderjen is minimaal nêst.

Diel yn 'e opmerkingen: wat dogge jo om flaters te foarkommen of se fluch te ûntdekken en te eliminearjen?

Skillbox advisearret:

• Twa jier praktyske kursus "Ik bin in PRO webûntwikkelder".
• Online kursus "C# ûntwikkelder fan 0".
• Praktyske jierkursus "PHP-ûntwikkelder fan 0 oant PRO".

Boarne: www.habr.com