acest tutorial vă învață fluxul de lucru de bază pentru depanare Orice problemă JavaScript în DevTools. Citiți mai departe sau urmăriți versiunea video a acestui tutorial, de mai jos.

# Pasul 1: Reproduce bug-ul

găsirea o serie de acțiuni care reproduce în mod constant un bug este întotdeauna primul pas pentru depanare.

1. Faceți Clic Pe Deschidere Demo. Demo-ul se deschide într-o filă nouă.

   deschide Demo

2. introduceți 5 în caseta de text numărul 1.

3. introduceți 1 în caseta de text numărul 2.

4. Faceți clic pe Adăugați numărul 1 și numărul 2. Eticheta de sub buton spune 5 + 1 = 51. Rezultatul ar trebui să fie 6. Acesta este bug-ul pe care îl vei repara.

   

   Figura 1. Rezultatul 5 + 1 este 51. Ar trebui să fie 6.

# Pasul 2: familiarizați-vă cu panoul Surse UI

DevTools oferă o mulțime de instrumente diferite pentru diferite sarcini, cum ar fi schimbarea CSS, profilarea performanței încărcării paginii și monitorizarea cererilor de rețea. Panoul Surse este locul în care depanați JavaScript.

1. deschideți DevTools apăsând Command + Option + i (Mac) sau Control+Shift+I (Windows, Linux). Această comandă rapidă deschide panoul consolei.

   

   Figura 2. Panoul consolei

2. Faceți clic pe fila Surse.

   

   Figura 3. Panoul Surse

interfața de utilizare a panoului surse are 3 părți:

Figura 4. Cele 3 părți ale panoului surse UI

1. Panoul file Navigator. Fiecare fișier solicitat de pagină este listat aici.
2. panoul editorului de cod. După selectarea unui fișier în panoul Navigator fișiere, conținutul fișierului respectiv este afișat aici.
3. Panoul de depanare JavaScript. Diverse instrumente pentru inspectarea JavaScript paginii. DevTools este largă, acest panou este afișat în partea dreaptă a panoului editorului de cod.

# Pasul 3: întrerupeți codul cu un punct de întrerupere

o metodă comună pentru depanarea unei probleme ca aceasta este să inserați o mulțime de instrucțiuni console.log() în cod, pentru a inspecta valorile pe măsură ce scriptul se execută. De exemplu:

function updateLabel() {
var addend1 = getNumber1();
console.log('addend1:', addend1);
var addend2 = getNumber2();
console.log('addend2:', addend2);
var sum = addend1 + addend2;
console.log('sum:', sum);
label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

metoda console.log() poate face treaba, dar punctele de întrerupere o pot face mai repede. Un punct de întrerupere vă permite să întrerupeți codul în mijlocul execuției sale și să examinați toate valorile în acel moment în timp. Punctele de întrerupere au câteva avantaje față de metoda console.log() :

• cu console.log(), trebuie să deschideți manual codul sursă, să găsiți codul relevant, să introduceți instrucțiunile console.log() și apoi să reîncărcați pagina pentru a vedea mesajele din consolă. Cu puncte de întrerupere, puteți întrerupe codul relevant fără să știți chiar cum este structurat codul.
• în instrucțiunile console.log() trebuie să specificați în mod explicit fiecare valoare pe care doriți să o inspectați. Cu puncte de întrerupere, DevTools vă arată valorile tuturor variabilelor în acel moment în timp. Uneori există variabile care afectează codul de care nici măcar nu sunteți conștienți.

pe scurt, punctele de întrerupere vă pot ajuta să găsiți și să remediați erorile mai repede decât metoda console.log().

dacă faceți un pas înapoi și vă gândiți la modul în care funcționează aplicația, puteți face o presupunere educată că suma incorectă (5 + 1 = 51) este calculată în ascultătorul de evenimente click asociat butonului Adăugare număr 1 și număr 2. Prin urmare, probabil că doriți să întrerupeți codul în jurul momentului în care se execută ascultătorul click. Event Listener Breakpoints vă permit să faceți exact asta:

1. în Panoul depanare JavaScript, faceți clic pe event Listener Breakpoints pentru a extinde secțiunea. DevTools dezvăluie o listă de categorii de evenimente extensibile, cum ar fi animație și Clipboard.

2. lângă categoria eveniment Mouse, faceți clic pe extindere . DevTools dezvăluie o listă de evenimente de mouse, cum ar fi click și mousedown. Fiecare eveniment are o casetă de selectare lângă ea.

3. bifați caseta de selectare clic. DevTools este acum configurat pentru a întrerupe automat atunci când orice click ascultător eveniment execută.

   

   Figura 5. Caseta de selectare clic este activată

4. înapoi pe demo, faceți clic pe Adăugați numărul 1 și numărul 2 din nou. DevTools întrerupe demo-ul și evidențiază o linie de cod în panoul Surse. DevTools ar trebui să fie întrerupt pe această linie de cod:

   function onClick() {

   dacă sunteți întrerupt pe o altă linie de cod, apăsați Resume Script Execution până când sunteți întrerupt pe linia corectă.

   Notă: Dacă ați făcut o pauză pe o altă linie, aveți o extensie de browser care înregistrează un ascultător de evenimente click pe fiecare pagină pe care o vizitați. Ai fost întrerupt în extensia click ascultător. Dacă utilizați modul Incognito pentru a naviga în privat, care dezactivează Toate extensiile, puteți vedea că întrerupeți linia corectă de cod de fiecare dată.

event Listener Breakpoints sunt doar unul dintre multele tipuri de breakpoints disponibile în DevTools. Merită să memorați toate tipurile diferite, deoarece fiecare tip vă ajută în cele din urmă să depanați diferite scenarii cât mai repede posibil. Consultați întreruperea Codului cu puncte de întrerupere pentru a afla când și cum să utilizați fiecare tip.

# Pasul 4: Treceți prin codul

o cauză comună a erorilor este atunci când un script se execută în ordinea greșită. Trecerea prin codul dvs. vă permite să parcurgeți execuția codului dvs., o linie la un moment dat și să aflați exact unde se execută într-o ordine diferită de cea așteptată. Încercați acum:

1. în panoul Surse al DevTools, faceți clic pe pas în funcția următoare apel pentru a parcurge execuția funcției onClick(), câte o linie la un moment dat. DevTools evidențiază următoarea linie de cod:

   if (inputsAreEmpty()) {

2. Faceți clic pe pas peste următorul apel de funcție . DevTools execută inputsAreEmpty() fără a intra în ea. Observați cum DevTools omite câteva linii de cod. Acest lucru se datorează faptului că inputsAreEmpty() evaluat la fals, deci blocul de cod al instrucțiunii if nu s-a executat.

aceasta este ideea de bază de pas cu pas prin cod. Dacă vă uitați la codul din get-started.js, puteți vedea că bug-ul este probabil undeva în funcția updateLabel(). În loc să treceți prin fiecare linie de cod, puteți utiliza un alt tip de punct de întrerupere pentru a întrerupe Codul mai aproape de locația probabilă a bug-ului.

# Pasul 5: Setați un punct de întrerupere linie de cod

punctele de întrerupere linie de cod sunt cel mai frecvent tip de punct de întrerupere. Când aveți o anumită linie de cod pe care doriți să o întrerupeți, utilizați un punct de întrerupere a liniei de cod:

1. Uită-te la ultima linie de cod în updateLabel():

   label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;

2. în stânga codului puteți vedea numărul liniei acestei linii de cod, care este 32. Faceți clic pe 32. DevTools pune o pictogramă albastră pe partea de sus a 32. Aceasta înseamnă că există un punct de întrerupere a liniei de cod pe această linie. DevTools acum întotdeauna pauze înainte de această linie de cod este executat.

3. Faceți clic pe Resume script execution . Scriptul continuă să se execute până ajunge la linia 32. Pe liniile 29, 30 și 31, DevTools imprimă valorile addend1, addend2 și sum în dreapta semicolonului fiecărei linii.

   

   Figura 6. DevTools pauze pe linia de cod breakpoint pe linie 32

# Pasul 6: Verificați valorile variabile

valorile addend1, addend2 și sum arată suspect. Sunt înfășurate în citate, ceea ce înseamnă că sunt corzi. Aceasta este o ipoteză bună pentru explicarea cauzei bug-ului. Acum este timpul pentru a aduna mai multe informații. DevTools oferă o mulțime de instrumente pentru examinarea valorilor variabile.

# Metoda 1: Panoul de domeniu

când sunteți întrerupt pe o linie de cod, panoul de domeniu vă arată ce variabile locale și globale sunt definite în prezent, împreună cu valoarea fiecărei variabile. De asemenea, arată variabile de închidere, atunci când este cazul. Faceți dublu clic pe o valoare variabilă pentru ao edita. Când nu sunteți întrerupt pe o linie de cod, Panoul de domeniu este gol.

Figura 7. Panoul de domeniu

# Metoda 2: expresii de vizionare

fila expresii de vizionare vă permite să monitorizați valorile variabilelor în timp. După cum sugerează și numele, expresiile de vizionare nu se limitează doar la variabile. Puteți stoca orice expresie JavaScript validă într-o expresie ceas. Încercați acum:

1. Faceți clic pe fila ceas.

2. Faceți Clic Pe Adăugare Expresie .

3. Tip typeof sum.

4. Apăsați Enter. DevTools arată typeof sum: "string". Valoarea din dreapta colonului este rezultatul expresiei ceasului.

   

   figura 8. Panoul Expresie ceas (dreapta jos), după crearea typeof sum Expresie ceas. DevTools este mare,Panoul Expresie ceas este în dreapta, deasupra panoului puncte de întrerupere a ascultătorului de evenimente.

după cum se suspectează, sum este evaluat ca un șir, când ar trebui să fie un număr. Ați confirmat acum că aceasta este cauza bug-ului.

# metoda 3: Consola

pe lângă vizualizarea mesajelor console.log(), puteți utiliza și consola pentru a evalua declarațiile JavaScript arbitrare. În ceea ce privește depanarea, puteți utiliza Consola pentru a testa potențialele remedieri pentru erori. Încercați acum:

1. dacă nu aveți sertarul consolei deschis, apăsați Escape pentru a-l deschide. Se deschide în partea de jos a ferestrei DevTools.

2. în consolă, tastați parseInt(addend1) + parseInt(addend2). Această declarație funcționează pentru că sunt întrerupte pe o linie de cod în cazul în care addend1 și addend2 sunt în domeniul de aplicare.

3. Apăsați Enter. DevTools evaluează declarația și imprimă 6, care este rezultatul vă așteptați demo pentru a produce.

   

   Figura 9. Sertarul consolei, după evaluarea parseInt(addend1) + parseInt(addend2).

# Pasul 7: aplicați o remediere

ați găsit o remediere pentru eroare. Tot ce a mai rămas este să încercați remedierea dvs. editând codul și reluând demo-ul. Nu aveți nevoie să părăsească DevTools pentru a aplica fix. Puteți edita codul JavaScript direct în DevTools UI. Încercați acum:

1. Faceți clic pe Reluare execuție script .
2. în Editorul de cod, înlocuiți linia 31, var sum = addend1 + addend2, cu var sum = parseInt(addend1) + parseInt(addend2).
3. apăsați Command+s (Mac) sau Control+s (Windows, Linux) pentru a salva modificarea.
4. Faceți clic pe Dezactivare puncte de întrerupere . Se schimbă albastru pentru a indica faptul că este activ. În timp ce acest lucru este setat, DevTools ignoră orice puncte de întrerupere pe care le-ați setat.
5. încercați demo-ul cu valori diferite. Demo-ul calculează acum corect.

Felicitări! Acum știți cum să profitați la maximum de Chrome DevTools atunci când depanați JavaScript. Instrumentele și metodele pe care le-ați învățat în acest tutorial vă pot economisi nenumărate ore.

acest tutorial a arătat doar două moduri de a seta puncte de întrerupere. DevTools oferă multe alte modalități, inclusiv:

• puncte de întrerupere condiționale care sunt declanșate numai atunci când condiția pe care o furnizați este adevărată.
• puncte de întrerupere privind excepțiile capturate sau neprelucrate.
• puncte de întrerupere XHR care sunt declanșate atunci când URL-ul solicitat se potrivește cu un subșir pe care îl furnizați.

consultați întreruperea Codului cu puncte de întrerupere pentru a afla când și cum să utilizați fiecare tip.

există câteva controale pas cu pas de cod care nu au fost explicate în acest tutorial. Consultați Pasul peste linia de cod pentru a afla mai multe.