So zeigen Sie Daten als Tabelle in der Browserkonsole an

Console ist ein integriertes Browser-Tool, das Fehler auf der Website protokolliert. Wenn Fehler auftreten (z. B. fehlerhafte Verknüpfungen, unvollständige JavaScript-Funktionen oder unbekannte CSS-Eigenschaften), zeigen die Browser Fehlermeldungen in der Konsole an.

Darüber hinaus können wir über die Shell und die Konsolen-API auch mit der Konsole interagieren, was beim Testen bestimmter Funktionen und der Datenausgabe nützlich ist. Hier zeigen wir Ihnen einen praktischen Tipp für die Verwendung der Konsolen-API.

Zugriff auf die Browser-Konsole

In Chrome können wir das Menü Ansicht> Entwickler> JavaScript-Konsole auswählen, um die Konsole aufzurufen. Alternativ können Sie auch die Tastenkombination: Cmd + Option + J unter OS X und Strg + Umschalt + J unter Windows verwenden.

Im Folgenden sehen Sie eine fehlerfreie Chrome-Konsole.

Von hier aus können wir den in der Konsolen-API bereitgestellten Befehl verwenden.

Interaktion mit der Konsole

Wir können mit der Browserkonsole über die Konsole selbst interagieren und JavaScript innerhalb des Dokuments hinzufügen. Als Beispiel nennen wir der Konsole "Good Morning!", console.log() Befehl console.log() direkt in der Konsole eingeben:

Wie erwähnt, können wir auch die console.log() innerhalb des Dokuments anwenden. Eine praktische console.log() Verwendung besteht darin, eine bedingte JavaScript-Anweisung zu testen. Wir können klarer sehen, ob das Ergebnis mit Hilfe von console.log() true oder false console.log() .

Unten ist ein Beispiel:

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

Der obige Code gibt true zurück, da die a Variable die Zahl 1 enthält. In der Konsole sollte der Browser den Text true ausgeben.

Ausgabedaten als Tabelle

Manchmal haben wir es mit einem Array von Daten oder einer Liste von Objekten zu tun, wie unten gezeigt:

 var data = [{Name: "Andi", Alter: "21", Stadt: "Tuban"}, {Name: "Ani", Alter: "25", Ort: "Trenggalek"}, {Name: "Adi", Alter: "30", Stadt: "Kediri"}]; console.table (Daten); 

Diese Daten werden schwer zu lesen sein, wenn wir die console.log() -Methode verwenden. Die console.log() -Methode zeigt das Array in der console.log() Baumansicht, wie unten gezeigt.

Wenn es sich um ein solches Array handelt, ist die Verwendung von console.table() der console.table() Weg, es auszugeben. Diese Methode zeigt Daten in einem Tabellenformat an. Nimmt man die gleichen Daten wie oben, wird es ausgegeben als:

Fazit

Mit der Browser-Konsole können Webentwickler Fehler in Websites beheben. Wir können es auch verwenden, um die Datenausgabe zu testen, wie bei der console.log() -Methode. Wenn wir einen array data console.table() -Befehl haben, wäre er nützlicher, da er das Array in einem Tabellenformat anzeigt, das leicht zu lesen ist. Beachten Sie, dass die console.table() nur in Webkit-basierten Browsern wie Chrome, Safari und der neuesten Version von Opera verwendet werden kann.

Weiterführende Literatur

• Einfaches JavaScript-Array
• Konsolen-API-Snippet für erhabenen Text

Code in der Wolke mit Kodierung

Die Art und Weise, wie wir uns aus der Ferne entwickeln und programmieren, hat sich in den letzten Jahren kaum verändert . Schließlich ist der Akt der Codierung selbst etwas, das Aufmerksamkeit und ein gewisses Gefühl der Einsamkeit erfordert, um gut zu sein. Aber was ist, wenn Sie stecken bleiben und einen persönlicheren Weg suchen, ein bestimmtes Coding-Problem zu überwinden?Kodi

(Tech- und Design-Tipps)

4 Form Design UX Tipps, die Sie kennen sollten (mit Beispielen)

Wir neigen dazu, über Formen als einfaches Mittel zur Sammlung von Benutzerdaten nachzudenken, aber sie sind auch eine Möglichkeit, manchmal die einzige Möglichkeit für unsere Benutzer, sich mit uns in Verbindung zu setzen . Es ist wahrscheinlich wahnwitzig zu denken, dass wir Nutzer gerne Formulare ausfüllen lassen, aber es ist sicherlich möglich , Lösungen zu finden, die sie nicht zu sehr verärgern und ihnen dabei helfen.Während

(Tech- und Design-Tipps)