Oops, gibuhat ko kini pag-usab: Pag-debug sa kasagarang mga sayop sa JavaScript

Oops, gibuhat ko kini pag-usab: Pag-debug sa kasagarang mga sayop sa JavaScript

Ang pagsulat sa JavaScript code mahimong mahagiton ug usahay makahadlok, sama sa pamilyar sa daghang mga developer. Sa proseso sa pagtrabaho, ang mga kasaypanan dili kalikayan nga motumaw, ug ang uban niini kanunay nga gisubli. Kini nga artikulo, nga nagtumong sa mga bag-ong developer, naghisgot bahin sa kini nga mga sayup ug kung giunsa kini pagsulbad. Alang sa katin-awan, ang mga ngalan sa mga gimbuhaton, mga kabtangan ug mga butang gikuha gikan sikat nga kanta. Tanan kini makatabang kanimo nga dali nga mahinumdom kung giunsa ang pagtul-id sa kasagarang mga sayup.

Gipahinumduman namon ikaw: alang sa tanan nga mga magbabasa sa "Habr" - usa ka diskwento sa 10 nga mga rubles kung nagpalista sa bisan unsang kurso sa Skillbox gamit ang code sa promosyon nga "Habr".

Girekomenda sa Skillbox: Praktikal nga kurso "Mobile Developer PRO".

TypeError: wala gihubit ang kabtangan

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)

Ang pananglitan nga code sa ibabaw naglabay sa sayup nga Uncaught TypeError: Dili mabasa ang kabtangan nga 'swerte' nga wala matino. Ang problema mao nga ang butang nga babaye walay ngalan nga kabtangan, bisan kung kini adunay ngalan nga kabtangan. Ug tungod kay ang babaye.gingalanan nga kabtangan wala gihubit, dili nimo kini ma-access, tungod kay pormal nga wala kini. Apan kung imong ilisan ang girl.named.lucky sa girl.name, unya ang tanan molihok ug ang programa mobalik nga Lucky.

Makakat-on ka og dugang mahitungod sa mga kabtangan basaha dinhi.

Giunsa pagsulbad ang TypeErrors

Ang TypeErrors mahitabo kung ang usa ka programmer mosulay sa paghimo sa mga aksyon sa datos nga dili mohaum sa usa ka piho nga tipo. Ang mga pananglitan naglakip sa paggamit sa .bold(), pagpangayo og undefined property, o pagtawag og function nga dili tinuod nga function.

Busa, kung mosulay ka sa pagtawag sa babaye (), imong makuha ang sayup nga Uncaught TypeError: ang imongVariable.bold dili usa ka function ug ang babaye dili usa ka function, tungod kay kini usa ka butang nga gitawag, dili usa ka function.

Aron mawagtang ang mga sayup, kinahanglan nimo nga tun-an ang mga variable. Busa, unsa ang usa ka babaye? Unsay ngalan sa babaye? Mahimo nimong mahibal-an pinaagi sa pag-analisar sa code, pagpakita sa mga variable gamit ang console.log, ang debugger command, o pagtawag sa variable nga ngalan sa console. Kinahanglan nimo nga sigurohon nga posible nga mag-operate sa tipo sa datos nga anaa sa variable. Kung dili kini angay, usba kini, pananglitan, pagdugang usa ka kondisyon o pagsulay..catch block - ug makuha ang kontrol sa pagpatuman sa operasyon.

Stack Overflow

Kung nagtuo ka sa mga tagsulat sa mga liriko sa kanta nga Baby One More Time (kini si Britney Spears, oo), nan ang pulong nga naigo sa kini nga konteksto nagpasabut nga gusto sa mag-aawit nga tawgon pag-usab (ania ang usa ka pagpasabut sa mismong konteksto sa kanta - nota sa tighubad). Mahimo nga kini nga tinguha modala ngadto sa pagdugang sa gidaghanon sa mga tawag sa tinuod nga kinabuhi. Apan sa programming, kini usa ka recursion nga mahimong hinungdan sa usa ka sayup kung ang call stack nag-awas.

Ang mga sayup ingon niini:

Sayop: Wala sa stack space (Edge)
InternalError: sobra nga recursion (Firefox)
RangeError: Gilapas ang maximum nga gidak-on sa stack sa tawag (Chrome)

Ang usa ka stack overflow mahitabo kung ang developer wala maghunahuna sa base nga kaso sa recursion, o kung ang code wala magtubag sa gituyo nga kaso.

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

Sa kini nga kaso, ang stillBelieve dili mahimong bakak, mao nga ang oneMoreTime tawgon matag higayon, apan ang function dili makompleto.

Kung magsugod ka sa pagsalig sa duha ka mga higala, kini makapakunhod sa kamingaw, ug dili ka maghulat alang sa usa ka tawag.

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

Ang usa ka pananglitan mao ang mga kaso nga adunay walay katapusan nga mga loop, kung ang sistema wala makamugna og usa ka mensahe sa sayup, apan ang panid diin ang JavaScript code gipatuman yano nga nag-freeze. Kini mahitabo kung ang while loop walay kondisyon sa pagtapos.

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

Masulbad nimo ang problema sama sa mosunod:

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

Pag-debug sa walay katapusan nga mga loop ug recursions

Kung ikaw adunay usa ka walay katapusan nga problema sa loop, kinahanglan nimo nga isira ang tab sa Chrome o Edge, ug isira ang browser window sa Firefox. Pagkahuman niini, kinahanglan nimo nga pag-analisar pag-ayo ang code. Kung dili nimo makit-an ang problema, angay nga idugang ang usa ka debugger command sa imong loop o function ug susihon ang mga kantidad sa mga variable. Kung ang resulta dili katumbas sa gipaabut, nan gipulihan namon kini, mahimo kini dali.

Sa pananglitan sa ibabaw, ang debugger kinahanglang idugang isip unang linya sa function o loop. Unya kinahanglan nimo nga ablihan ang tab sa debug sa Chrome, pag-analisar sa mga variable sa kasangkaran. Gamit ang sunod nga buton masubay nimo ang ilang mga pagbag-o sa matag pag-uli. Kining tanan sayon ​​nga buhaton, ug sa kadaghanang kaso ang problema makita.

Mahimo nimong basahon ang dugang mahitungod niining tanan dinhi (alang sa chrome) ug dinhi (alang sa Firefox).

Sayop sa syntax

Usa sa labing kasagaran nga mga sayup sa JavaScript mao ang SyntaxError. Ang mga extension sa text editor makatabang kanimo sa paglikay niini. Pananglitan, ang Bracket Pair Colorizer nagmarka sa mga bracket sa code nga adunay lain-laing mga kolor, ug ang Prettier o usa ka susama nga himan sa pag-analisar nagpaposible nga dali nga makit-an ang mga sayup. Ang labing maayo nga kapilian sa pagpakunhod sa posibilidad sa usa ka SyntaxError mao ang gamay nga nesting.

Ipakigbahin sa mga komento: unsa ang imong buhaton aron malikayan ang mga sayup o dali nga makit-an ug mapapas kini?

Girekomenda sa Skillbox:

Source: www.habr.com

Idugang sa usa ka comment