Skip to main content

Browser Console

Using the browser's console to print valuable program information is an integral part of the development process. The BrowserConsole utility class comes with a slew of features to enhance logging capabilities.

Instance​

Get an instance of BrowserConsole using the App.console() method. Print any Object desired as one of the five log types: log, info, warn, error, or debug.

import static com.webforj.App.console;
// Types
console().log("Log message");
console().info("Info message");
console().warn("Warn message");
console().error("Error message");
console().debug("Debug message");

Styling​

Use the builder methods to set the appearance of the log message. Each builder has options to change a specific property. It's also possible to mix multiple styles. Once a console message prints, any styling applied won't carry over to subsequent messages unless explicitly redefined.

tip

Use the setStyle method to change the properties of the BrowserConsole log not specified by the builders.

Background Color​

Set the background color with the background() method, which returns the BackgroundColorBuilder. Use methods named by color, like blue(), or choose a specific value with colored(String color).

// Background Examples
console().background().blue().log("Blue background");
console().background().colored("#031f8f").log("Custom blue background");

Text Color​

Set the text color with the color() method, which returns the ColorBuilder. Use methods named by color, like red(), or choose a specific value with colored(String color).

// Color Examples
console().background().red().log("Red text");
console().color().colored("#becad2").log("Custom light bluish-gray text");

Font Size​

Set the font size with the size() method, which returns the FontSizeBuilder. Use methods named by a size, like small(), or choose a specific value with from(String value).

//Size Examples
console().size().small().log("Small font");
console().size().from("30px").log("30px font");
tip

The from(String value) method can take other font size values, such as rem and vw.

Font Style​

Set the font style with the style() method, which returns the FontStyleBuilder. For example, use the italic() method to make the console log italicized.

// Style Examples
console().style().italic().log("Italic font");
console().style().normal().log("Normal font");

Text Transformation​

Control the capitalization of the characters in a message with the transform() method, which returns the TextTransformBuilder. For example, use the capitalize() method to transform the first letter of each word to uppercase.

// Transform Examples
// Capitalize Text Transformation
console().transform().capitalize().log("Capitalize text transformation");
// UPPERCASE TEXT TRANSFORMATION 
console().transform().uppercase().log("Uppercase text transformation");

Font Weight​

Set how thick the text is with the weight() method, which returns the FontWeightBuilder. For example, use the ligther() method to make the font lighter than normal.

// Weight Examples
console().weight().bold().log("Bold font");
console().weight().lighter().log("Lighter font");

Mixing Styles​

It's possible to mix and match methods for a custom logging display.

// A variety of options for custom logging display
console()
    .weight().bolder()
    .size().larger()
    .color().gray()
    .style().italic()
    .transform().uppercase()
    .background().blue()
    .warn("Mixing styles");