Oops, rinn mi a-rithist e: Debugging mearachdan cumanta ann an JavaScript

Oops, rinn mi a-rithist e: Debugging mearachdan cumanta ann an JavaScript

Faodaidh sgrìobhadh còd JavaScript a bhith dùbhlanach agus uaireannan eagallach, mar a tha mòran luchd-leasachaidh eòlach air. Anns a 'phròiseas obrach, tha e do-sheachanta gun èirich mearachdan, agus bidh cuid dhiubh gan ath-aithris gu tric. Tha an artaigil seo, ag amas air luchd-leasachaidh ùr, a 'bruidhinn mu na mearachdan sin agus mar a dh' fhuasglas iad iad. Airson soilleireachd, tha ainmean gnìomhan, feartan agus nithean air an toirt bho òran mòr-chòrdte. Tha seo uile gad chuideachadh gu luath a’ cuimhneachadh mar a cheartaicheas tu mearachdan cumanta.

Tha sinn a ’cur nar cuimhne: airson a h-uile leughadair de "Habr" - lasachadh de 10 rubles nuair a chlàraicheas tu ann an cùrsa sam bith Skillbox a 'cleachdadh a' chòd adhartachaidh "Habr".

Tha Skillbox a’ moladh: Cùrsa practaigeach "Mobile Developer PRO".

TypeError: chan eil seilbh air a mhìneachadh

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)

Tha an còd eisimpleir gu h-àrd a’ tilgeadh a’ mhearachd Seòrsa UncaughtError: Cha ghabh seilbh a leughadh ‘fortanach’ neo-mhìnichte. Is e an duilgheadas a th’ ann nach eil seilbh ainmichte aig an nì nighean, ged a tha seilbh ainm aige. Agus leis nach eil an togalach girl.named air a mhìneachadh, chan urrainn dhut faighinn thuige, oir gu foirmeil chan eil e ann. Ach ma chuireas tu girl.name an àite girl.named.lucky, obraichidh a h-uile càil agus tillidh am prògram Lucky.

Faodaidh tu barrachd ionnsachadh mu na feartan Leugh an seo.

Mar a gheibh thu fuasgladh air TypeErrors

Bidh TypeErrors a’ tachairt nuair a dh’fheuchas prògramadair ri gnìomhan a dhèanamh air dàta nach eil a’ freagairt ri seòrsa sònraichte. Tha eisimpleirean a’ gabhail a-steach cleachdadh .bold(), ag iarraidh seilbh neo-mhìnichte, no a’ gairm gnìomh nach e gnìomh a th’ ann.

Mar sin, ma dh’ fheuchas tu ri nighean () a ghairm, gheibh thu a’ mhearachd Uncaught TypeError: chan e gnìomh a th’ ann an doVariable.bold agus chan e gnìomh a th’ ann an nighean, oir is e rud a chanar ris gu dearbh, chan e gnìomh.

Gus cur às do mhearachdan, feumaidh tu na caochladairean a sgrùdadh. Mar sin, dè a th’ ann an nighean? Dè tha girl.named? Gheibh thu a-mach le bhith a’ dèanamh anailis air a’ chòd, a’ taisbeanadh caochladairean a’ cleachdadh console.log, an àithne deasbaid, no a’ gairm an ainm caochlaideach sa chonsail. Feumaidh tu dèanamh cinnteach gu bheil e comasach obrachadh air an t-seòrsa dàta a tha sa chaochladair. Mura h-eil e iomchaidh, atharraich e, mar eisimpleir, cuir suidheachadh ris no feuch..catch block - agus faigh smachd air coileanadh na h-obrach.

Stack overflow

Ma tha thu a’ creidsinn na h-ùghdaran aig faclan an òrain Baby One More Time (is e seo Britney Spears, seadh), tha am facal a bhuail anns a’ cho-theacsa seo a’ ciallachadh miann an t-seinneadair a bhith air a ghairm a-rithist (seo mìneachadh air fìor cho-theacs an òran - nota eadar-theangair). Is dòcha gu bheil am miann seo a’ leantainn gu àrdachadh anns an àireamh de ghlaodhan ann am fìor bheatha. Ach ann am prògramadh, is e ath-chuairt a tha seo a dh’ fhaodadh mearachd adhbhrachadh ma tha an stac gairm a ’dol thairis.

Tha na mearachdan a’ coimhead mar seo:

Mearachd: A-mach às an àite stac (Em)
Mearachd a-staigh: cus ath-chuairteachaidh (Firefox)
RangeError: Chaidh an ìre as àirde de stac gairm thairis (Chrome)

Bidh stac thar-shruth a’ tachairt mura beachdaich an leasaiche air a’ chùis bhunaiteach san ath-chuairt, no mura toir an còd aghaidh air a’ chùis a tha san amharc.

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

Anns a ’chùis seo, chan urrainn fhathast Believe a bhith meallta, mar sin thèid oneMoreTime a ghairm gach uair, ach cha tig an gnìomh gu crìch gu bràth.

Ma thòisicheas tu an urra ri dithis charaidean, lughdaichidh seo aonaranachd, agus cha bhith agad ri feitheamh ri gairm.

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

Is e eisimpleir eisimpleir de chùisean le lùban gun chrìoch, nuair nach cruthaich an siostam teachdaireachd mearachd, ach tha an duilleag air a bheil còd JavaScript air a chuir gu bàs dìreach a ’reothadh. Bidh seo a’ tachairt mura h-eil suidheachadh crìochnachaidh aig an lùb fhad.

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

Faodaidh tu an duilgheadas fhuasgladh mar a leanas:

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

Debugging lùban gun chrìoch agus ath-chuairtean

Ma tha duilgheadas lùb gun chrìoch agad, feumaidh tu an taba ann an Chrome no Edge a dhùnadh, agus uinneag a’ bhrobhsair ann am Firefox a dhùnadh. Às deidh seo, feumaidh tu an còd a sgrùdadh gu faiceallach. Mura h-urrainn dhut an duilgheadas a lorg, is fhiach àithne deasbaid a chuir ris a’ lùb no an gnìomh agad agus sùil a thoirt air luachan nan caochladairean. Mura h-eil an toradh a rèir na bha dùil, an uairsin bidh sinn ga chuir na àite, faodar seo a dhèanamh gu furasta.

Anns an eisimpleir gu h-àrd, bu chòir debugger a chur ris mar a 'chiad loidhne den ghnìomh no lùb. An uairsin feumaidh tu an taba deasbaid fhosgladh ann an Chrome, a’ dèanamh anailis air na caochladairean ann an raon. A’ cleachdadh an ath phutan faodaidh tu sùil a chumail air na h-atharrachaidhean aca le gach tionndadh. Tha seo uile furasta a dhèanamh, agus sa mhòr-chuid de chùisean lorgar an duilgheadas.

Faodaidh tu barrachd a leughadh mu dheidhinn seo uile an seo (airson chrome) agus an seo (airson Firefox).

Mearachd co-chòrdaidh

Is e SyntaxError aon de na mearachdan as cumanta ann an JavaScript. Cuidichidh leudachadh deasaiche teacsa thu gus an seachnadh. Mar eisimpleir, bidh Bracket Pair Colorizer a’ comharrachadh camagan sa chòd le dathan eadar-dhealaichte, agus tha Prettier no inneal sgrùdaidh coltach ris ga dhèanamh comasach mearachdan a lorg gu sgiobalta. Is e glè bheag de neadachadh an roghainn as fheàrr airson an coltas gum bi Mearachd Syntax ann.

Co-roinn anns na beachdan: dè a nì thu gus casg a chuir air mearachdan no lorg agus cuir às dhaibh gu sgiobalta?

Tha Skillbox a’ moladh:

Source: www.habr.com

Cuir beachd ann