Depanare JavaScript în browser (cu exemple)

În acest tutorial, veți afla despre depanarea în JavaScript cu ajutorul exemplelor.

Puteți întâlni și veți întâlni erori în timp ce scrieți programe. Erorile nu sunt neapărat rele. De fapt, de cele mai multe ori, ele ne ajută să identificăm problemele legate de codul nostru. Este esențial să știți cum să depanați codul și să remediați erorile.

Depanarea este procesul de examinare a programului, găsirea erorii și remedierea acestuia.

Există diferite moduri în care vă puteți depana programul JavaScript.

1. Utilizarea console.log ()

Puteți utiliza console.log()metoda pentru a depana codul. Puteți trece valoarea pe care doriți să o verificați în console.log()metodă și să verificați dacă datele sunt corecte.

Sintaxa este:

 console.log(object/message);

Puteți trece obiectul console.log()sau pur și simplu un șir de mesaje.

În tutorialul anterior, am folosit console.log()metoda de imprimare a rezultatului. Cu toate acestea, puteți utiliza această metodă și pentru depanare. De exemplu,

 let a = 5; let b = 'asdf'; let c = a + b; // if you want to see the value of c console.log(c); // then do other operations if(c) ( // do something )

Utilizarea console.log()metodei în browser deschide valoarea în fereastra de depanare.

Funcționarea metodei console.log () în browser

Nu console.log()este specific browserelor. Este disponibil și în alte motoare JavaScript.

2. Utilizarea depanatorului

Cuvântul debuggercheie oprește executarea codului și apelează funcția de depanare.

Este debuggerdisponibil în aproape toate motoarele JavaScript.

Să vedem un exemplu,

 let a = 6; let b = 9; let c = a * b; // stops the execution debugger; console.log(c);

Să vedem cum puteți utiliza depanatorul într-un browser Chrome.

Funcționarea depanatorului în browser

Programul de mai sus întrerupe executarea programului în linia care conține debugger.

Apoi puteți relua controlul fluxului după examinarea programului.

Restul codului se va executa atunci când reluați scriptul apăsând redare în consolă.

Funcționarea depanatorului în browser

3. Setarea punctelor de întrerupere

Puteți seta puncte de întrerupere pentru codul JavaScript în fereastra de depanare.

JavaScript va înceta să se execute la fiecare punct de întrerupere și vă permite să examinați valorile. Apoi, puteți relua executarea codului.

Să vedem un exemplu setând un punct de întrerupere în browserul Chrome.

Funcționarea punctelor de întrerupere în browser

Puteți seta puncte de întrerupere prin instrumentul Dezvoltatori oriunde în cod.

Setarea punctelor de întrerupere este similară cu introducerea unui depanator în cod. Aici, doar setați punctele de întrerupere făcând clic pe numărul liniei codului sursă în loc să apelați manual funcția de depanare.

În metodele de mai sus, am folosit browserul Chrome pentru a arăta procesele de depanare pentru simplitate. Cu toate acestea, nu este singura dvs. opțiune.

Toate IDE-urile bune vă oferă o modalitate de a depana codul. Procesul de depanare poate fi puțin diferit, dar conceptul din spatele depanării este același.

Articole interesante...