de Gilad Dayagi

console obiectul este o caracteristică foarte utilă a browserelor care există de mulți ani. Oferă acces la consola de depanare a browserului.
Majoritatea dezvoltatorilor web știu cum să imprime mesaje pe consolă folosind console.log. Dar am constatat că mulți nu știu despre alte caracteristici ale console, chiar dacă pot fi foarte utile pentru fiecare dezvoltator web.

În acest post, voi trece în revistă unele dintre aceste caracteristici și capabilități mai puțin cunoscute. Sper că le veți găsi utile și interesante și le veți încorpora în fluxul de lucru zilnic și în cod.

Am adăugat o captură de ecran a rezultatului fiecărui exemplu. Dacă doriți să încercați lucruri pentru dvs., deschideți DevTools și copiați-lipiți exemplele.

Folosind mai multe argumente

Este destul de obișnuit să înregistrați mai multe valori împreună. Acestea pot fi un mesaj împreună cu o valoare conexă sau conținutul mai multor variabile conexe.

Iată două moduri în care am văzut dezvoltatorii realizând acest lucru:

1. Concatenarea șirului

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar ' + a + ' ' + b + ' ' + c);
Cum sa treceti dincolo de consolelog si sa profitati la
Rezultatul concatenării șirului

2. Utilizarea mai multor apeluri

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar');console.log(a);console.log(b);console.log(c);
1611492665 110 Cum sa treceti dincolo de consolelog si sa profitati la
Rezultatul mai multor apeluri

Aceste metode pot funcționa (un fel de), dar:

  • Nu sunt flexibili
  • Nu sunt foarte lizibile
  • Sunt greoaie de scris
  • Au nevoie de mijloace speciale pentru a funcționa corect cu variabilele obiect

Există mai multe alternative mai bune pentru a produce mai multe variabile. Cel mai util pentru depozitarea rapidă a datelor este trimiterea mai multor argumente către console.log, ca astfel:

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('Foo bar', a, b, c);
1611492665 477 Cum sa treceti dincolo de consolelog si sa profitati la
Rezultatul mai multor argumente

Acest lucru este foarte util pentru depanare, dar ieșirea nu este foarte controlabilă. Pentru ieșirea care este destinată citirii (ca pentru o bibliotecă), aș folosi o altă metodă, la care vom ajunge mai târziu.

Folosind diferite niveluri de jurnal

Pe lângă familiari console.log, există alte metode de înregistrare care corespund diferitelor niveluri de înregistrare:

console.debug('Debug message');console.info('Info message');console.log('Good old log message');console.warn('A warning message');console.error('This is an error');
1611492666 159 Cum sa treceti dincolo de consolelog si sa profitati la
Înregistrați nivelurile așa cum se vede în Google Chrome

Fiecare nivel de jurnal poate avea un stil implicit diferit, ceea ce face mai ușoară identificarea erorilor și avertismentelor dintr-o privire.

De obicei, puteți filtra și nivelurile de jurnal care doriți să fie vizibile în consola DevTools. Acest lucru poate ajuta la reducerea dezordinii.

1611492666 697 Cum sa treceti dincolo de consolelog si sa profitati la
Filtrarea nivelurilor jurnalului în Google Chrome

Aspectul diferitelor niveluri și granularitatea filtrării se schimbă de la browser la browser.

Gruparea liniilor de consolă

Uneori este util să grupați mesajele jurnal împreună. Poate permite o ieșire mai organizată și mai ușor de citit.

Acest lucru este de fapt foarte simplu de realizat:

console.group();console.log('First message');console.log('Second message');console.groupEnd();
1611492667 89 Cum sa treceti dincolo de consolelog si sa profitati la
Mesaje jurnal grupate

Rețineți că grupurile de jurnal pot fi, de asemenea, imbricate și etichetate:

console.group('Group aaa');console.log('First message');console.group('Group bbb');console.log('level 2 message a');console.log('Level 2 message b');console.groupEnd();console.log('Second message');console.groupEnd();
1611492667 970 Cum sa treceti dincolo de consolelog si sa profitati la
Grupuri imbricate și etichetate

În cazul în care doriți ca grupul să pară prăbușit, utilizați console.groupCollapsed()

Masurarea performantei

Măsurarea timpului dintre punctele din cod poate servi ca o modalitate rapidă de a verifica performanța unor operații.

Iată un mod banal de a face acest lucru:

const start = Date.now();// do some stuffconsole.log('Took ' + (Date.now() - start) + ' millis');

Acest lucru funcționează, dar există o modalitate mai elegantă de a realiza ceva similar:

console.time('Label 1');// do some stuffconsole.timeEnd('Label 1');
1611492667 583 Cum sa treceti dincolo de consolelog si sa profitati la
Măsurarea timpului cu consola

Codul este mai scurt, măsurarea este mai precisă și puteți urmări până la 10.000 de temporizatoare diferite în paralel pe o pagină.

Înlocuirea șirului

Anterior am aflat că puteți transmite mai multe argumente console.log pentru a scoate simultan mai multe valori. O altă modalitate de a realiza ceva similar este folosirea substituției șirului. Această metodă necesită familiarizare cu substituenții disponibili, dar oferă un control mai mare asupra rezultatului.

const a = 123;const b = 'abc';const c = {aa: 234, bb: 345};console.log('number %d string %s object %o', a, b, c);
1611492667 90 Cum sa treceti dincolo de consolelog si sa profitati la
Înregistrare cu înlocuire șir

Aruncați o privire la documentație (link la final) pentru o listă de substituenți disponibili.

Styling

Poate fi frumos să stiluiți diferite mesaje jurnal diferit pentru a crește lizibilitatea.

Am menționat deja că browserele oferă stiluri implicite diferite unor niveluri de jurnal, dar acest lucru poate fi personalizat și în funcție de nevoile dvs. specifice. Stilizarea se face folosind un subset de reguli CSS, trecut într-un șir ca al doilea parametru și aplicat folosind markerul %c.

Rețineți că puteți avea stiluri diferite pentru diferite părți ale mesajului jurnal.

De exemplu:

console.log("Normal %cStyled %clorem %cipsum", "color: blue; font-weight: bold", "color: red", "background-image: linear-gradient(red, blue); color: white; padding: 5px;");
1611492668 171 Cum sa treceti dincolo de consolelog si sa profitati la
Mesaje jurnal cu stil

rezumat

În această postare am văzut câteva dintre caracteristicile console care cred că sunt mai puțin cunoscute și mai utile. Aceasta nu este în niciun caz o listă exhaustivă cu tot ceea ce console poate face, deoarece are multe mai multe trucuri în mânecă.

Dacă acest lucru te-a interesat și vrei să afli ce alte lucruri poți face cu console, Vă recomand să citiți documentația relevantă despre MDN și încercarea lucrurilor în DevTools.

Dacă ați găsit acest lucru util, vă rugăm să împărtășiți acest articol pe social media.
Poți să mă urmărești și pe twitter (@giladaya). Mulțumesc pentru lectură!