Aduh, kuring ngalakukeun deui: Debugging kasalahan umum dina JavaScript

Nulis kode JavaScript tiasa nangtang sarta kadangkala downright intimidating, sakumaha loba pamekar wawuh jeung. Dina prosés gawé, kasalahan inevitably timbul, sarta sababaraha di antarana diulang remen. Tulisan ieu, ditujukeun pikeun pamekar novice, nyarioskeun ngeunaan kasalahan ieu sareng kumaha cara ngabéréskeunana. Pikeun kajelasan, ngaran fungsi, sipat jeung objék dicokot tina lagu populér. Sadaya 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)

Kode conto di luhur throws kasalahan Uncaught TypeError: Teu bisa maca harta 'untung' tina undefined. Masalahna nyaeta objek gadis teu boga sipat ngaranna, sanajan eta boga sipat ngaran. Sarta saprak girl.ngaranna harta teu dihartikeun, anjeun teu bisa ngakses eta, sabab sacara resmi teu aya. Tapi lamun ngaganti girl.named.lucky kalawan girl.name, lajeng sagalana bakal dianggo tur program bakal balik Lucky.

Anjeun tiasa leuwih jéntré ngeunaan sipat baca di dieu.

Kumaha carana ngabéréskeun TypeErrors

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

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

Pikeun ngaleungitkeun kasalahan, anjeun kedah diajar variabel. Janten, naon budak awéwé? Naon gadis.ngaranna? Anjeun tiasa mendakan ku nganalisa kode, nunjukkeun variabel nganggo console.log, paréntah debugger, atanapi nyauran nami variabel dina konsol. Anjeun kudu mastikeun yén kasebut nyaéta dimungkinkeun pikeun beroperasi dina tipe data dikandung dina variabel. Lamun teu cocog, ngarobah éta, contona, nambahkeun kaayaan atawa coba..nyekel block - sarta meunang kontrol ngaliwatan palaksanaan operasi.

Tumpukan ngabahekeun

Upami anjeun yakin kana pangarang lirik lagu Baby One More Time (ieu Britney Spears, hehehe), maka kecap hit dina konteks ieu hartosna kahayang panyanyi pikeun ditelepon deui (di dieu aya katerangan ngeunaan konteks pisan. lagu - catetan penerjemah). Bisa jadi kahayang ieu bakal ngakibatkeun kanaékan jumlah telepon dina kahirupan nyata. Tapi dina programming, ieu téh recursion nu bisa ngabalukarkeun kasalahan lamun tumpukan panggero overflows.

Kasalahan sapertos kieu:

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

A tumpukan mudal lumangsung lamun pamekar teu nganggap hal dasar dina recursion, atawa lamun kode nu teu alamat kasus dimaksudkeun.

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

Dina hal ieu, stillBelieve can pernah palsu, jadi oneMoreTime bakal disebut unggal waktu, tapi fungsi nu moal pernah lengkep.

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 kalayan puteran tanpa wates, nalika sistem henteu ngahasilkeun pesen kasalahan, tapi halaman dimana kode JavaScript dieksekusi ngan saukur beku. Ieu lumangsung lamun loop bari teu boga kaayaan terminasi.

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

Anjeun tiasa ngabéréskeun masalah 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 gaduh masalah loop anu teu terbatas, anjeun kedah nutup tab dina Chrome atanapi Edge, sareng nutup jandela browser dina Firefox. Saatos ieu, anjeun kedah taliti nganalisis kodeu. Upami anjeun henteu mendakan masalahna, éta patut nambihan paréntah debugger kana loop atanapi fungsi anjeun sareng pariksa nilai variabel. Upami hasilna henteu saluyu sareng anu dipiharep, maka urang ngagentos éta, ieu tiasa dilakukeun kalayan gampang.

Dina conto di luhur, debugger kudu ditambahkeun salaku baris kahiji tina fungsi atawa loop. Teras anjeun kedah muka tab debug dina Chrome, nganalisa variabel dina lingkup. Nganggo tombol salajengna anjeun tiasa ngalacak parobahanana sareng unggal iterasi. Sadaya ieu gampang dilakukeun, sareng dina kalolobaan kasus masalahna kapanggih.

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 bakal ngabantosan anjeun ngahindarkeunana. Contona, Bracket Pair Colorizer nandaan tanda kurung dina kode kalawan kelir béda, sarta Prettier atawa alat analisis sarupa ngamungkinkeun pikeun gancang manggihan kasalahan. Pilihan anu pangsaéna pikeun ngirangan kamungkinan SyntaxError nyaéta nyarang minimal.

Bagikeun dina koméntar: naon anu anjeun lakukeun pikeun nyegah 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