Oops, ginawa ko ulit: Pagde-debug ng mga karaniwang error sa JavaScript

Oops, ginawa ko ulit: Pagde-debug ng mga karaniwang error sa JavaScript

Ang pagsulat ng JavaScript code ay maaaring maging mahirap at kung minsan ay talagang nakakatakot, gaya ng pamilyar sa maraming developer. Sa proseso ng trabaho, ang mga pagkakamali ay hindi maiiwasang lumitaw, at ang ilan sa mga ito ay madalas na paulit-ulit. Ang artikulong ito, na naglalayong sa mga baguhan na developer, ay nagsasalita tungkol sa mga error na ito at kung paano lutasin ang mga ito. Para sa kalinawan, ang mga pangalan ng mga function, mga katangian at mga bagay ay kinuha mula sa sikat na kanta. Ang lahat ng ito ay tumutulong sa iyo na mabilis na matandaan kung paano itama ang mga karaniwang pagkakamali.

Pinapaalala namin sa iyo: para sa lahat ng mga mambabasa ng "Habr" - isang diskwento na 10 rubles kapag nag-enroll sa anumang kurso sa Skillbox gamit ang code na pang-promosyon ng "Habr".

Inirerekomenda ng Skillbox ang: Praktikal na kurso "Mobile Developer PRO".

TypeError: hindi tinukoy ang pag-aari

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 halimbawang code sa itaas ay nagtatapon ng error na Uncaught TypeError: Hindi mabasa ang property na 'masuwerte' ng hindi natukoy. Ang problema ay ang object ng babae ay walang pinangalanang property, bagama't mayroon itong name property. At dahil hindi tinukoy ang girl.named property, hindi mo ito ma-access, dahil pormal na wala ito. Ngunit kung papalitan mo ang girl.named.lucky ng girl.name, kung gayon ang lahat ay gagana at ang programa ay magbabalik ng Lucky.

Maaari kang matuto nang higit pa tungkol sa mga ari-arian basahin dito.

Paano malutas ang TypeErrors

Nagaganap ang TypeErrors kapag sinubukan ng programmer na magsagawa ng mga aksyon sa data na hindi tumutugma sa isang partikular na uri. Kasama sa mga halimbawa ang paggamit ng .bold(), paghingi ng hindi natukoy na property, o pagtawag ng function na hindi naman talaga function.

Kaya, kung susubukan mong tawagan ang girl(), makakakuha ka ng error na Uncaught TypeError: yourVariable.bold ay hindi isang function at girl ay hindi isang function, dahil ito ay talagang isang object na tinatawag, hindi isang function.

Upang maalis ang mga error, kailangan mong pag-aralan ang mga variable. Kaya, ano ang isang babae? Ano ang girl.named? Malalaman mo ito sa pamamagitan ng pagsusuri sa code, pagpapakita ng mga variable gamit ang console.log, ang debugger command, o pagtawag sa variable na pangalan sa console. Kailangan mong tiyakin na posibleng gumana sa uri ng data na nasa variable. Kung hindi ito magkasya, baguhin ito, halimbawa, magdagdag ng kundisyon o subukan..catch block - at makakuha ng kontrol sa pagsasagawa ng operasyon.

Overflow ng stack

Kung naniniwala ka sa mga may-akda ng lyrics ng kantang Baby One More Time (ito ay Britney Spears, yeah), kung gayon ang salitang hit sa kontekstong ito ay nangangahulugan ng pagnanais ng mang-aawit na matawag muli (narito ang isang paliwanag sa mismong konteksto ng kanta - tala ng tagasalin). Maaaring ang pagnanais na ito ay humantong sa isang pagtaas sa bilang ng mga tawag sa totoong buhay. Ngunit sa programming, ito ay isang recursion na maaaring magdulot ng error kung ang call stack ay umaapaw.

Ang mga error ay ganito ang hitsura:

Error: Wala sa stack space (Edge)
InternalError: masyadong maraming recursion (Firefox)
RangeError: Lumampas ang maximum na laki ng stack ng tawag (Chrome)

Nagaganap ang isang stack overflow kung hindi isinasaalang-alang ng developer ang base case sa recursion, o kung hindi tinutugunan ng code ang nilalayon na case.

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

Sa kasong ito, hindi kailanman maaaring maging false ang stillBelieve, kaya tatawagin ang oneMoreTime sa bawat oras, ngunit hindi kailanman makukumpleto ang function.

Kung magsisimula kang umasa sa dalawang kaibigan, mababawasan nito ang kalungkutan, at hindi mo na kailangang maghintay para sa isang tawag.

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

Ang isang halimbawa ay ang mga kaso na may walang katapusang mga loop, kapag ang system ay hindi nakabuo ng isang mensahe ng error, ngunit ang pahina kung saan ang JavaScript code ay naisakatuparan ay nag-freeze lang. Nangyayari ito kung ang while loop ay walang kondisyon ng pagwawakas.

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

Maaari mong lutasin ang problema tulad ng sumusunod:

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

Pag-debug ng walang katapusang mga loop at recursion

Kung mayroon kang walang katapusang problema sa loop, kailangan mong isara ang tab sa Chrome o Edge, at isara ang window ng browser sa Firefox. Pagkatapos nito, kailangan mong maingat na pag-aralan ang code. Kung hindi mo mahanap ang problema, sulit na magdagdag ng isang debugger command sa iyong loop o function at suriin ang mga halaga ng mga variable. Kung ang resulta ay hindi tumutugma sa kung ano ang inaasahan, pagkatapos ay palitan namin ito, madali itong magagawa.

Sa halimbawa sa itaas, dapat idagdag ang debugger bilang unang linya ng function o loop. Pagkatapos ay kailangan mong buksan ang tab ng debug sa Chrome, sinusuri ang mga variable sa saklaw. Gamit ang susunod na button masusubaybayan mo ang kanilang mga pagbabago sa bawat pag-ulit. Ang lahat ng ito ay madaling gawin, at sa karamihan ng mga kaso ang problema ay natagpuan.

Maaari mong basahin ang higit pa tungkol sa lahat ng ito dito (para sa Chrome) at dito (para sa Firefox).

Syntax error

Ang isa sa mga pinakakaraniwang error sa JavaScript ay SyntaxError. Tutulungan ka ng mga extension ng text editor na maiwasan ang mga ito. Halimbawa, minamarkahan ng Bracket Pair Colorizer ang mga bracket sa code na may iba't ibang kulay, at ginagawang posible ng Prettier o isang katulad na tool sa pagsusuri na mabilis na makahanap ng mga error. Ang pinakamainam na opsyon upang mabawasan ang posibilidad ng isang SyntaxError ay minimal na pugad.

Ibahagi sa mga komento: ano ang gagawin mo upang maiwasan ang mga pagkakamali o mabilis na matukoy at maalis ang mga ito?

Inirerekomenda ng Skillbox ang:

Pinagmulan: www.habr.com

Magdagdag ng komento