Tot ce trebuie să știți despre Consola pentru dezvoltatori

Un bun profesionist își cunoaște instrumentele. Unul dintre principalele instrumente pe care dezvoltatorii WordPress le au la dispoziție este consola pentru dezvoltatori JavaScript inclusă în browserele noastre. În această postare, vom vedea tot ce trebuie să știi despre consola pentru dezvoltatori de browser, alături de câteva trucuri și curiozități despre care, poate, nu știai.

Cum se accesează Consola pentru dezvoltatori

În primul rând: să vedem cum puteți deschide consola pentru dezvoltatori a browserului dvs. Dacă sunteți utilizator Firefox, faceți clic pe meniu (colțul din dreapta sus) și căutați opțiunea Web Developer , după cum puteți vedea mai jos:

Apoi, selectați Consola web :

iar consola va apărea în browser, așa cum puteți vedea în următoarea captură de ecran. Amintiți-vă că este posibil să configurați unde doriți să apară exact panoul. Puteți chiar să îl setați să apară într-o fereastră separată (ceea ce este destul de util dacă utilizați mai multe monitoare).

Dacă, pe de altă parte, ești utilizator Chrome, procedura este foarte asemănătoare. Accesați meniul acestuia, selectați Mai multe instrumente și apoi Instrumente pentru dezvoltatori :

Cum să utilizați Consola pentru dezvoltatori

Consola JavaScript a browserului nostru este extrem de utilă pentru a depana codul nostru, pentru a vedea ce înregistrează scripturile noastre și pentru a rula comenzi mici și pentru a vedea efectele lor pe web în timp real. În calitate de dezvoltator de pluginuri pentru WordPress, principala utilitate pe care o are consola pentru mine este evident depanarea, așa că haideți să vedem în detaliu ce oferă mai exact.

# 1 Diferite niveluri de jurnal

Primul motiv pentru care un dezvoltator deschide de obicei consola JavaScript este să-și depaneze codul. Când apare o eroare sau ceva nu funcționează, probabil veți găsi câteva informații despre aceasta în consolă. Puteți chiar să lansați propriile mesaje informaționale, avertismente sau erori atunci când doriți!

În captura de ecran anterioară, de exemplu, vedem că obiectul console (obiect global al cărui scop este să ne ajute să depanăm codul) are diferite metode de scriere a mesajelor în consolă:

• debug și log arată mesaje simple.
• info arată mesaje informative. În Firefox afișează o pictogramă „informații” lângă mesaj.
• warn afișează avertismente, subliniind de obicei o problemă sau ceva care nu este în regulă. De obicei, este evidențiată cu galben și cu o pictogramă de avertizare.
• error este de obicei rezervată pentru cele mai grave erori (adică lucruri care au eșuat cu adevărat). Este afișat cu roșu și, de asemenea, tipărește o urmă de stivă (adică ce funcție a generat eroarea și toți cei care apelează).

Avantajul utilizării diferitelor niveluri de jurnal este că putem alege în orice moment ce mesaje dorim să fie afișate. De exemplu, în următoarea captură de ecran am dezactivat mesajele Info și Debug :

#2 Monitorizarea timpilor de execuție

În agil, veți auzi adesea acest lucru: „fă-l să funcționeze, fă-l bine, fă-l repede”. După ce ați scris un cod „pentru a-l face să funcționeze”, nu este puțin probabil ca rezultatul să fie lent și ineficient. Când se întâmplă acest lucru, este important să identificați unde sunt blocajele și să le abordați.

Deși există instrumente precum profilerii pentru a găsi vinovații și a înțelege exact ce se întâmplă sub capotă în detaliu, uneori ne dorim o soluție „rapidă și murdară”. Adică, vrem pur și simplu să identificăm cea mai lentă funcție din codul nostru... iar cronometrele simple sunt grozave la această sarcină!

Dacă doriți să știți cât durează o anumită bucată de cod pentru a rula, porniți un cronometru la începutul codului ( console.time ) și opriți-l ( console.timeEnd ) când codul se termină:

 console.time( 'Timer' ); // code we want to monitor... console.timeEnd( 'Timer' );

Când codul ajunge la timeEnd , veți vedea timpul necesar pentru a rula:

 Timer: 655ms - timer ended

Observați că atunci când pornim și oprim un cronometru, îi dăm un nume (în exemplul meu, „Timer”). Acest lucru se datorează faptului că putem crea oricâte contoare dorim, fiecare cu propriul nume, și să le avem pe toate simultan.

# 3 Contoare automate

Dacă sunteți interesat să controlați numărul de execuții ale oricărei funcții din codul dvs. sau să înregistrați numărul de rulări ale unei bucle, utilizați console.count . De fiecare dată când funcția este executată, veți primi un nou log în consola dvs. cu valoarea curentă a contorului:

#4 Cum să vă formatați jurnalele

Jurnalele sunt aici pentru a ne ajuta să înțelegem ce se întâmplă cu codul nostru. Dar acest lucru este posibil doar dacă scriem jurnalele pe care le putem înțelege mai târziu...

Șiruri de text

La începutul acestei postări, am vorbit pe scurt despre toate metodele de jurnal pe care le are console . Exemplele pe care le-am distribuit au tipărit un text simplu. Adică această afirmație:

 console.log( 'Hello world!' );

a tipărit acest text:

 Hello world!

Ce se întâmplă dacă am vrea să tipărim un obiect? Ei bine, asta:

 obj = { x: 1, y: { a: 'hola' } }; console.log( obj );

devine acesta:

Dar dacă vrem să înregistrăm mai multe lucruri? Trebuie să folosim mai multe apeluri către console.log ? Ei bine, răspunsul este nu, nu este necesar. Putem înregistra tot ce ne dorim cu un singur apel:

Gruparea jurnalelor...

Când începem să avem o mulțime de jurnale în codul nostru (cum ar fi, de exemplu, aici):

rezultatul poate ajunge să fie puțin confuz, deoarece toate jurnalele sunt îmbinate într-un singur flux de text:

 Retrieving x... Retrieving y... Compute result using 2 and 3 Getting max value Result is 6

Din fericire, obiectul console oferă câteva metode pentru a rezolva această problemă: group și groupEnd . Cu ele, putem grupa mesajele noastre de jurnal. Doar creați grupurile (de exemplu, un grup per funcție):

și vor apărea așa:

Mese

Când lucrăm cu colecții de date, nu este întotdeauna ușor să le vizualizăm. De exemplu, imaginați-vă că avem o listă de elemente precum următoarele:

 data = [ { id: 1, name: 'David', surname: 'Aguilera' }, { id: 2, name: 'Ruth', surname: 'Raventos' }, { id: 3, name: 'Antonio', surname: 'Villegas' }, ];

Dacă le console.log , iată ce obținem:

care este mai mult sau mai puțin OK, până când avem mai multe obiecte cu mai multe câmpuri fiecare. Când vă confruntați cu acest tip de structură de date, vă recomand să utilizați console.table pentru a-l înregistra:

#5 Cum să afișați corect tipurile complexe (obiecte și matrice)

În sfârșit, aș dori să închei postarea de astăzi cu ceva despre care nu mulți dezvoltatori știu... Să spunem, de exemplu, că lucrezi la un proiect și vrei să vezi care este valoarea unui obiect înainte și după actualizarea acestuia. Pentru a face acest lucru, este probabil că veți console.log variabila înainte de a face modificarea și apoi, așa cum vedeți în următorul GIF:

În exemplul anterior, înregistrăm un obiect care conține o valoare setată la 1. Apoi actualizăm valoarea la 200 și înregistrăm din nou obiectul. Ne-am aștepta ca primul log să arate întotdeauna valoarea inițială (1), dar observați cum, atunci când extindem obiectul, acesta arată de fapt noua valoare 200. Ce se întâmplă?

Practic, un mesaj de jurnal are o referință la obiect și, prin urmare, atunci când îl extindem, ne arată obiectul așa cum este acum și nu așa cum era când a fost făcut jurnalul. Al naibii de mutabilitate!

Pentru a rezolva această problemă, trimiteți doar o copie în jurnal (bibliotecile precum lodash și metoda sa cloneDeep fac acest lucru foarte ușor). În acest fel, primul obiect înregistrat va fi o copie care nu poate fi mutată (pentru că nu veți avea o referință la el):

Și asta e tot pentru azi! Sper că v-a plăcut această postare. Dacă doriți mai multe informații despre tot ce puteți face cu console , consultați documentația din MDN. Nu uitați să o împărtășiți cu prietenii dvs.? Și dacă faci ceva diferit sau ai vreun sfat de împărtășit cu cititorii noștri, lasă-ne un comentariu?

Imaginea remarcată pe Tim van der Kuip pe Unsplash.