Cum se utilizează consola JavaScript: mergând dincolo de console.log ()

Una dintre cele mai simple modalități de depanare a oricărui lucru în JavaScript este prin înregistrarea lucrurilor folosind console.log. Dar există o mulțime de alte metode furnizate de consolă care vă pot ajuta să depanați mai bine.

Să începem.

Cazul de utilizare foarte de bază este să înregistrați un șir sau o grămadă de obiecte JavaScript. Pur și simplu,

console.log('Is this working?');

Acum, imaginați-vă un scenariu când aveți o grămadă de obiecte de care trebuie să vă conectați la consolă.

const foo = { id: 1, verified: true, color: 'green' };const bar = { id: 2, verified: false, color: 'red' };

Cel mai intuitiv mod de a înregistra acest lucru este doar console.log(variable)unul după altul. Problema este mai evidentă când vedem cum apare pe consolă.

După cum puteți vedea, nu sunt vizibile nume de variabile. Devine extrem de enervant atunci când aveți o grămadă de acestea și trebuie să extindeți săgeata din stânga pentru a vedea care este exact numele variabilei. Introduceți numele proprietăților calculate. Acest lucru ne permite, practic, să grupăm toate variabilele într-o singură, console.log({ foo, bar });iar rezultatul este ușor vizibil. Acest lucru reduce, de asemenea, numărul de console.loglinii din codul nostru.

console.table ()

Putem face acest lucru cu un pas mai departe, punând toate acestea într-un tabel pentru a face mai ușor de citit. Ori de câte ori aveți obiecte cu proprietăți comune sau folosiți o serie de obiecte console.table(). Aici putem folosi console.table({ foo, bar})și consola arată:

console.group ()

Aceasta poate fi utilizată atunci când doriți să grupați sau să cuibăriți detaliile relevante împreună pentru a putea citi cu ușurință jurnalele.

Acest lucru poate fi utilizat și atunci când aveți câteva instrucțiuni de jurnal într-o funcție și doriți să puteți vedea clar domeniul de aplicare corespunzător fiecărei instrucțiuni.

De exemplu, dacă conectați detaliile unui utilizator:

console.group('User Details');console.log('name: John Doe');console.log('job: Software Developer');
// Nested Groupconsole.group('Address');console.log('Street: 123 Townsend Street');console.log('City: San Francisco');console.log('State: CA');console.groupEnd();
console.groupEnd();

Puteți utiliza, de asemenea, console.groupCollapsed()în loc de console.group()dacă doriți ca grupurile să fie prăbușite în mod implicit. Pentru a extinde ar trebui să apăsați butonul descriptor din stânga.

console.warn () & console.error ()

În funcție de situație, pentru a vă asigura că consola dvs. este mai ușor de citit, puteți adăuga jurnale folosind console.warn()sau console.error(). Există, de asemenea, console.info()care afișează o pictogramă „i” în unele browsere.

Acest lucru poate fi făcut un pas mai departe prin adăugarea unui stil personalizat. Puteți utiliza o %cdirectivă pentru a adăuga stil la orice instrucțiune de jurnal. Aceasta poate fi utilizată pentru a face diferența între apelurile API, evenimentele utilizatorilor etc., prin păstrarea unei convenții. Iată un exemplu:

console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered');console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details');console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');

Puteți schimba , de asemenea font-size, font-styleși alte lucruri CSS.

console.trace ()

console.trace()trimite o consolă de stivă și afișează modul în care a ajuns codul într-un anumit punct. Există anumite metode pe care doriți să le apelați o singură dată, cum ar fi ștergerea dintr-o bază de date. console.trace()poate fi folosit pentru a ne asigura că codul se comportă așa cum dorim.

console.time ()

Un alt lucru important atunci când vine vorba de dezvoltarea frontend-ului este că codul trebuie să fie rapid. console.time()permite sincronizarea anumitor operațiuni din cod pentru testare.

let i = 0;
console.time("While loop");while (i < 1000000) { i++;}console.timeEnd("While loop");
console.time("For loop");for (i = 0; i < 1000000; i++) { // For Loop}console.timeEnd("For loop");

Sperăm că articolul a furnizat câteva informații despre diferite moduri de utilizare a consolei. Dacă aveți întrebări sau doriți să vă explic, vă rog să-mi lăsați o notă mai jos sau contactați-mă pe Twitter sau prin e-mail.