Gegevens weergeven als tabel in Browser Console

Console is een in de browser ingebouwd hulpmiddel dat fouten registreert die op websites voorkomen. Als er fouten optreden, zoals verbroken links, onvolledige JavaScript- functies of onbekende CSS-eigenschappen, geeft de browser foutmeldingen weer in de console.

U kunt ook communiceren met de console via de shell en Console API, wat handig is voor het testen van bepaalde functies en uitvoergegevens. Hier toont het artikel u een nuttige tip voor het gebruik van de Console API.

Toegangsconsole in de browser

In Chrome kunt u Weergave > Ontwikkelaar > JavaScript-console selecteren om de console weer te geven. Daarnaast kunt u ook de sneltoets gebruiken: Cmd+ Option+ Jop OS X en Ctrl+ Shift+ Jop Windows.

Hieronder vindt u een foutloze Chrome-console.

Vanaf hier kunt u de opdrachten in de Console API gaan gebruiken.

Interactie met Console

U kunt communiceren met de console van uw browser via de console zelf en door JavaScript toe te voegen. Hier vragen we de console bijvoorbeeld om het resultaat "Goedemorgen!" uit te voeren. door de opdracht console.log() rechtstreeks in de console te typen:

Zoals gezegd kun je ook console.log() toepassen. Console.log() kan worden gebruikt om een ​​voorwaardelijke JavaScript-instructie te testen. Met behulp van console.log() kunt u duidelijker zien wanneer het resultaat waar of onwaar (waar of onwaar) retourneert .

Hier is een voorbeeld:

var a = 1;

if(a == 1) {

console.log('true');

} else {

console.log('false');

}

De bovenstaande code retourneert true, omdat een variabele het getal 1 bevat . In de console ziet u dat de browser de tekst met de inhoud ‘true’ uitvoert.

Voer gegevens uit in tabelvorm

Soms moet u een reeks gegevens of een lijst met objecten verwerken, zoals hieronder weergegeven:

var data = [

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

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

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

];

console.table(data);

Deze gegevens zullen moeilijk te lezen zijn als we de console.log() -methode gebruiken. De methode console.log() geeft de array weer in een inklapbare boomstructuur, zoals hieronder weergegeven.

Als u met een dergelijke array te maken krijgt, is het gebruik van console.table() een betere manier om gegevens uit te voeren. Deze methode geeft de gegevens in tabelvorm weer. Als we dezelfde gegevens als hierboven gebruiken, zal het resultaat er als volgt uitzien:

De browserconsole helpt webontwikkelaars bij het afhandelen van fouten op websites. Gebruikers kunnen het ook gebruiken om de gegevensuitvoer te onderzoeken, zoals bij de console.log() -methode. Als u een array met gegevens hebt, is de opdracht console.table() nuttiger, omdat deze de array in een gemakkelijk leesbare tabelindeling weergeeft. Houd er rekening mee dat console.table() alleen van toepassing is in op Webkit gebaseerde browsers zoals Chrome, Safari en de nieuwste versie van Opera.

Ik hoop dat je succesvol bent.