Console
How to use the Console class of the bit Butil?
Usage
To use the browser console features you need to inject the Bit.Butil.Console class and use it like this:
@inject Bit.Butil.Console console
@code {
console.Log("This is a test log:", value);
console.Error("This is a test error:", value);
console.Assert(condition, "The condition failed!", value);
}Methods
Assert:
Log a message and stack trace to console if the first argument is false (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Assert(false, "This is a test assert:", value))">Assert</BitButton>
@code {
private string value = "Test";
}Count:
Log the number of times this line has been called with the given label (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Count(value))">Count</BitButton>
@code {
private string value = "Test";
}CountReset:
Resets the value of the counter with the given label (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.CountReset(value))">CountReset</BitButton>
@code {
private string value = "Test";
}Debug:
Outputs a message to the console with the log level debug (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Debug(value))">Debug</BitButton>
@code {
private string value = "Test";
}Dir:
Displays an interactive listing of the properties of a specified JavaScript object (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Dir(value))">Dir</BitButton>
@code {
private string value = "Test";
}Dirxml:
Displays an XML/HTML Element representation of the specified object if possible or the JavaScript Object view if it is not possible (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Dirxml(value))">Dirxml</BitButton>
@code {
private string value = "Test";
}Error:
Outputs an error message. You may use string substitution and additional arguments with this method (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Error("This is a test error:", value))">Error</BitButton>
@code {
private string value = "Test";
}Group:
Creates a new inline group, indenting all following output by another level. To move back out a level, call console.groupEnd() (MDN).
@inject Bit.Butil.Console console
<BitButton OnClick="CreateGroupLogs">Create group logs</BitButton>
@code {
private async Task CreateGroupLogs()
{
await console.Log("This is the outer level");
await console.Group();
await console.Log("Level 2");
await console.Group();
await console.Log("Level 3");
await console.Warn("More of level 3");
await console.GroupCollapsed();
await console.Log("Back to level 2");
await console.GroupEnd();
await console.Log("Back to the outer level");
}
}GroupCollapsed:
Creates a new inline group, indenting all following output by another level. However, unlike console.group() this starts with the inline group collapsed requiring the use of a disclosure button to expand it. To move back out a level, call console.groupEnd() (MDN).
@inject Bit.Butil.Console console
<BitButton OnClick="CreateGroupLogs">Create group logs</BitButton>
@code {
private async Task CreateGroupLogs()
{
await console.Log("This is the outer level");
await console.Group();
await console.Log("Level 2");
await console.Group();
await console.Log("Level 3");
await console.Warn("More of level 3");
await console.GroupCollapsed();
await console.Log("Back to level 2");
await console.GroupEnd();
await console.Log("Back to the outer level");
}
}GroupEnd:
Exits the current inline group (MDN).
@inject Bit.Butil.Console console
<BitButton OnClick="CreateGroupLogs">Create group logs</BitButton>
@code {
private async Task CreateGroupLogs()
{
await console.Log("This is the outer level");
await console.Group();
await console.Log("Level 2");
await console.Group();
await console.Log("Level 3");
await console.Warn("More of level 3");
await console.GroupCollapsed();
await console.Log("Back to level 2");
await console.GroupEnd();
await console.Log("Back to the outer level");
}
}Info:
Informative logging of information. You may use string substitution and additional arguments with this method (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Info("This is a test info:", value))">Info</BitButton>
@code {
private string value = "Test";
}Log:
For general output of logging information. You may use string substitution and additional arguments with this method (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Log("This is a test log:", value))">Log</BitButton>
@code {
private string value = "Test";
}Warn:
Outputs a warning message (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Warn("This is a test warn:", value))">Warn</BitButton>
@code {
private string value = "Test";
}Table:
Displays tabular data as a table (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Table(new {Name = "Value", Value = value }))">Table</BitButton>
@code {
private string value = "Test";
}Profile:
Starts the browser's built-in profiler (for example, the Firefox performance tool). You can specify an optional name for the profile (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Profile(value))">Profile</BitButton>
@code {
private string value = "Test";
}ProfileEnd:
Stops the profiler. You can see the resulting profile in the browser's performance tool (for example, the Firefox performance tool) (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.ProfileEnd(value))">ProfileEnd</BitButton>
@code {
private string value = "Test";
}Time:
Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Time(value))">Time</BitButton>
@code {
private string value = "Test";
}TimeLog:
Logs the value of the specified timer to the console (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.TimeLog(value))">TimeLog</BitButton>
@code {
private string value = "Test";
}TimeEnd:
Stops the specified timer and logs the elapsed time in milliseconds since it started (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.TimeEnd(value))">TimeEnd</BitButton>
@code {
private string value = "Test";
}TimeStamp:
Adds a marker to the browser performance tool's timeline (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.TimeStamp(value))">TimeStamp</BitButton>
@code {
private string value = "Test";
}Trace:
Outputs a stack trace (MDN).
@inject Bit.Butil.Console console
<BitTextField @bind-Value="value" />
<BitButton OnClick="@(() => console.Trace(value))">Trace</BitButton>
@code {
private string value = "Test";
}Clear:
Clear the console (MDN).
@inject Bit.Butil.Console console <BitButton OnClick="@(() => console.Clear(value))">Clear</BitButton>