Înregistrarea mesajelor pe consolă este un mod foarte simplu de a diagnostica și depana probleme minore din codul dvs.

Dar, știați că există mai multe de făcut console decât doar log? În acest articol, vă voi arăta cum să imprimați pe consolă în JS, precum și toate lucrurile pe care nu le știați console ar putea face.

Firefox Multi-line Editor Console

Dacă nu ați folosit niciodată modul editor multi-linie în Firefox, ar trebui să încercați chiar acum!

Doar deschideți consola, Ctrl+Shift+K sau F12, iar în colțul din dreapta sus veți vedea un buton pe care scrie „Treceți la modul de redare cu mai multe linii”. Alternativ, puteți apăsa Ctrl+B.

Acest lucru vă oferă un editor de coduri cu mai multe linii chiar în Firefox.

ad-banner

consolă.log

Să începem cu un exemplu de log foarte simplu.

let x = 1
console.log(x)

Introduceți acest lucru în consola Firefox și rulați codul. Puteți face clic pe butonul „Run” sau apăsați Ctrl+Enter.

În acest exemplu, ar trebui să vedem „1” în consolă. Destul de simplu, nu?

Valori multiple

Știați că puteți include mai multe valori? Adăugați un șir la început pentru a identifica cu ușurință la ce vă conectați.

let x = 1
console.log("x:", x)

Dar dacă avem mai multe valori pe care vrem să le înregistrăm?

let x = 1
let y = 2
let z = 3

În loc să tastați console.log() de trei ori le putem include pe toate. Și putem adăuga un șir înaintea fiecăruia dintre ei, dacă dorim și noi.

let x = 1
let y = 2
let z = 3
console.log("x:", x, "y:", y, "z:", z)

Dar asta e prea multă muncă. Înfășurați-le doar cu bretele cretate! Acum obțineți un obiect cu valorile numite.

let x = 1
let y = 2
let z = 3
console.log( {x, y, z} )
Ieșire consolă
Ieșire consolă

Puteți face același lucru cu un obiect.

let user = {
  name: 'Jesse',
  contact: {
    email: 'codestackr@gmail.com'
  }
}
console.log(user)
console.log({user})

Primul jurnal va imprima proprietățile din obiectul utilizator. Al doilea va identifica obiectul ca „utilizator” și va imprima proprietățile din cadrul acestuia.

Dacă conectați multe lucruri la consolă, acest lucru vă poate ajuta să identificați fiecare jurnal.

Variabile din jurnal

Știați că puteți utiliza porțiuni din jurnal ca variabile?

console.log("%s is %d years old.", "John", 29)

În acest exemplu, %s se referă la o opțiune șir inclusă după valoarea inițială. Aceasta s-ar referi la „Ioan”.

%d se referă la o opțiune de cifră inclusă după valoarea inițială. Aceasta s-ar referi la 29.

Rezultatul acestei afirmații ar fi: „Ioan are 29 de ani”.

Variații de bușteni

Există câteva variante ale jurnalelor. Există cele mai utilizate console.log(). Dar există și:

console.log('Console Log')
console.info('Console Info')
console.debug('Console Debug')
console.warn('Console Warn')
console.error('Console Error')

Aceste variante adaugă stil jurnalelor noastre din consolă. De exemplu, warn vor fi colorate în galben, iar error va fi colorat în roșu.

Notă: stilurile variază de la un browser la altul.

Jurnale opționale

Putem imprima mesaje în consolă condiționat cu console.assert().

let isItWorking = false
console.assert(isItWorking, "this is the reason why")

Dacă primul argument este fals, atunci mesajul va fi înregistrat.

Dacă ar fi să ne schimbăm isItWorking la true, atunci mesajul nu va fi înregistrat.

Socoteală

Știați că puteți conta cu consolă?

for(i=0; i<10; i++){
  console.count()
}

Fiecare iterație a acestei bucle va imprima un număr pe consolă. Veți vedea „implicit: 1, implicit: 2” și așa mai departe până ajunge la 10.

Dacă rulați din nou aceeași buclă, veți vedea că numărul se ridică de unde a rămas; 11 – 20.

Pentru a reseta contorul putem folosi console.countReset().

Și, dacă doriți să numiți contorul la altceva decât „implicit”, puteți!

for(i=0; i<10; i++){
  console.count('Counter 1')
}
console.countReset('Counter 1')

Acum că am adăugat o etichetă, veți vedea „Contorul 1, Contorul 2” și așa mai departe.

Și pentru a reseta acest contor, trebuie să trecem numele în countReset. În acest fel puteți avea mai multe contoare care rulează în același timp și le puteți reseta doar pe anumite.

Timp de urmărire

În afară de numărare, puteți, de asemenea, să cronometrați ceva de genul unui cronometru.

Pentru a porni un cronometru putem folosi console.time(). Acest lucru nu va face nimic de la sine. Deci, în acest exemplu, vom folosi setTimeout() pentru a emula codul care rulează. Apoi, în timpul expirării, vom opri folosirea temporizatorului console.timeEnd().

console.time()
setTimeout(() => {
  console.timeEnd()
}, 5000)

După cum vă așteptați, după 5 secunde, vom avea un jurnal de finalizare a temporizatorului de 5 secunde.

De asemenea, putem înregistra ora curentă a temporizatorului în timp ce rulează, fără a-l opri. Facem acest lucru folosind console.timeLog().

console.time()

setTimeout(() => {
  console.timeEnd()
}, 5000)

setTimeout(() => {
  console.timeLog()
}, 2000)

În acest exemplu, vom obține cele 2 secunde timeLog mai întâi, apoi a 5-a noastră secundă timeEnd.

La fel ca și contorul, putem eticheta cronometre și putem rula mai multe în același timp.

Grupuri

Un alt lucru cu care poți face log le grupează. ?

Începem un grup folosind console.group(). Și încheiem un grup cu console.groupEnd().

console.log('I am not in a group')

console.group()
console.log('I am in a group')
console.log('I am also in a group')
console.groupEnd()

console.log('I am not in a group')

Acest grup de jurnale va fi pliabil. Acest lucru facilitează identificarea seturilor de jurnale.

În mod implicit, grupul nu este restrâns. Îl puteți seta la prăbușit folosind console.groupCollapsed() in locul console.group().

Etichetele pot fi, de asemenea, transmise în group() pentru a le identifica mai bine.

Stack Trace

De asemenea, puteți face o urmă de stivă cu console. Doar adăugați-l într-o funcție.

function one() {
  two()
}
function two() {
  three()
}
function three() {
  console.trace()
}
one()

În acest exemplu, avem funcții foarte simple care se numesc reciproc. Apoi, în ultima funcție, apelăm console.trace().

Ieșire consolă
Ieșire consolă

Mese

Iată una dintre cele mai uimitoare utilizări pentru consolă: console.table().

Deci, să configurăm câteva date pentru a juca:

let devices = [
  {
    name: 'iPhone',
    brand: 'Apple'
  },
  {
    name: 'Galaxy',
    brand: 'Samsung'
  }
]

Acum vom înregistra aceste date folosind console.table(devices).

Ieșire consolă
Ieșire consolă

Dar așteaptă – devine mai bine!

Dacă vrem doar mărcile, doar console.table(devices, ['brand'])!

Ieșire consolă
Ieșire consolă

Ce zici de un exemplu mai complex? În acest exemplu, vom folosi jsonplaceholder.

async function getUsers() {
  let response = await fetch('https://jsonplaceholder.typicode.com/users')
  let data = await response.json()
 
  console.table(data, ['name', 'email'])
}

getUsers()

Aici tipărim doar „numele” și „e-mailul”. daca tu console.log toate datele, veți vedea că există mult mai multe proprietăți pentru fiecare utilizator.

Stil?

Știați că puteți utiliza proprietățile CSS pentru a vă juca jurnalele?

Pentru a face acest lucru, folosim %c pentru a specifica că avem stiluri de adăugat. Stilurile sunt trecute în al doilea argument al log.

console.log("%c This is yellow text on a blue background.", "color:yellow; background-color:blue")

Puteți utiliza acest lucru pentru a evidenția jurnalele dvs.

clar

Dacă încercați să depanați o problemă folosind jurnale, este posibil să reîmprospătați foarte mult, iar consola dvs. să fie aglomerată.

Doar adauga console.clear() în partea de sus a codului și veți avea o consolă nouă de fiecare dată când reîmprospătați. ?

Doar nu-l adăugați în partea de jos a codului, lol.

Mulțumesc pentru lectură!

Dacă doriți să revizuiți conceptele din acest articol prin intermediul videoclipului, puteți verifica acest lucru versiunea video pe care am făcut-o aici.

YouTube: există mai multe de consolat decât jurnal
Jesse Hall (codeSTACKr)

Sunt Jesse din Texas. Verificați celălalt conținut al meu și anunțați-mă cum vă pot ajuta în călătoria dvs. de a deveni dezvoltator web.