Cum să afișați datele ca tabel în Consola browser

Consola este un instrument încorporat în browser care înregistrează erorile care apar pe site-uri web. Dacă există erori - cum ar fi linkuri întrerupte, funcții JavaScript incomplete sau proprietăți CSS necunoscute - browserul va afișa mesaje de eroare în Consolă.

De asemenea, puteți interacționa cu Consola prin intermediul shell-ului și al API-ului Console, care este util pentru testarea anumitor funcții și date de ieșire. Aici, articolul vă va arăta un sfat util pentru utilizarea API-ului Console.

Accesați Consola din browser

În Chrome, puteți selecta Vizualizare > Dezvoltator > Consola JavaScript pentru a afișa Consola. În plus, puteți utiliza și comanda rapidă de la tastatură: Cmd+ Option+ Jpe OS X și Ctrl+ Shift+ Jpe Windows.

Mai jos este o Consolă Chrome fără erori.

De aici, puteți începe să utilizați comenzile furnizate în API-ul Console.

Interacționează cu Consola

Puteți interacționa cu Consola browserului dvs. prin intermediul Consolei în sine și adăugând JavaScript. De exemplu, aici cerem Consolei să scoată rezultatul „Bună dimineața!” tastând comanda console.log() direct în Consolă:

După cum am menționat, puteți aplica și console.log(). Console.log() poate fi folosit pentru a testa o instrucțiune condițională JavaScript. Puteți vedea mai clar când rezultatul returnează adevărat sau fals (adevărat sau fals) cu ajutorul console.log().

Iată un exemplu:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Codul de mai sus va returna adevărat, deoarece o variabilă conține numărul 1 . În Consolă, veți vedea că browserul scoate textul cu conținutul „adevărat”.

Datele de ieșire sub formă de tabel

Uneori, va trebui să procesați o serie de date sau o listă de obiecte, așa cum se arată mai jos:

var data = [

{ name: "Andi", age: "21", city: "Tuban" },

{ name: "Ani", age: "25", city: "Trenggalek" },

{ name: "Adi", age: "30", city: "Kediri" }

];

console.table(data);

Aceste date vor fi greu de citit când vom folosi metoda console.log(). Metoda console.log() va afișa Array-ul într-o vizualizare arborescentă pliabilă, așa cum se arată mai jos.

Când trebuie să vă ocupați de un astfel de Array, folosirea console.table() este o modalitate mai bună de a scoate date. Această metodă afișează datele într-un format de tabel. Luând aceleași date ca mai sus, rezultatul va apărea după cum urmează:

Consola browser-ului îi ajută pe dezvoltatorii web să gestioneze erorile de pe site-uri web. Utilizatorii îl pot folosi și pentru a examina datele de ieșire, ca și în cazul metodei console.log(). Când aveți o matrice de date, comanda console.table() este mai utilă, deoarece afișează tabloul într-un format de tabel ușor de citit. Rețineți că console.table() este aplicabil numai în browserele bazate pe Webkit, cum ar fi Chrome, Safari și cea mai recentă versiune de Opera.

Sper că aveți succes.