de Darryl Pargeter

Cum să profitați la maximum de consola JavaScript

Cum sa profitati la maximum de consola JavaScript

Unul dintre cele mai de bază instrumente de depanare din JavaScript este console.log(). console vine cu alte câteva metode utile care se pot adăuga la setul de instrumente de depanare a dezvoltatorului.

Puteți utiliza console pentru a efectua unele dintre următoarele sarcini:

  • Afișați un cronometru pentru a vă ajuta cu compararea simplă
  • Afișați un tabel pentru a afișa un tablou sau un obiect într-un format ușor de citit
  • Aplicați culoarea și alte opțiuni de stilizare la ieșire cu CSS

Obiectul Consolei

console obiect vă oferă acces la consola browserului. Vă permite să scoateți șiruri, tablouri și obiecte care vă ajută să depanați codul. console face parte din window obiect și este furnizat de Model de obiect pentru browser (BOM).

Putem obține acces la console în unul din cele două moduri:

  1. window.console.log('This works')
  2. console.log('So does this')

A doua opțiune este practic o referință la prima, așa că o vom folosi pe cea din urmă pentru a salva apăsările de taste.

O notă rapidă despre BOM: nu are un standard stabilit, astfel încât fiecare browser îl implementează în moduri ușor diferite. Am testat toate exemplele mele atât în ​​Chrome, cât și în Firefox, dar rezultatul dvs. poate apărea diferit în funcție de browser.

Emiterea de text

Cum sa profitati la maximum de consola JavaScript
Înregistrarea textului pe consolă

Cel mai comun element al console obiectul este console.log. Pentru majoritatea scenariilor, îl veți folosi pentru a face treaba.

Există patru moduri diferite de a transmite un mesaj către consolă:

  1. log
  2. info
  3. warn
  4. error

Toți patru funcționează la fel. Tot ce faceți este să transmiteți unul sau mai multe argumente metodei selectate. Apoi afișează o pictogramă diferită pentru a indica nivelul de înregistrare. În exemplele de mai jos, puteți vedea diferența dintre un jurnal la nivel de informații și un jurnal la nivel de avertizare / eroare.

1612093330 887 Cum sa profitati la maximum de consola JavaScript
Iesire simpla si usor de citit
1612093330 841 Cum sa profitati la maximum de consola JavaScript
Cu multe lucruri care se întâmplă, acest lucru poate deveni greu de citit

Este posibil să fi observat mesajul jurnal de erori – este mai arătos decât celelalte. Afișează atât un fundal roșu, cât și un urme de stivă, Unde info și warn nu face. Deşi warn are un fundal galben în Chrome.

Aceste diferențe vizuale vă ajută atunci când trebuie să identificați rapid erorile sau avertismentele din consolă. Ați dori să vă asigurați că sunt eliminate pentru aplicațiile pregătite pentru producție, cu excepția cazului în care sunt acolo pentru a avertiza alți dezvoltatori că fac ceva în neregulă cu codul dvs.

Înlocuiri de șiruri

Această tehnică folosește un substituent într-un șir care este înlocuit cu celelalte argumente pe care le transmiteți metodei. De exemplu:

Intrare: console.log('string %s', 'substitutions')

Ieșire: string substitutions

%s este substituent pentru al doilea argument 'substitutions' care vine după virgulă. Orice șiruri, numere întregi sau tablouri vor fi convertite într-un șir și vor înlocui %s. Dacă treceți un obiect, acesta se va afișa [object Object].

Dacă doriți să treceți un obiect, trebuie să utilizați %o sau %O în loc de %s.

console.log('this is an object %o', { obj: { obj2: 'hello' }})

1612093331 977 Cum sa profitati la maximum de consola JavaScript

Numere

Înlocuirea șirului poate fi utilizată cu valori întregi și cu virgulă mobilă utilizând:

  • %i sau %d pentru numere întregi,
  • %f pentru virgule mobile.

Intrare: console.log('int: %d, floating-point: %f', 1, 1.5)

Ieșire: int: 1, floating-point: 1.500000

Flotantele pot fi formatate pentru a afișa doar o cifră după punctul zecimal folosind %.1f. Poti sa faci %.nf pentru a afișa n cantitate de cifre după zecimală.

Dacă am formatat exemplul de mai sus pentru a afișa o cifră după punctul zecimal pentru numărul cu virgulă mobilă, ar arăta astfel:

Intrare: console.log('int: %d, floating-point: %.1f', 1, 1.5)

Ieșire:int: 1, floating-point: 1.5

Specificatori de formatare

  1. %s | înlocuiește un element cu un șir
  2. %(d|i)| înlocuiește un element cu un număr întreg
  3. %f | înlocuiește un element cu un plutitor
  4. %(o|O) | elementul este afișat ca obiect.
  5. %c | Aplică CSS furnizat

Șabloane șir

Odată cu apariția ES6, literalele șablonului reprezintă o alternativă la substituții sau concatenare. Folosesc backticks (“) în loc de ghilimele, iar variabilele intră ${}:

const a="substitutions";
console.log(`bear: ${a}`);
// bear: substitutions

Obiectele se afișează ca [object Object] în literele șablonului, deci va trebui să utilizați substituirea cu %o sau %O pentru a vedea detaliile sau pentru a le conecta separat.

Utilizarea substituțiilor sau a șabloanelor creează un cod care este mai ușor de citit în comparație cu utilizarea concatenării șirurilor: console.log('hello' + str + '!');.

Interludiu destul de colorat!

Acum este timpul pentru ceva mai distractiv și mai colorat!

Este timpul să ne facem console pop cu diferite culori cu substituții de șiruri.

Voi folosi un exemplu Ajax batjocorit care ne oferă atât succes (în verde), cât și eșec (în roșu) de afișat. Iată rezultatul și codul:

1612093331 354 Cum sa profitati la maximum de consola JavaScript
Urși de succes și lilieci care nu reușesc
const success = [ 'background: green', 'color: white', 'display: block', 'text-align: center'].join(';');
const failure = [ 'background: red', 'color: white', 'display: block', 'text-align: center'].join(';');
console.info('%c /dancing/bears was Successful!', success);console.log({data: { name: 'Bob', age: 'unknown'}}); // "mocked" data response
console.error('%c /dancing/bats failed!', failure);console.log('/dancing/bats Does not exist');

Aplicați reguli CSS în înlocuirea șirului cu %c substituent.

console.error('%c /dancing/bats failed!', failure);

Apoi plasați elementele CSS ca un argument șir și puteți avea jurnale în stil CSS. Puteți adăuga mai multe %c și în șir.

console.log('%cred %cblue %cwhite','color:red;','color:blue;', 'color: white;')

Aceasta va afișa cuvintele „roșu”, „albastru” și „alb” în culorile lor respectate.

Există destul de multe proprietăți CSS acceptate de consolă. Aș recomanda să experimentați pentru a vedea ce funcționează și ce nu. Din nou, rezultatele dvs. pot varia în funcție de browser.

Alte metode disponibile

Iată câteva alte disponibile console metode. Rețineți că unele articole de mai jos nu au avut API-urile standardizate, deci pot exista incompatibilități între browsere. Exemplele au fost create cu Firefox 51.0.1.

Afirma()

Assert ia două argumente – dacă primul argument se evaluează la o valoare falsă, atunci afișează al doilea argument.

let isTrue = false;
console.assert(isTrue, 'This will display');
isTrue = true;
console.assert(isTrue, 'This will not');

Dacă afirmația este falsă, aceasta se transmite în consolă. Este afișat ca un jurnal la nivel de eroare, așa cum s-a menționat mai sus, oferindu-vă atât un mesaj de eroare roșu, cât și o urmă de stivă.

Dir ()

dir metoda afișează o listă interactivă a obiectului transmis acestuia.

console.dir(document.body);
1612093331 342 Cum sa profitati la maximum de consola JavaScript
Chrome se afișează în mod diferit

În cele din urmă, dir salvează doar unul sau două clicuri. Dacă trebuie să inspectați un obiect dintr-un răspuns API, atunci afișarea acestuia în acest mod structurat vă poate economisi ceva timp.

Masa()

table metoda afișează o matrice sau un obiect ca tabel.

console.table(['Javascript', 'PHP', 'Perl', 'C++']);
1612093331 734 Cum sa profitati la maximum de consola JavaScript
Ieșire pentru o matrice

Indicii matricei sau numele proprietăților obiectului se află sub coloana index din stânga. Apoi valorile sunt afișate în coloana din dreapta.

const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table(superhero);
1612093332 854 Cum sa profitati la maximum de consola JavaScript
Ieșire pentru un obiect

Notă pentru utilizatorii Chrome: Acest lucru mi-a fost adus în atenția unui coleg de serviciu, dar exemplele de mai sus ale table nu pare să funcționeze în Chrome. Puteți rezolva această problemă plasând orice element într-o matrice de matrice sau într-o matrice de obiecte:

console.table([['Javascript', 'PHP', 'Perl', 'C++']]);
const superhero = {     firstname: 'Peter',    lastname: 'Parker',}console.table([superhero]); 

Grup()

console.group() este alcătuit din cel puțin un minim de trei console apeluri și este probabil metoda care necesită cea mai mare tastare. Dar este și unul dintre cele mai utile (în special pentru dezvoltatorii care folosesc Redux Logger).

Un apel oarecum de bază arată astfel:

console.group();console.log('I will output');console.group();console.log('more indents')console.groupEnd();console.log('ohh look a bear');console.groupEnd();

Aceasta va genera mai multe niveluri și se va afișa diferit în funcție de browserul dvs.

Firefox afișează o listă indentată:

1612093332 962 Cum sa profitati la maximum de consola JavaScript

Chrome le arată în stilul unui obiect:

1612093332 603 Cum sa profitati la maximum de consola JavaScript

Fiecare apel către console.group() va începe un grup nou sau va crea un nivel nou dacă este apelat în interiorul unui grup. De fiecare dată când suni console.groupEnd() se va încheia grupul sau nivelul curent și va reveni cu un nivel în sus.

Consider că stilul de ieșire Chrome este mai ușor de citit, deoarece arată mai mult ca un obiect pliabil.

Poți trece group un argument antet care va fi afișat peste console.group:

console.group('Header');

Puteți afișa grupul ca prăbușit de la început dacă apelați console.groupCollapsed(). Pe baza experienței mele, acest lucru pare să funcționeze numai în Chrome.

Timp()

time metoda, cum ar fi group metoda de mai sus, vine în două părți.

O metodă de pornire a temporizatorului și o metodă de terminare a acestuia.

Odată ce temporizatorul s-a terminat, acesta va afișa timpul total de rulare în milisecunde.

Pentru a porni cronometrul, utilizați console.time('id for timer') și pentru a termina cronometrul pe care îl utilizați console.timeEnd('id for timer') . Puteți avea până la 10.000 de temporizatoare care rulează simultan.

Ieșirea va arăta cam așa timer: 0.57ms

Este foarte util atunci când trebuie să faceți un pic de benchmarking.

Concluzie

Iată-l, o privire un pic mai profundă asupra obiectului consolă și a altor metode care vin cu acesta. Aceste metode sunt instrumente excelente pe care trebuie să le aveți la dispoziție atunci când trebuie să depanați codul.

Există câteva metode despre care nu am vorbit, deoarece API-ul lor se schimbă în continuare. Puteți citi mai multe despre acestea sau despre consolă în general pe Pagina MDN Web API si este pagina specificațiilor de viață.

1612093332 278 Cum sa profitati la maximum de consola JavaScript
https://developer.mozilla.org/en/docs/Web/API/console