Lesser Known Features of the Browser Console
The browser console is a frontend developers best friend.
While we are all aware of the basic methods like
console.error(), are you aware of some of the lesser known, but still powerful, features?
Let's dive in!
console.groupEnd() methods, we can easily group console output within collapsible groups and subgroups.
console.group( groupName )
Starts a new group with the supplied name.
console.groupCollapsed( groupName )
Starts a new group with the supplied name that is collapsed by default.
Ends the current console group.
console.trace(), you can use string substitution within the message that is passed into the method.
%i - Integer (Number formatting is supported, only in Firefox and Safari, per my testing)
%s - String
%f - Floating-point value (Number formatting is supported, only in Firefox and Safari, per my testing)
Styling Console Output
%c specifier in strings allows us to apply styles to console output. The output string in the first parameter has the style rules in the subsequent parameters applied to it in their respective places in the string.
console.assert() you can validate an assertion and write an error message to the console if the assertion fails.
console.count() you can create a simple counter that will count the number of times it is called with the specified label.
console.countReset(), you can easily reset that counter.
Where the profiling data is displayed depends on the browser being used.
In Firefox, you'll find the profiling data within the Performance tab in the developer tools.
And the data is displayed in the main frame of the developer tools.
It should be noted that this feature is not standard in the specification, so do not use it in production at all.
Formatting Tabular Output
You can format an object as tabular data very easily using
You are able to pass any primitive values here also, but they render like how
Objects are where this method really shines.
console.trace() method, we can print a stack trace to the web console.
You can also pass in data parameters and they will be formatted like