Heim > Web-Frontend > js-Tutorial > Hauptteil

Debuggen von Javascript_Javascript-Tipps mit console.table()

WBOY
Freigeben: 2016-05-16 16:37:24
Original
1086 Leute haben es durchsucht

Verwenden Sie CONSOLE.LOG(), um Arrays anzuzeigen

Stellen Sie sich vor, Sie hätten das folgende Array erstellt
var Sprachen = [
{ Name: „JavaScript“, Dateierweiterung: „.js“ },
{ Name: „TypeScript“, Dateierweiterung: „.ts“ },
{ Name: „CoffeeScript“, Dateierweiterung: „.coffee“ }
];

<code>console.log(languages);</code>
Nach dem Login kopieren

console.log() zeigt das Array wie folgt an

Diese Art der Anzeige ist für die Entwicklung sehr nützlich, aber ich finde es etwas umständlich, jedes Objekt manuell anzuklicken. Zu diesem Zeitpunkt halte ich console.table() für etwas interessant.

Verwenden Sie CONSOLE.TABLE(), um Arrays anzuzeigen

Jetzt versuchen wir es mit console.table():

Stimmt es, dass es sehr klein ist?

Natürlich ist console.table() besser geeignet, flache Daten im Tabellenformat aufzulisten und perfekter anzuzeigen. Andernfalls sind viele Raster in Ihrer Tabelle undefiniert.

Verwenden Sie CONSOLE.TABLE(), um das Objekt anzuzeigen

Eine weitere Funktion von console.table() ist die Anzeige von Objekten.

<code>var languages = {<br>csharp: { name: "C#", paradigm: "object-oriented" },<br>fsharp: { name: "F#", paradigm: "functional" }<br>};</code>
Nach dem Login kopieren
<code>console.table(languages);</code>
Nach dem Login kopieren

Richtig.

Filterfunktion von CONSOLE.TABLE()

Wenn Sie console.table() auf die Anzeige einer bestimmten Spalte beschränken möchten, können Sie wie folgt eine Schlüsselwortliste im Parameter übergeben:
// Mehrere Eigenschaftsschlüssel
console.table(Sprachen, ["Name", "Paradigma"]);

Wenn Sie auf eine Eigenschaft zugreifen möchten, reicht ein Parameter aus,

<code>// A single property 
keyconsole.table(languages, "name");</code>
Nach dem Login kopieren

Ich dachte einmal, dass ich die meisten Funktionen der Chrome Developer Tools bereits verstanden habe, aber jetzt liege ich offensichtlich falsch. Wenn Sie nichts zu tun haben, schauen Sie sich die Chrome DevTools-Dokumentation an!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage