Sådan vises data som en tabel i browserkonsollen

Konsol er et værktøj indbygget i browseren, der registrerer fejl, der opstår på websteder. Hvis der er fejl - såsom ødelagte links, ufuldstændige JavaScript- funktioner eller ukendte CSS-egenskaber - vil browseren vise fejlmeddelelser i konsollen.

Du kan også interagere med konsollen gennem shell og Console API, hvilket er nyttigt til at teste visse funktioner og outputdata. Her vil artiklen vise dig et nyttigt tip til brug af Console API.

Få adgang til konsollen i browseren

I Chrome kan du vælge Vis > Udvikler > JavaScript-konsol for at få vist konsollen. Derudover kan du også bruge tastaturgenvejen: Cmd+ Option+ Jpå OS X og Ctrl+ Shift+ Jpå Windows.

Nedenfor er en fejlfri Chrome-konsol.

Herfra kan du begynde at bruge kommandoerne i Console API.

Interager med konsol

Du kan interagere med din browsers konsol gennem selve konsollen og ved at tilføje JavaScript. For eksempel beder vi her konsollen om at udskrive resultatet "Godmorgen!" ved at skrive kommandoen console.log() direkte i konsollen:

Som nævnt kan du også anvende console.log(). Console.log() kan bruges til at teste en betinget JavaScript-sætning. Du kan se mere tydeligt, når resultatet returnerer sand eller falsk (sand eller falsk) ved hjælp af console.log().

Her er et eksempel:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

Ovenstående kode vil returnere sand, fordi en variabel indeholder tallet 1 . I konsollen vil du se, at browseren udskriver teksten med indholdet "sandt".

Outputdata i tabelform

Nogle gange bliver du nødt til at behandle en række data eller en liste over objekter, som vist nedenfor:

var data = [

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

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

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

];

console.table(data);

Disse data vil være svære at læse, når vi bruger console.log() metoden. Metoden console.log() viser Array'et i en sammenklappelig trævisning, som vist nedenfor.

Når du skal håndtere sådan et Array, er brug af console.table() en bedre måde at udlæse data på. Denne metode viser dataene i et tabelformat. Ved at tage de samme data som ovenfor, vil resultatet se ud som følger:

Browserkonsollen hjælper webudviklere med at håndtere fejl på websteder. Brugere kan også bruge det til at undersøge dataoutput, som med console.log()-metoden. Når du har en matrix af data, er kommandoen console.table() mere nyttig, fordi den viser matrixen i et letlæseligt tabelformat. Bemærk venligst, at console.table() kun gælder i Webkit-baserede browsere som Chrome, Safari og den seneste version af Opera.

Håber du har succes.