Es ist schwer vorstellbar, dass JS entwickelt wird, ohne dass Informationen an die Konsole ausgegeben werden. Im übertragenen Sinne ist console.log () das Heilmittel für die meisten Code-Krankheiten.

Debugging ist fast so, als würde man ein Verbrechen untersuchen, bei dem man auch der Hauptschuldige ist - Filipe Fortes

Neben der häufig verwendeten console.log () -Funktion gibt es jedoch noch viele weitere Tools, die den Vorgang erheblich vereinfachen können. Schauen wir uns einige davon mit einfachen Beispielen an.

console.log (), .info (), .debug (), .warn (), .error ()

Am einfachsten ist es, die Zeile mit einer Farbe zu drucken, die der Art des Ereignisses entspricht.

Wir verwenden Platzhalter

Um Daten in einer Zeile durch eine Nachricht zu ersetzen, ist es am bequemsten, Platzhalter zu verwenden.

% o - für das Objekt
% s - für Zeichenfolge
% d - für Dezimalzahl oder Ganzzahl

CSS hinzufügen

Nicht genug Info / Warnung / Fehler? Es spielt keine Rolle! Sie können CSS auf Konsolenmeldungen anwenden.

Möchten Sie CSS nur auf einen Teil der Nachricht anwenden? Das geht so:

console.dir ()

Es ist oft viel bequemer, eine JSON-Darstellung des für uns interessanten Objekts auszudrucken.

HTML-Ausgabe

HTML-Elemente in der Konsole können auf die gleiche Weise wie im Inspektor untersucht werden.

console.table ()

Möchten Sie schnell die Daten in einer Liste von JSON sehen?

console.group () und console.groupEnd ()

Nachrichten in der Konsole können zur Vereinfachung gruppiert werden.

console.count ()

Diese Funktion zeichnet auf, wie oft sie aufgerufen wurde.

Wenn die optionale Argumentbezeichnung übergeben wird , zeichnet die Funktion die Anzahl der Anrufe mit derselben Bezeichnung auf .

Wenn die Funktion ohne Parameter aufgerufen wird, zeichnet sie die Anzahl der Anrufe auf derselben Leitung auf .

console.assert ()

Dies ist praktisch, wenn Sie Informationen nach Bedingung anzeigen möchten. Es werden nur Nachrichten gedruckt, bei denen das erste Argument von assert () falsch ist.

console.trace ()

Diese Methode hilft Ihnen zu verstehen, wie der Code einen bestimmten Punkt erreicht hat.

console.time ()

Die einfachste Methode zum Messen der Ausführungszeit eines Codeteils.

console.memory

Möchten Sie endlich herausfinden, wo der gesamte freie Arbeitsspeicher war?

console.clear ()

Verwenden Sie, um mit einem sauberen Schiefer zu beginnen. Löscht die Konsole vollständig von vorherigen Nachrichten.

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');