Упс, го направив тоа повторно: Дебагирање вообичаени грешки во JavaScript

Пишувањето JavaScript код може да биде предизвикувачко, а понекогаш и целосно застрашувачко, како што многу програмери се запознаени. Во процесот на работа, неизбежно се појавуваат грешки, а некои од нив често се повторуваат. Оваа статија, наменета за почетници програмери, зборува за овие грешки и како да ги решите. За јасност, имињата на функциите, својствата и објектите се преземени од популарна песна. Сето ова ви помага брзо да запомните како да ги исправите вообичаените грешки.

Потсетуваме: за сите читатели на „Хабр“ - попуст од 10 рубли при запишување на кој било курс Skillbox користејќи го промотивниот код „Хабр“.

Skillbox препорачува: Практичен курс „Програма за мобилни програмери“.

Type Error: својството не е дефинирано

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)

Кодот на примерот погоре ја фрла грешката Нефатен TypeError: Не можам да го прочитам својството 'lucky' од недефинирано. Проблемот е што објектот девојка нема именуван имот, иако има својство на име. И бидејќи имотот girl.named не е дефиниран, не можете да пристапите до него, бидејќи формално не постои. Но, ако го замените girl.named.lucky со girl.name, тогаш сè ќе функционира и програмата ќе го врати Lucky.

Можете да дознаете повеќе за својствата прочитај тука.

Како да ги решите Type Errors

Грешки во типот се појавуваат кога програмерот се обидува да изврши дејства на податоци што не се совпаѓаат со одреден тип. Примерите вклучуваат користење .bold(), барање недефинирано својство или повикување функција која всушност не е функција.

Значи, ако се обидете да повикате girl(), ќе ја добиете грешката Uncaught TypeError: yourVariable.bold не е функција, а girl не е функција, бидејќи тоа е всушност објект што се повикува, а не функција.

За да ги елиминирате грешките, треба да ги проучите променливите. Значи, што е девојка? Што е девојче.именувано? Можете да дознаете со анализа на кодот, прикажување на променливи користејќи console.log, команда за дебагер или повикување на името на променливата во конзолата. Треба да бидете сигурни дека е можно да се работи на типот на податоци содржан во променливата. Ако не одговара, сменете го, на пример, додајте услов или обидете се..catch block - и добијте контрола над извршувањето на операцијата.

Прелевање на магацинот

Ако им верувате на авторите на текстот на песната Baby One More Time (ова е Бритни Спирс, да), тогаш зборот хит во овој контекст значи желба на пејачот повторно да биде повикан (еве објаснување за самиот контекст на песна - белешка на преведувачот). Можеби оваа желба ќе доведе до зголемување на бројот на повици во реалниот живот. Но, во програмирањето, ова е рекурзија што може да предизвика грешка ако стекот на повици се прелее.

Грешките изгледаат вака:

Грешка: нема простор во магацинот (раб)
Внатрешна грешка: премногу рекурзија (Firefox)
Грешка во опсег: надмината е максималната големина на оџакот на повици (Chrome)

Прелевање на стек се случува ако развивачот не го земе предвид основниот случај во рекурзијата или ако кодот не се однесува на наменетиот случај.

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

Во овој случај, stillBelieve никогаш не може да биде лажен, така што oneMoreTime ќе се повикува секој пат, но функцијата никогаш нема да заврши.

Ако почнете да се потпирате на двајца пријатели, ова ќе ја намали осаменоста и нема да мора да чекате за повик.

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

Пример се случаите со бесконечни циклуси, кога системот не генерира порака за грешка, но страницата на која се извршува кодот JavaScript едноставно се замрзнува. Ова се случува ако јамката while нема услов за завршување.

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

Можете да го решите проблемот на следниов начин:

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

Дебагирање на бесконечни јамки и рекурзии

Ако имате проблем со бесконечна јамка, треба да го затворите јазичето во Chrome или Edge и да го затворите прозорецот на прелистувачот во Firefox. По ова, треба внимателно да го анализирате кодот. Ако не можете да го најдете проблемот, вреди да додадете команда за дебагер во вашата јамка или функција и да ги проверите вредностите на променливите. Ако резултатот не одговара на очекуваното, тогаш го заменуваме, ова може лесно да се направи.

Во горниот пример, дебагерот треба да се додаде како прва линија на функцијата или циклусот. Потоа треба да го отворите јазичето за отстранување грешки во Chrome, анализирајќи ги променливите во обем. Користејќи го следното копче, можете да ги следите нивните промени со секое повторување. Сето ова е лесно да се направи, а во повеќето случаи проблемот се наоѓа.

Повеќе за сето ова можете да прочитате овде (за Хром) и тука (за Firefox).

Грешка во синтаксата

Една од најчестите грешки во JavaScript е SyntaxError. Екстензии за уредувач на текст ќе ви помогнат да ги избегнете. На пример, Bracket Pair Colorizer ги означува заградите во кодот со различни бои, а Prettier или слична алатка за анализа овозможува брзо пронаоѓање на грешки. Најдобрата опција за намалување на веројатноста за синтаксна грешка е минималното вгнездување.

Споделете во коментарите: што правите за да спречите грешки или брзо да ги откриете и отстраните?

Skillbox препорачува:

• Двегодишен практичен курс „Јас сум PRO веб-развивач“.
• Онлајн курс „C# програмер од 0“.
• Практичен годишен курс „Програмер на PHP од 0 до PRO“.

Извор: www.habr.com