Oops, erġajt għamilt: Debugging ta' żbalji komuni f'JavaScript

Il-kitba tal-kodiċi JavaScript tista 'tkun ta' sfida u kultant detta intimidanti, peress li ħafna żviluppaturi huma familjari magħhom. Fil-proċess tax-xogħol, inevitabbilment jinqalgħu żbalji, u xi wħud minnhom huma ripetuti ta 'spiss. Dan l-artikolu, immirat għal żviluppaturi novizzi, jitkellem dwar dawn l-iżbalji u kif issolvihom. Għaċ-ċarezza, l-ismijiet tal-funzjonijiet, il-proprjetajiet u l-oġġetti huma meħuda minn kanzunetta popolari. Dan kollu jgħinek tiftakar malajr kif tikkoreġi żbalji komuni.

Infakkrukom: għall-qarrejja kollha ta '"Habr" - skont ta' 10 rublu meta tirreġistra fi kwalunkwe kors ta 'Skillbox billi tuża l-kodiċi promozzjonali "Habr".

Skillbox jirrakkomanda: Kors prattiku "Mobile Developer PRO".

TypeError: il-proprjetà mhix definita

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)

Il-kodiċi eżempju ta 'hawn fuq jitfa' l-iżball Uncaught TypeError: Cannot read property 'lucky' of undefined. Il-problema hija li l-oġġett tat-tfajla m'għandux proprjetà msemmija, għalkemm għandu proprjetà ta 'isem. U peress li l-proprjetà girl.named mhix definita, ma tistax taċċessaha, għax formalment ma teżistix. Imma jekk tissostitwixxi girl.named.lucky ma girl.name, allura kollox se jaħdem u l-programm jerġa 'lucky.

Tista 'titgħallem aktar dwar il-proprjetajiet aqra hawn.

Kif issolvi TypeErrors

TypeErrors iseħħu meta programmatur jipprova jwettaq azzjonijiet fuq data li ma taqbilx ma' tip speċifiku. Eżempji jinkludu l-użu ta' .bold(), it-talba għal proprjetà mhux definita, jew is-sejħa ta' funzjoni li fil-fatt mhijiex funzjoni.

Għalhekk, jekk tipprova ssejjaħ girl(), ikollok l-iżball Uncaught TypeError: yourVariable.bold mhix funzjoni u girl mhix funzjoni, għaliex fil-fatt huwa oġġett li qed jissejjaħ, mhux funzjoni.

Sabiex jiġu eliminati l-iżbalji, għandek bżonn tistudja l-varjabbli. Allura, x'inhi tfajla? X'inhu girl.named? Tista 'ssir taf billi tanalizza l-kodiċi, turi varjabbli billi tuża console.log, il-kmand tad-debugger, jew issejjaħ l-isem tal-varjabbli fil-console. Trid tiżgura li huwa possibbli li topera fuq it-tip tad-dejta li tinsab fil-varjabbli. Jekk ma jaqbilx, ibdelha, pereżempju, żid kundizzjoni jew ipprova..catch block - u tikseb kontroll fuq l-eżekuzzjoni tal-operazzjoni.

Munzell Overflow

Jekk temmen li l-awturi tal-lirika tal-kanzunetta Baby One More Time (din hija Britney Spears, iva), allura l-kelma hit f’dan il-kuntest tfisser ix-xewqa tal-kantanta li terġa’ tissejjaħ (hawnhekk spjegazzjoni tal-kuntest stess tal- kanzunetta - nota tat-traduttur). Jista’ jkun li din ix-xewqa twassal għal żieda fin-numru ta’ telefonati fil-ħajja reali. Iżda fl-ipprogrammar, din hija rikorsjoni li tista 'tikkawża żball jekk il-munzell tas-sejħa tfur.

L-iżbalji jidhru bħal dawn:

Żball: Spazju barra mill-munzell (Xfer)
InternalError: wisq rikorsjoni (Firefox)
RangeError: Id-daqs massimu tal-munzell ta' sejħiet inqabeż (Chrome)

Iseħħ overflow tal-munzell jekk l-iżviluppatur ma jikkunsidrax il-każ bażi fir-rikorsi, jew jekk il-kodiċi ma jindirizzax il-każ maħsub.

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

F'dan il-każ, stillBelieve qatt ma jista 'jkun falz, għalhekk oneMoreTime se jissejjaħ kull darba, iżda l-funzjoni qatt ma titlesta.

Jekk tibda tiddependi fuq żewġ ħbieb, dan inaqqas is-solitudni, u ma jkollokx għalfejn tistenna sejħa.

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

Eżempju huma każijiet b'linji infiniti, meta s-sistema ma tiġġenerax messaġġ ta 'żball, iżda l-paġna li fuqha jiġi esegwit il-kodiċi JavaScript sempliċiment tiffriża. Dan jiġri jekk il-loop while ma jkollux kundizzjoni ta' terminazzjoni.

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

Tista 'ssolvi l-problema kif ġej:

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

Debugging loops infiniti u rikorsi

Jekk għandek problema ta' loop infinita, trid tagħlaq it-tab f'Chrome jew Edge, u tagħlaq it-tieqa tal-browser f'Firefox. Wara dan, għandek bżonn tanalizza bir-reqqa l-kodiċi. Jekk ma tistax issib il-problema, ta 'min iżżid kmand tad-debugger mal-linja jew il-funzjoni tiegħek u tiċċekkja l-valuri tal-varjabbli. Jekk ir-riżultat ma jikkorrispondix għal dak li kien mistenni, allura nibdluh, dan jista 'jsir faċilment.

Fl-eżempju ta 'hawn fuq, debugger għandu jiżdied bħala l-ewwel linja tal-funzjoni jew loop. Imbagħad għandek bżonn tiftaħ it-tab tad-debug fi Chrome, tanalizza l-varjabbli fl-ambitu. Permezz tal-buttuna li jmiss tista 'ssegwi l-bidliet tagħhom ma' kull iterazzjoni. Dan kollu huwa faċli li jsir, u f'ħafna każijiet il-problema tinstab.

Tista' taqra aktar dwar dan kollu hawn (għal Chrome) u hawn (għal Firefox).

Żball tas-sintassi

Wieħed mill-iżbalji l-aktar komuni f'JavaScript huwa SyntaxError. L-estensjonijiet tal-editur tat-test jgħinuk tevitahom. Pereżempju, Bracket Pair Colorizer jimmarka parentesi fil-kodiċi b'kuluri differenti, u Prettier jew għodda ta 'analiżi simili jagħmilha possibbli li jinstabu żbalji malajr. L-aħjar għażla biex titnaqqas il-probabbiltà ta' SyntaxError hija tbejtu minimu.

Aqsam fil-kummenti: x'tagħmel biex tevita l-iżbalji jew tiskoprihom u teliminahom malajr?

Skillbox jirrakkomanda:

• Kors prattiku ta' sentejn "Jien żviluppatur tal-web PRO".
• Kors onlajn "Żviluppatur C# minn 0".
• Kors prattiku tas-sena "Żviluppatur PHP minn 0 għal PRO".

Sors: www.habr.com