Învață cum să depanezi JavaScript cu Chrome DevTools

646×404
0

Ca un dezvoltator nou, găsirea și repararea erorilor poate fi dificilă. Poți fi tentat de utilizarea aleatorie console.log() în încercarea să faci codul să funcționeze corect.

Acest articol este despre modul de depanare corect! Vei învăța cum să folosești Chrome Developer Tools pentru ați seta breakpoint-urile și pentru a trece prin codul tău. Fluxul de muncă este deseori o cale mult mai eficientă pentru a găsi și repara erorile în codul tău.

Acest tutorial îți arată cum să depanezi o eroare specifică, dar fluxul de muncă general pe care l-ai învățat este de ajutor pentru depanarea tuturor tipurilor de erori JavaScript.

Pasul 1 : reproducerea erorilor

Reproducerea erorilor este întotdeauna primul pas pentru depanare. A reproduce eroarea înseamnă să găsești o serie de acțiuni care în mod constat cauzează eroarea să apară. Poate vei avea nevoie să reproduci eroarea de mai multe ori, așa că încearcă să elimini câțiva pași neimportanți.

Urmează instrucțiunile de mai jos pentru a reproduce eroarea pe care o vei repara în acest tutorial.

  • Aici este site-ul cu care vom lucra în acest tutorial. Fii sigur să deschizi pagina într-o fereastră nouă.
  • În demo, introdu 5 pentru number 1
  • Introdu 1 pentru number2
  • Clic pe adaugă number 1 și number 2
  • Uită-te la tabelul de mai jos la comentariu și buton. Spune că 5+1=51

Ops. Rezultatul este greșit. Rezultatul ar trebui să fie 6. Aceasta este eroare pe care o vei repara.

Pasul 2: stopează codul cu breakpoint-uri

DevTools te lasă să stopezi codul în mijlocul execuției sale și să examinezi valorile tuturor variabilelor în același moment. Instrumentul de stopare pentru codul tău este breakpoint. Încearcă acum:

  • Du-te înapoi la demo și deschide DevTools prin apăsarea Command+Option+I (Mac) sau Control +Shift +I (Windows, Linux).
  • Clic pe tabelul sursei
  • Clic pe Event Listener Breakpoints pentru a extinde secția. DevTools dezvăluie o listă de categorii expandabile de evenimente, precum Animation și Clipboard.
  • Lângă categoria evenimentului Mouse, clic Expand
  • Verifică click-ul în checkbox.

Înapoi la demo, clic add number 1 și number 2 din nou. DevTools stopează demo-ul și evidențiază o linie din cod în panoul sources. DevTools evidențiază această linie din cod:

function onClick() {

De ce?

Când selectezi click, setezi un eveniment bazat pe breakpoint-uri pe toate evenimentele click. Când orice nod este apăsat, și acest nod are un click handler, DevTools automatic stopează pe prima linie a click handlerul nodului.

Pasul 3: mersul prin cod.

O cauză comună a erorilor este când un script se execută în ordinea greșită. Mergând prin codul tău îți permite să parcurgi execuția codului tău, o linie la timp și să realizezi exact unde se execută într-o modalitate diferită decât te aștepți. Încearcă acum:

  • Pe panoul source a DevTools, click step into next function call

Acest buton îți permite să mergi prin execuția funcției onclick(), câte o linie. Finalizează când DevTools evidențiază următoarea linie de cod:

If (inputsAreEmpty()) {

  • Acum fă click pe step over next function call buton:

Acesta spune DevTools să execute inputsareempty() fără a intra în esență. Observă cum DevTools sare peste câteva linii de cod. Aceasta este din cauză că inputsareempty() evoluează greșit, așadar raportul if al blocării de cod nu sa executat.

Aceasta este idea de bază de a parcurge codul. Dacă te uiți la cod în get-starede.js, poți vedea că această eroare este probabil undeva în funcția updatelabel (). Decât să pășești prin fiecare linie de cod, poți utiliza un alt tip de breakpoint pentru a stopa codul aproape de locația erorii.

Pasul 4: setează alt breakpoint

Linia de cod breakpoint are cele mai comune tipuri de breakpoint. Când ai ceva specific liniei de cod pe care vrei să pui pauză, folosește o linie de cod breakpoint, încearcă acum:

  • Uită-te la ultima linie a codului în updatelabel(), care arată așa:

Label.textContent=addend1+’+’+addend2+’=’+sum;

În partea stângă a acestui cod, puteți vedea numărul liniei respectivei linii de cod: 32. Faceți clic pe 32. DevTools pune o pictogramă albastră peste 32. Aceasta înseamnă că există un punct de întrerupere a liniei de cod în această linie. DevTools se opresc întotdeauna înainte de executarea acestei linii de cod.

 

  • Faceți click pe butonul Executare script:

Scriptul continuă să fie executat până când găsește linii de cod pe care ai adăugat un breakpoint.

  • Uită-te la liniile de cod în updatelabel() care deja le-ai executat. DevTools imprimă valorile a addend1, addend2 și sum.

Valoarea sum arată suspicios. Se poate că a fost evaluat ca string, când ar trebui să fie un număr. Aceasta poate cauza eroare.

Pasul 5 : verifică valorile variabilei

O altă cauză comună a erorilor este când variabilele sau funcția produce o valoare diferită decât cea așteptată. Mulți dezvoltatori folosesc console.log() pentru a vedea cum valorile se schimbă cu timpul, dar console. Log () poate fi anostă și ineficientă din două motive. Primul, poți avea nevoie să editezi manual codul tău cu o mulțime de chemări de console. Log() . Doi, poți să nu știi exact care variabilă este legată de erori, așa că poți avea nevoie să dezauntentifici multe variabile.

O alternativă DevTools pentru console.log() este watch expressions, utilizează watch expressions pentru a monitoriza valoarea variabilelor cu timpul. Cum numele implică, watch expressions nu este doar limitată variabilelor. Poți depozita orice expresie validă JavaScript într-o watch expression. Încearcă acum:

  • Pe panoul source a DevTools, click watch. Secția se extinde
  • Click add expression
  • Tapează typeof sum.
  • Apasă enter. DevTools arată typeof sum : sting. Valoarea din dreapta coloanei este rezultatul watch expression.

Precum suspectat, sum este evaluat de string, când ar trebui să fie un număr. Aceasta este din cauza erorii demo.

A doua alternativă a DevTools pentru console.log() este consola. Utilizează consola pentru a evalua în mod arbitrat raportul JavaScript. Dezvoltatorii în mod comun utilizează consola pentru a rescrie valorile variabilei când depanează. În cazul tău, consola te poate ajuta să testezi potențialele reparații pentru erori pe care le-ai descoperit. Încearcă acum:

  • Dacă nu ai sertarul consolei deschis, apasă Escape pentru a-l deschide. Se va deschide la sfârșitul ferestrei tale DevTools.
  • În consolă, tapează parseint(addend1) + parseint (addend2).
  • Apasă enter. DevTools evaluează raportul și imprimă 6, care este rezultatul pe care îl aștepți ca demo-ul să îl producă.

Pasul 6 : aplică o reparație

Ai identificat o potențială reparație pentru erori. Și tot ce ți-a rămas este să încerci  reparația ta prin editarea codului și derularea demo-ului. Nu este nevoie să lași DevTools să aplice reparația. Poți edita codul JavaScript direct fără DevTools. Încearcă acum:

  1. În codul editorului pe panoul sources a DevTools, înlocuiește var sum = addende1+ addend 2 cu var sum = parseint (addend1) +pareint (addend 2). Aceasta este singura linie în care poți pune pauză.
  2. Apasă Command+S (Mac) sau Control +S (Windows Linux) pentru a salva schimbarea. Fundalul de cod se schimbă în roș pentru a indica că scriptul a fost schimbat prin DevTools.
  3. Click deactivate breakproints.

Se schimbă în albastru care este activ. În timp ce este setat, DevTools ignoră orice breakpoint pe care l-ai setat.

  • Click resume script execution

Încearcă demo-ul cu diferinte valori. Demo-ul ar trebui acum să calculeze sumele corecte.

 

 

Bloguri relevante