🥇Aduh, kuring ngalakukeun deui: Debugging kasalahan JavaScript umum

Nulis kode JavaScript tiasa nangtang, sarta kadangkala downright intimidating, sakumaha loba pamekar nyaho. Kasalahan inevitably timbul salila prosés, sababaraha nu ngulang deui. Tulisan ieu, ditujukeun pikeun ngamimitian pamekar, ngabahas kasalahan ieu sareng cara ngabéréskeunana. Pikeun kajelasan, ngaran fungsi, sipat, jeung objék dicokot tina lagu populérSadaya ieu ngabantosan anjeun gancang nginget kumaha ngabenerkeun kasalahan umum.

Kami ngingetan: pikeun sakabéh pamiarsa "Habr" - diskon 10 rubles nalika enrolling dina sagala Tangtu Skillbox ngagunakeun "Habr" kode promosi.

Skillbox nyarankeun: Kursus praktis "Pamekar Mobile PRO".

TypeError: harta teu diartikeun

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)

Conto kode di luhur ngahasilkeun kasalahan "Uncaught TypeError: Teu bisa maca harta 'untung' tina undefined." Masalahna nyaeta objek "gadis" teu boga sipat "ngaranan", sanajan mibanda sipat "ngaran". Sarta saprak sipat "girl.named" teu ditangtukeun, teu bisa diaksés, sabab téhnisna teu aya. Sanajan kitu, lamun ngaganti "girl.named.lucky" jeung "girl.name," sagalana jalan jeung program mulih "Lucky".

Rincian langkung seueur ngeunaan sipat tiasa dipendakan baca di dieu.

Kumaha troubleshoot TypeErrors

TypeErrors lumangsung nalika programmer nyobian ngalakukeun tindakan dina data anu henteu saluyu sareng jinis anu ditetepkeun. Conto kaasup ngagunakeun .bold (), querying pikeun sipat undefined, atawa nelepon hiji fungsi nu sabenerna mah fungsi.

Ku kituna, lamun nyoba nelepon gadis (), anjeun bakal meunang kasalahan Uncaught TypeError: yourVariable.bold teu fungsi jeung gadis teu fungsi, saprak kanyataanna hiji obyék disebut, teu fungsi.

Pikeun troubleshoot kasalahan, Anjeun kudu nalungtik variabel. Ku kituna, naon "gadis"? Jeung naon "gadis.ngaranan"? Anjeun tiasa mendakan ku nganalisa kode, nunjukkeun variabel nganggo console.log, paréntah debugger, atanapi ku nelepon nami variabel dina konsol. Anjeun kedah mastikeun yén anjeun tiasa ngadamel jinis data anu dikandung ku variabel. Lamun henteu, ngarobahna-contona, ku nambahkeun kaayaan atawa try..catch block-jeung gain kontrol ngaliwatan palaksanaan operasi.

Tumpukan ngabahekeun

Lamun urang yakin lyricists tina lagu "Baby One More Time" (éta Britney Spears, duh), kecap "pencét" dina konteks ieu nujul kana kahayang panyanyi pikeun disebut deui (ieu penjelasan ngeunaan konteks lagu urang - catetan penerjemah). Ieu rada mungkin yen kahayang ieu bakal ngakibatkeun kanaékan telepon dina kahirupan nyata. Tapi dina programming, ieu téh recursion, nu bisa ngabalukarkeun kasalahan dina acara a call tumpukan mudal.

Kasalahan sapertos kieu:

Kasalahan: Kaluar tina rohangan tumpukan (Tepi)
Kasalahan internal: seueur teuing rekursi (Firefox)
RangeError: Ukuran tumpukan telepon maksimum ngaleuwihan (Chrome)

Tumpukan mudal lumangsung nalika pamekar gagal ngitung kasus dasar dina rekursi, atanapi nalika kodeu henteu ngémutan kasus anu dimaksud.

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

Dina hal ieu, stillBelieve pernah bisa evaluate mun palsu, jadi oneMoreTime bakal disebut unggal waktu, tapi fungsi moal pernah ngalengkepan palaksanaan.

Lamun mimiti ngandelkeun dua babaturan, ieu bakal ngurangan katiisan, jeung anjeun teu kudu ngadagoan telepon.

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

Hiji conto nyaéta kasus puteran tanpa wates, dimana sistemna henteu ningalikeun pesen kasalahan, tapi halaman anu ngajalankeun kode JavaScript ngan saukur beku. Ieu lumangsung nalika loop bari teu boga kaayaan terminasi.

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

Masalahna tiasa direngsekeun sapertos kieu:

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

Debugging loop taya wates jeung recursions

Upami anjeun mendakan masalah loop anu henteu terbatas, tutup tab dina Chrome atanapi Edge, atanapi jandela browser dina Firefox. Sanggeus éta, taliti nganalisis kode. Lamun teu bisa manggihan masalah, tambahkeun paréntah debugger kana loop atawa fungsi jeung pariksa nilai variabel. Upami hasilna henteu sapertos anu anjeun ngarepkeun, gentos - éta gampang.

Dina conto di luhur, debugger kudu ditambahkeun salaku baris kahiji tina fungsi atawa loop. Teras, buka tab debug dina Chrome sareng analisa variabel dina lingkup. Nganggo tombol salajengna, anjeun tiasa ngalacak parobahanana sareng unggal iterasi. Ieu sadayana gampang pikeun ngalakukeun, sareng dina kalolobaan kasus, masalahna gampang diidentifikasi.

Anjeun tiasa maca langkung seueur ngeunaan sadayana ieu di dieu (pikeun chrome) sareng di dieu (pikeun Firefox).

Kasalahan sintaksis

Salah sahiji kasalahan anu paling umum dina JavaScript nyaéta SyntaxError. Ekstensi pangropéa téksu tiasa ngabantosan ngahindarkeunana. Salaku conto, Bracket Pair Colorizer nyorot kurung dina kode anjeun dina warna anu béda, sedengkeun Prettier atanapi alat analisa anu sami ngamungkinkeun anjeun gancang mendakan kasalahan. Cara anu pangsaéna pikeun ngirangan kamungkinan SyntaxErrors nyaéta ngaminimalkeun nyarang.

Bagikeun dina koméntar: naon anu anjeun lakukeun pikeun ngahindarkeun kasalahan atanapi gancang ngadeteksi sareng ngaleungitkeunana?

Skillbox nyarankeun:

Kursus praktis dua taun "Kuring pamekar wéb PRO".

Tangtu online "C # pamekar ti 0".

Kursus taun praktis "Pamekar PHP ti 0 ka PRO".

sumber: www.habr.com