Hoe gegevens als tabel in browserconsole te tonen

Console is een browser-ingebouwd hulpprogramma dat fouten registreert die op de website plaatsvinden. Als er fouten zijn - zoals gebroken links, onvolledige JavaScript-functies of onbekende CSS-eigenschappen - zullen de browsers foutmeldingen binnen de console weergeven.

Bovendien kunnen we via de shell en de Console API ook communiceren met de console, wat handig is bij het testen van bepaalde functies en gegevensuitvoer. Hier laten we u een handige tip zien voor het gebruik van de Console API.

Toegang tot de browserconsole

In Chrome kunnen we het menu Weergave> Ontwikkelaar> JavaScript-console selecteren om de console te openen. Als alternatief kunnen we ook de sneltoets gebruiken: Cmd + Option + J op OS X en Ctrl + Shift + J op Windows.

Hieronder wordt een foutloze Chrome-console weergegeven.

Vanaf hier kunnen we beginnen met het gebruik van de opdracht in Console API.

Interactie met de console

We kunnen communiceren met de browserconsole via de console zelf en door JavaScript aan het document toe te voegen. Als voorbeeld, hier vertellen we de console om "Good Morning!" Uit te voeren door het commando console.log() rechtstreeks in de console te typen:

Zoals vermeld, kunnen we ook console.log() toepassen in het document. Een praktisch console.log() -gebruik is het testen van een voorwaardelijke JavaScript-verklaring. We kunnen duidelijker zien of het resultaat true of false retourneert met behulp van console.log() .

Hieronder is een voorbeeld:

 var a = 1; if (a == 1) {console.log ('true'); } else {console.log ('false'); } 

De bovenstaande code geeft waar terug, aangezien de variabele a het nummer 1 bevat. In de console zou u moeten zien dat de browser de tekst true .

Uitgangsgegevens als een tabel

Soms hebben we te maken met een matrix van gegevens of een lijst met objecten, zoals hieronder weergegeven:

 var data = [{name: "Andi", leeftijd: "21", stad: "Tuban"}, {name: "Ani", leeftijd: "25", stad: "Trenggalek"}, {name: "Adi", leeftijd: "30", stad: "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 de opvouwbare structuurweergave, zoals hieronder wordt weergegeven.

Wanneer we met zo'n array te maken hebben, is console.table() de betere manier om het uit te voeren. Deze methode toont gegevens in een tabelindeling. Met dezelfde gegevens als hierboven, wordt het als volgt gegenereerd:

Conclusie

De browser-console helpt webontwikkelaars fouten in websites af te handelen. We kunnen het ook gebruiken om de gegevensuitvoer te testen, bijvoorbeeld met de console.log() -methode. Wanneer we een array data console.table() opdracht zouden nuttiger worden, omdat het de array toont in een tabelindeling die gemakkelijk te lezen is. Houd er rekening mee dat de console.table() alleen van toepassing is in Webkit-gebaseerde browsers zoals Chrome, Safari en de nieuwste versie van Opera.

Verder lezen

• JavaScript-basisarray
• Console API-fragment voor sublieme tekst

10 webapps gemaakt met Backbone.js [casestudy]

Ben je ooit verstrikt geraakt in spaghetti-code? Wilt u uw app liever iets gezonder eten? Als dat zo is, kijk dan wat er met Backbone.js kan worden bereikt. Backbone is een JavaScript-bibliotheek die losjes is gebaseerd op het ontwerppatroon van Model-View-Controller, maar omdat het besturingselement ontbreekt, is het beter om dit een MV * -raamwerk te noemen

(Technische en ontwerptips)

14 Geavanceerde multipurpose WordPress-thema's voor elk type project

Zoals de naam al aangeeft, biedt een multifunctioneel thema alle noodzakelijke functies die bij elk type website horen . Wanneer er aan de ene kant een speciaal thema wordt gemaakt met een specifieke set lay-out en functies, biedt een multifunctioneel thema maximale flexibiliteit en aanpassing aan het webproject

(Technische en ontwerptips)