Debugging și debugger
În general, procesul de debug reprezintă identificarea și remedierea erorilor și bug-urilor dintr-un program. Pentru a efectua debug-ul, se utilizează o unealtă specială - un debugger. Însă în afara căutării bug-urilor și erorilor, procesul de debug și debugger-ul oferă o modalitate excelentă de înțelegere a fluxului și execuției programului, acțiunile care au loc în cadrul său, cum aceste acțiuni sunt executate în program și, în cele din urmă, îmbogățirea abilităților și înțelegerii dezvoltării.
În ceea ce privește debuggerele pentru programele scrise în limbajul JavaScript, le putem utiliza pe cele încorporate în browserele web. Multe browsere web comune oferă facilități de debug. În acest caz, pentru debug, vom folosi debugger-ul încorporat în Chrome DevTools, deoarece Google Chrome este cel mai răspândit browser. Cu toate acestea, lucrul cu debuggere în alte browsere va fi în mare măsură similar.
Să analizăm următorul program:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script>
const numbers = [5, 3, 6, 2, 5, 1];
for(let i=0; i < numbers.length-1; i++){
for(let j=i+1; j < numbers.length; j++){
if(numbers[i] > numbers[j]){
const temp = numbers[j];
numbers[j] = numbers[i];
numbers[i] = temp;
}
}
}
console.log("numbers:", numbers);
</script>
</body>
</html>Aici, în codul JavaScript, este definită o simplă sortare a unui array de numere. În primul rând, într-un ciclu cu i, trecem prin toate elementele array-ului până la ultimul (fără a-l include), și comparăm elementul curent de la i cu toate elementele ulterioare într-un ciclu cu j. Dacă unul dintre elementele ulterioare (numbers[j]) este mai mic decât elementul curent (numbers[i]), atunci le interschimbăm pozițiile.
După ce am comparat elementul curent numbers[i] cu toate cele ulterioare (numbers[j]) și am plasat cel mai mic element în numbers[i], creștem valoarea lui i și trecem la compararea următorului element cu toate cele ulterioare.
Pentru a examina în detaliu cum programul sortează array-ul, vom utiliza depanarea (debugging). Pentru aceasta, vom încărca pagina cu cod JavaScript în Google Chrome și vom accesa instrumentele de dezvoltare (se poate face cu combinația de taste Ctrl+Shift+I). Apoi, în panoul instrumentelor de dezvoltare, vom deschide fila Sources.
Și în meniul stâng de tip arbore, vom găsi fișierul în care avem codul JavaScript (în cazul meu, este pagina web index.html). Acest fișier va fi deschis în partea centrală.
Setarea punctelor de oprire
Pentru a avea posibilitatea de a inspecta programul într-o anumită linie de cod, trebuie să setăm un punct de oprire (breakpoint) pe acea linie. În Chrome DevTools, este suficient să facem clic pe numărul liniei dorite. După ce am setat punctul de oprire, linia de cod va fi marcată cu o etichetă albastră:
Așadar, în captura de ecran se poate vedea că am setat un punct de oprire în fișierul index.html la linia 9:
const numbers = [5, 3, 6, 2, 5, 1];Ca alternativă, puteți face clic pe numărul liniei de cod și, în meniul contextual care apare, puteți alege opțiunea "Add breakpoint" pentru a seta un punct de oprire în linia specificată.
Pentru a șterge un punct de oprire, este suficient să faceți clic pe eticheta albastră de pe numărul liniei.
Dacă reîmprospătați pagina în browser, la executarea codului JavaScript, programul se va opri la punctul de oprire setat:
Și în acest punct, putem investiga starea programului în momentul curent.
Când programul se oprește la un punct de oprire, putem vedea o parte din informații direct lângă codul sursă al fișierului, de exemplu, trecând cu mouse-ul peste variabila pe care o dorim, vom vedea valoarea acesteia.
u toate acestea, pentru informații mai detaliate, este destinată coloana din dreapta, unde putem vedea valorile curente ale variabilelor globale și locale, valorile parametrilor, stiva apelurilor funcțiilor și alte informații:
De exemplu, din captura de ecran de mai sus se poate observa că în prima execuție a liniei 9, valoarea array-ului `numbers` este de (5, 3, 6, 2, 5, 1)..
Cu ajutorul butoanelor de deasupra coloanei din dreapta, puteți controla fluxul de depanare:
Prin urmare, putem seta multiple puncte de oprire și să explorăm detaliat execuția programului.
În plus față de punctele de întrerupere(oprire) obișnuite, Chrome DevTools permite setarea altor tipuri de puncte de întrerupere. Punctele de întrerupere condiționate permit oprirea execuției programului dacă este îndeplinită o anumită condiție..
Punctele de întrerupere DOM permit oprirea execuției atunci când conținutul dinamic al paginii web este modificat. Punctele de întrerupere ale handlerelor de evenimente permit oprirea execuției dacă anumite evenimente ale paginii web au loc. Punctele de întrerupere XHR permit oprirea programului în timpul efectuării unei cereri Ajax. Astfel, putem examina în detaliu diverse aspecte ale funcționării programului.