În calitate de dezvoltatori web, de multe ori simțim că petrecem mai mult timp rezolvând erori și încercând să rezolvăm probleme decât scriem cod. În acest ghid vom analiza câteva tehnici obișnuite de depanare, așa că hai să ne blocăm.

„Nu te pregătești, pregătește-te să eșuezi”

Ce modalitate mai bună de a începe un articol decât cu un clișeu vechi! Problemele și problemele vor apărea. Pur și simplu nu există nicio modalitate de a scăpa de acest lucru (îmi pare rău). Cu o planificare simplă, există modalități prin care putem minimiza complexitatea și numărul problemelor cu care ne confruntăm.

Divizați sarcina în sarcini mai mici

Acum, am înțeles, tuturor ne place să fim foarte încântați și să ne scufundăm direct în proiectele noastre de codificare. Problema este că, fără un fel de plan, ne creăm probleme chiar înainte de a începe!

Dacă ți-aș spune „trebuie să construiești o aplicație pentru lista de cumpărături” și ai începe să codezi imediat, ce s-ar întâmpla? Ați ajunge să vă uitați la un cursor care clipea, întrebându-vă cum sau ce să faceți mai întâi, blestemându-mi numele sub respirație pentru că v-a cerut să faceți o astfel de sarcină.

Este întotdeauna mai ușor să luați o problemă mare și să o împărțiți în multe probleme mai mici. De exemplu, putem împărți proiectul listei de cumpărături în sarcini mai mici:

  • Creați un formular pentru a adăuga un element la listă
  • Permiteți unui utilizator să elimine un element din listă
  • Afișați un număr total de articole din listă

Puteți chiar să împărțiți aceste sarcini în sarcini mai detaliate. De exemplu, pentru prima sarcină din lista noastră, prima noastră „mică sarcină mică” (ar trebui să înscriu termenul respectiv?) Ar putea fi:

1) Creați un câmp de intrare pentru a captura numele articolului

2) Creați un buton care apelează o funcție addToList() când se face clic

3) Scrieți logica în cadrul addToList() funcție care adaugă elementul la listă

Si asa mai departe. Ai ideea. Prefer să rup lucrurile astfel, întrucât mă face să mă gândesc la problemele pe care le voi întâlni din timp și soluțiile (am scris aici un articol detaliat despre asta) înainte să scriu vreun cod. De asemenea, mă ajută să înțeleg ce încerc să fac și mă pune în „zonă”. Este mult mai ușor să rezolvi problemele care apar atunci când înțelegi ce încerci să realizezi.

Fiți pregătit să vă purgeți codul

Pentru a face o omletă, trebuie să rupem câteva ouă. Aceasta înseamnă să fim pregătiți să rescriem complet codul nostru pentru a-l funcționa.

Pun pariu că te gândești, „oh, omule, mi-au trebuit zile / săptămâni / milenii să ajung până aici cu codul meu, iar acum trebuie să îl șterg ?!” Da, da. Uneori. Îmi pare rău. Realitatea dezvoltării web este că codul se va schimba tot timpul, din diverse motive – erori, recenzii de cod, modificări ale cerințelor, plictiseală etc.

Uneori ne simțim atât de prețioși cu privire la codul nostru și nu suportăm să-l ștergem, încât încercăm să depășim problemele încercând să „încadrăm un cuier rotund într-o gaură pătrată”. Credem că “NOO! Nu pot șterge această metodă. M-a luat pentru totdeauna. Trebuie să existe o cale!” Acest bloc mental ne provoacă propriile probleme – pentru că, pur și simplu rescriind ceea ce avem în prezent, am putea găsi soluția la problemele noastre.

Acum, că suntem drăguți și pregătiți, să ne uităm la ce se întâmplă când lucrurile merg prost.

Mesajele de eroare sunt bune

Ce este mai rău decât să vezi un mesaj de eroare când ceva nu merge bine? Nu văd orice mesaj de eroare când ceva nu merge bine. Chiar dacă este o senzație descurajantă să vezi o mare stivă roșie urmărită atunci când rulăm codul nostru elaborat cu atenție, mesajele de eroare sunt acolo pentru a spune „da, lucrurile sunt încurcate chiar acum, dar iată câteva locuri pe care le puteți căuta pentru a începe să le remediați” .

Dacă aruncăm o privire la acest exemplu:

let animals;

function addAnimal(){
	animals.push('elephant');
}

addAnimal();

Acum să aruncăm o privire asupra erorii:

TypeError: Cannot read property 'push' of undefined
at addAnimal (https://vanilla.csb.app/src/index.js:8:11) 
at evaluate (https://vanilla.csb.app/src/index.js:11:1) 
at $n (https://codesandbox.io/static/js/sandbox.acff3316.js:1:148704)
Hmmm da, are sens pentru mine! Multumesc mesaj de eroare! *Față tulburată *

Am lăsat deoparte o parte din urmele stivei, întrucât cea mai mare parte este, ei bine, o tâmpenie. În funcție de modul în care proiectul dvs. frontend gestionează mesajele de eroare, este posibil să vedeți chiar eroarea în browser:

Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi
Uită-te la acea frumusețe a unei erori!

Părțile importante ale urmăririi stivei sunt de obicei în partea de sus – mesajul, funcția și numărul liniei, iar browserul nostru ne arată și acest lucru. Deci, interpretul face cel mai bine să ne spună ce nu este în regulă. Este păcat că nu poate rezolva problema pentru noi, nu?

Așadar, am terminat atacul de panică când am văzut eroarea și am ales câteva informații din mesajul de eroare. Dacă o descompunem, putem vedea această linie:

Cannot read property 'push' of undefined

Acest lucru înseamnă de obicei că există o variabilă nedefinită sau inițializată undeva. DAR UNDE?!?

Dacă continuăm să citim urmele stivei, vedem că eroarea apare în addAnimal() funcţie. Putem vedea că încercăm să împingem un nou animal într-o matrice – ah! Am uitat să inițializez animals matrice. Doh! Codul nostru fix arată astfel:

let animals = [];

function addAnimal() {
	animals.push("elephant");
}

addAnimal();

Eroarea aruncată în browser vă va arăta problema mai repede, dar nu toate proiectele frontend vor fi configurate pentru a face acest lucru, iar dezvoltatorii de backend nu au acest lux. Acesta este motivul pentru care vă recomand să învățați să citiți urmele stivei.

Pentru a învinge bug-ul, trebuie să gândiți ca bug-ul

Urmele stivei vă oferă o idee despre care este eroarea. Ei bine, uneori da și alteori nu. Ce se întâmplă dacă vedeți un mesaj de eroare care seamănă mai mult cu glifele rupestre decât engleza? Sau dacă nu există nicio eroare, dar codul dvs. pur și simplu nu acționează așa cum ați crezut?

Este timpul să scoateți depanatorul. Să trecem printr-un alt exemplu. Dar mai întâi un anumit context!

Domnul Bob CEO (cine este CEO, cine s-ar fi gândit ?!) se apropie de tine și îți spune:

„Hei, am o idee uimitoare pentru un produs.

  • Vreau o aplicație web care să permită utilizatorului să introducă un număr.
  • Dacă numărul este mai mic de 5, mesajul ar trebui să citească „SUB”.
  • Dacă numărul este egal sau mai mare de 5, mesajul ar trebui să citească „PESTE”.

Aceasta este o idee de un milion de dolari și vreau să o construiești pentru mine ”.

“BINE!” Spui și te apuci de treabă.

* Montarea codificării cu muzică dramatică se redă cu timpul înainte înainte *

Ați completat codul pentru aplicația dvs. web. Huzzah!

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>My super awesome number app</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

</head>

<body>
    <input id="number-input"></input> <button id="number-input-submit-button">Submit</button>
    <div id="number-display">0</div>
    <script src="https://www.freecodecamp.org/news/the-beginner-bug-squashing-guide/./index.js" type="text/javascript"></script>
</body>
</html>
Iată glorioasa noastră HTML

(function () {
    const numberInputSubmitButton = document.getElementById("number-input-submit-button")

    numberInputSubmitButton.addEventListener("click", function () {

        const numberInputValue = document.getElementById("number-input").value;

        let text;
        if(numberInputValue > 5) {
            text = "OVER";
        } else {
            text = "UNDER";
        }

        document.getElementById("number-display").innerHTML = text
    });
})();

Și iată JavaScript-ul nostru puțin mai glorios, mai buggy

(Notă: este posibil să fi observat deja eroarea. Dacă ați făcut-o, să ne prefacem că nu ați făcut-o. Dacă nu ați observat eroarea, este în regulă.)

Este timpul pentru a începe testarea. Să analizăm câteva cazuri de utilizare pentru logica noastră de afaceri.

1) Utilizatorul introduce 3:

1611661270 365 Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi

2) Utilizatorul introduce 7

1611661270 634 Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi

Până acum, bine! Dar ce se întâmplă dacă intrăm în 5?

1611661270 791 Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi

OH NU! Un gândac! Textul afișat este incorect, ar trebui să fie afișat „PESTE“dar în schimb afișează”SUB“. Hmm, fără mesaje de eroare, și nu pot să văd în cod ce este greșit. Să rulăm depanatorul și să trecem prin cod.

Folosind depanatorul

1611661270 394 Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi
Rețineți panoul „variabile” din stânga – acesta poate fi un salvator de viață

Un loc bun pentru a începe este să puneți un punct de întrerupere cât mai aproape de codul buggy. Puteți determina acest lucru citind codul, mesajele de eroare sau dacă aveți acel “ah-ha! Știu ce metodă cauzează acest lucru„moment. De aici, este un caz de parcurgere a codului, inspectarea variabilelor și verificarea dacă sunt rulate ramurile codului corect.

În exemplul nostru, am pus un punct de întrerupere la începutul meu if statement – întrucât aici se află logica eșuată.

Odată ce am început depanarea, Chrome se deschide și pot replica problema introducând „5” și făcând clic pe Trimitere. Acest lucru atinge punctul de întrerupere și imediat sunt câteva lucruri de remarcat:

  • Debuggerul se oprește la punctul de întrerupere, deci acest lucru înseamnă că sunt pe drumul cel bun
  • Acest lucru înseamnă, de asemenea, că funcția este apelată corect, iar gestionarele de evenimente funcționează conform așteptărilor
  • De asemenea, văd că datele de intrare ale utilizatorului sunt capturate corect (din panoul „variabile” din partea stângă, pot vedea că a fost introdus „5”)

Până acum, bine, nu există probleme imediate de care să vă faceți griji. Ei bine, oricum sunt legate de cod. Apoi, voi apăsa F10 pentru a trece prin cod. Aceasta rulează fiecare afirmație individual, permițându-ne să inspectăm elemente, variabile și alte lucruri în ritmul nostru. Nu este tehnologia doar fabuloasă?

Amintiți-vă, deoarece mă aștept să apară mesajul „PESTE” atunci când utilizatorul introduce „5”, mă aștept ca depanatorul să mă ducă în prima ramură a instrucțiunii if …

1611661270 941 Ghidul pentru incepatori pentru eliminarea erorilor Cum sa va folositi

DAR NU! Sunt adus în a doua ramură. De ce? Trebuie să modific condiționalul pentru a citi „mai mult sau egal cu ” spre deosebire de “mai mult decât”.

if(numberInputValue >= 5) {
	text = "OVER";
} else {
	text = "UNDER";
}

Succes! Bug-ul nostru a fost remediat. Sperăm că acest lucru vă oferă o idee despre cum să parcurgeți codul, folosind instrumente de depanare minunate VSCodes.

Mai multe sfaturi de depanare

  • Dacă punctele dvs. de întrerupere nu sunt afectate, acest lucru ar putea face parte din problemă. Asigurați-vă că funcțiile corecte sau gestionarele de evenimente sunt apelate așa cum vă așteptați
  • Poti step over funcții pe care doriți să le omiteți. Dacă doriți să depanați orice funcție pe care o întâlniți, utilizați step into comanda
  • Aveți grijă la variabile, parametri și argumente pe măsură ce parcurgeți codul. Valorile sunt ceea ce vă așteptați?
  • Scrieți codul într-un mod mai ușor de citit / depanat. S-ar putea să arate grozav să ai codul pe o singură linie, dar îngreunează depanarea

Google este prietenul tău

Ok, așa că ne-am uitat la urmărirea stivei, am încercat depanarea și suntem încă blocați cu această eroare. Singurul lucru care rămâne de făcut acum este să faceți un sacrificiu zeilor care codifică și să sperăm că lucrurile se vor rezolva singure!

Sau cred că am putea folosi Google.

Google este o comoară a problemelor și soluțiilor de dezvoltare software, toate la îndemâna noastră. Cu toate acestea, poate fi dificil să accesați aceste informații, deoarece trebuie să știți cum să faceți Google lucrurile corecte pentru a obține informațiile corecte! Deci, cum folosim în mod eficient Google?

Să ne uităm înapoi la primul nostru exemplu – ați citit urmele stivei, ați analizat codul, dar mesajul Cannot read property 'push' of undefined încă te înnebunește. Uimit, mergi la Google în speranța că vei găsi un răspuns. Iată câteva lucruri de încercat:

Copiați și lipiți mesajul de eroare. Uneori, acest lucru funcționează, în funcție de cât de generic este mesajul de eroare. De exemplu, dacă primiți un Excepția indicatorului nul (cine nu-i iubește?) Este posibil ca Google „Excepția indicatorului nul” să nu dea rezultate foarte utile.

Căutați ceea ce încercați să faceți. De exemplu, „Cum se creează o matrice și se adaugă un element la final”. S-ar putea să găsiți că un dezvoltator generos a postat o soluție folosind cele mai bune practici pe StackOverflow, de exemplu. S-ar putea să găsiți, de asemenea, că această soluție este complet diferită de a dvs. – vă amintiți ce am spus despre faptul că vă simțiți confortabil să vă purgeți codul?

O notă secundară despre utilizarea codului altcuiva – încercați să evitați copierea și lipirea orbește, asigurați-vă că înțelegeți mai întâi ce face codul!

Solicitați ajutor în mod corect

Sperăm că, după un amestec de depanare, investigarea urmelor stivei și Google, ați văzut lumina la capătul tunelului și v-ați rezolvat problema. Din păcate, în funcție de ceea ce încercați să faceți, s-ar putea să fiți încă un pic nebuni. Acesta este un moment bun pentru a cere sfaturi de la alte persoane.

Acum, înainte de a fugi pe stradă strigând „codul meu este rupt, vă rog să mă ajutați!”, Este important să cunoașteți cel mai bun mod de a cere ajutor. Solicitarea ajutorului în modul corect facilitează înțelegerea problemei de către oameni și te ajută să o rezolvi. Să vedem câteva exemple:

Rău – „Codul meu este rupt și nu știu ce e în neregulă”.

Bun – „Încerc să adaug un element la sfârșitul unui tablou în JavaScript și primesc acest mesaj de eroare: Nu se poate citi proprietatea„ push ”din nedefinit. Iată codul meu de până acum.”

Vedeți cum exemplul „Bun” este mult mai informativ? Mai multe informații fac mai ușor pentru alți dezvoltatori cu inimă bună să vă ajute. Acesta este un obicei bun de a te înțelege, deoarece nu numai că te avantajează atunci când înveți să codezi, ci și în primul loc de muncă când trebuie să ceri ajutor.

Deci, unde poți cere ajutor?

  • StackOverflow
  • Stare de nervozitate
  • Grupuri slabe
  • Colegi sau prieteni dezvoltatori

Sfat rapid: puteți utiliza un instrument precum CodeSandbox.io sau CodePen.io pentru a vă recrea problema și a o împărtăși oamenilor.

Practică, practică, practică

Așa cum Roma nu a fost construită într-o zi (ei bine, ar fi putut fi pentru tot ce știu), nu veți deveni rege squash squasher peste noapte. Pe măsură ce cariera ta continuă și experiența ta crește, vei fi înarmat cu o bogăție de cunoștințe care te ajută să rezolvi mai repede erorile și problemele. În mod regulat mă trezesc spunând „ah, am rezolvat asta înainte” sau „oh, da, am un link StackOverflow care mă ajută aici” și totul devine mult mai ușor. Așadar, continuați să exersați și această abilitate va crește în mod natural.

Mulțumesc pentru lectură! Dacă ți-a plăcut acest articol, de ce să nu vă abonați la newsletter-ul meu?

În fiecare săptămână trimit un lista a 10 lucruri Cred că merită să le împărtășesc – ultimele mele articole, tutoriale, sfaturi și linkuri interesante pentru viitorii dezvoltatori ca tine. De asemenea, dau din când în când câteva lucruri gratuite 🙂