Zum Hauptinhalt springen

Browser Console

In ChatGPT öffnen
24.10
Java API

Die Verwendung der Konsole des Browsers, um Programminformationen auszugeben, ist ein integraler Bestandteil des Entwicklungsprozesses. Die BrowserConsole-Hilfsklasse bietet Funktionen, die die Protokollierungsfähigkeiten durch Protokolltypen und -stil verbessern.

Instanz

Erhalten Sie eine Instanz von BrowserConsole mit der App.console()-Methode. Drucken Sie jedes gewünschte Object als einen der fünf Protokolltypen: log, info, warn, error oder debug.

import static com.webforj.App.console;
// Typen
console().log("Protokollnachricht");
console().info("Infomeldung");
console().warn("Warnmeldung");
console().error("Fehlermeldung");
console().debug("Debug-Nachricht");

Styling

Verwenden Sie die Builder-Methoden, um das Erscheinungsbild der Protokollnachricht festzulegen. Jeder Builder hat Optionen, um eine bestimmte Eigenschaft zu ändern. Es ist auch möglich, mehrere Stile zu mischen. Sobald eine Konsolennachricht druckt, wird jeder angewandte Stil nicht auf nachfolgende Nachrichten übertragen, es sei denn, er wird explizit neu definiert.

Tipp

Verwenden Sie die Methode setStyle, um die Eigenschaften des BrowserConsole-Protokolls zu ändern, die nicht von den Buildern festgelegt werden.

Hintergrundfarbe

Setzen Sie die Hintergrundfarbe mit der Methode background(), die den BackgroundColorBuilder zurückgibt. Verwenden Sie Methoden, die nach der Farbe benannt sind, wie blue(), oder wählen Sie einen spezifischen Wert mit colored(String color).

// Hintergrund Beispiele
console().background().blue().log("Blaue Hintergrundfarbe");
console().background().colored("#031f8f").log("Benutzerdefinierte blaue Hintergrundfarbe");

Textfarbe

Setzen Sie die Textfarbe mit der Methode color(), die den ColorBuilder zurückgibt. Verwenden Sie Methoden, die nach der Farbe benannt sind, wie red(), oder wählen Sie einen spezifischen Wert mit colored(String color).

// Farb Beispiele
console().background().red().log("Roter Text");
console().color().colored("#becad2").log("Benutzerdefinierter hellbläulicher grauer Text");

Schriftgröße

Setzen Sie die Schriftgröße mit der Methode size(), die den FontSizeBuilder zurückgibt. Verwenden Sie Methoden, die nach einer Größe benannt sind, wie small(), oder wählen Sie einen spezifischen Wert mit from(String value).

// Größen Beispiele
console().size().small().log("Kleine Schrift");
console().size().from("30px").log("30px Schriftgröße");
Tipp

Die Methode from(String value) kann andere Schriftgrößenwerte wie rem und vw annehmen.

Schriftstil

Setzen Sie den Schriftstil mit der Methode style(), die den FontStyleBuilder zurückgibt. Verwenden Sie zum Beispiel die Methode italic(), um das Konsolenprotokoll kursiv zu machen.

// Stil Beispiele
console().style().italic().log("Kursive Schrift");
console().style().normal().log("Normale Schrift");

Texttransformation

Steuern Sie die Großschreibung der Zeichen in einer Nachricht mit der Methode transform(), die den TextTransformBuilder zurückgibt. Verwenden Sie zum Beispiel die Methode capitalize(), um den ersten Buchstaben jedes Wortes in Großbuchstaben zu verwandeln.

// Transform Beispiele
// Großschreibung Texttransformation
console().transform().capitalize().log("Großschreibung Texttransformation");
// GROßBUCHSTABEN TEXTTRANSFORMATION
console().transform().uppercase().log("Großbuchstaben Texttransformation");

Schriftgewicht

Legen Sie fest, wie dick der Text ist, mit der Methode weight(), die den FontWeightBuilder zurückgibt. Verwenden Sie zum Beispiel die Methode ligther(), um die Schrift leichter als normal zu machen.

// Gewicht Beispiele
console().weight().bold().log("Fette Schrift");
console().weight().lighter().log("Leichtere Schrift");

Stile mischen

Es ist möglich, Methoden zu kombinieren und anzupassen, um eine benutzerdefinierte Protokollanzeige zu erstellen.

// Eine Vielzahl von Optionen für benutzerdefinierte Protokollanzeige
console()
.weight().bolder()
.size().larger()
.color().gray()
.style().italic()
.transform().uppercase()
.background().blue()
.warn("Stile mischen");