DEV Community

Cover image for Lesser Known Features of the Browser Console
Kevin Langley Jr
Kevin Langley Jr

Posted on

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.log(), console.warn(), console.debug(), or console.error(), are you aware of some of the lesser known, but still powerful, features?

Let's dive in!

Grouping Output

With the console.group(), console.groupCollapsed(), and 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.

console.groupEnd()

Ends the current console group.

console.group('Group #1');
console.log( 'Item 1' );
console.log( 'Item 2' );
console.log( 'Item 3' );
console.log( 'Item 4' );
console.group('Subgroup');
console.log( 'Subitem 1' );
console.log( 'Subitem 2' );
console.log( 'Subitem 3' );
console.log( 'Subitem 4' );
console.groupEnd();
console.groupEnd();
console.groupCollapsed('Collapsed Group');
console.log( 'Collapsed item 1' );
console.log( 'Collapsed item 2' );
console.log( 'Collapsed item 3' );
console.log( 'Collapsed item 4' );
console.groupEnd();
Enter fullscreen mode Exit fullscreen mode

Grouping console output

String Substitutions

When using console.assert(), console.log(), console.info(), console.warn(), console.error(), or console.trace(), you can use string substitution within the message that is passed into the method.

%o or %O - JavaScript object

const user = { name: 'Kevin' };

console.log( 'The user is %o!', user );
// The user is ▸ {name: 'Kevin'}!
Enter fullscreen mode Exit fullscreen mode

%d or %i - Integer (Number formatting is supported, only in Firefox and Safari, per my testing)

const count = 123;

console.info( 'The count is %d!', count );
// The count is  123!

console.info( 'The count is %.4d!', count ); // This only works in Firefox and Safari 😕
// The count is 0123!
Enter fullscreen mode Exit fullscreen mode

%s - String

const name = 'Kevin';
const state = 'Florida';

console.warn( 'Hi my name is %s and I am from %s!', name, state );
// Hi my name is Kevin and I am from Florida!
Enter fullscreen mode Exit fullscreen mode

%f - Floating-point value (Number formatting is supported, only in Firefox and Safari, per my testing)

const average = 8.987;

console.log( 'The average is %f!', average );
// The average is 8.987000!

console.log( 'The average is %.4f!', average ); // This only works in Firefox and Safari 😕
// The average is 8.9870!

const error = { errorMessage: 'It failed!' };

console.error( 'The error was %o', error );
// The error was {errorMessage: 'It failed!'}
Enter fullscreen mode Exit fullscreen mode

Styling Console Output

Using the %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.log('%cStyled content #1!', 'background: #222; color: #f9b434');
Enter fullscreen mode Exit fullscreen mode

Output of single styled content in the browser console

console.log('%cStyled content #1! %cStyled Content #2!', 'background: #222; color: #f9b434', 'background: #f9b434; color: #222;');
Enter fullscreen mode Exit fullscreen mode

Output of multiple styled content in the browser console

console.log('%cJavaScript', 'font-weight: 700; font-size: 50px; color: #fff; text-shadow: 3px 3px 0 #f00, 6px 6px 0 #ffa500, 9px 9px 0 #ff0, 12px 12px green, 15px 15px #00f, 18px 18px #4b0082, 21px 21px #ee82ee;' );
Enter fullscreen mode Exit fullscreen mode

Output heavily styled content in the browser console

Assertions

Using console.assert() you can validate an assertion and write an error message to the console if the assertion fails.

console.assert( assertion, obj [obj2, ..., objN]);
console.assert( assertion, msg [strSub, ..., strSubN]);
Enter fullscreen mode Exit fullscreen mode
let value = true;

console.assert( value, { error: 'Did not work', value } ); // No output

value = false;

console.assert( value, { error: 'Did not work', value } );
// Assertion failed: {error: 'Did not work', value: false}

console.assert(false, 'This is a %o test', { error: 'Did not work', value } );
// Assertion failed: This is a ▾ {error: 'Did not work', value: false} test
Enter fullscreen mode Exit fullscreen mode

Counting Instances

Using console.count() you can create a simple counter that will count the number of times it is called with the specified label.
And with console.countReset(), you can easily reset that counter.

console.count([label]);
console.countReset([label]);
Enter fullscreen mode Exit fullscreen mode
const order = [ 'item1', 'item2', 'item3' ];

function processItem( item ) {
  console.count( item );

  return item;
}

for (const item of order) {
  processItem( item );
}

// item1: 1
// item2: 1
// item3: 1

processItem( order[0] );
processItem( order[0] );
processItem( order[0] );
processItem( order[1] );

// item1: 2
// item1: 3
// item1: 4
// item2: 2

// Let's reset the count.
console.countReset( order[0] );


// Let's count it once more to show it starts at 0 again.
processItem( order[0] );

// item1: 1
Enter fullscreen mode Exit fullscreen mode

Browser Profiling

With the console.profile() and console.profileEnd() methods, you can easily run some JavaScript profiling.
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.
Firefox Performance Tab

In Chrome, you'll find the JavaScript Profiler tab by navigating to the three-dot menu -> More tools -> JavaScript Profiler.

Chrome JavaScript Profiler Tab Location

And the data is displayed in the main frame of the developer tools.

Chrome JavaScript Profiler Tab Data

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 console.table()!
You are able to pass any primitive values here also, but they render like how console.log() does.
Objects are where this method really shines.

const user = { name: 'Kevin', location: 'Florida', age: 33 };
console.table(user);
Enter fullscreen mode Exit fullscreen mode

Output of console.table();

Stack Trace

Wth the 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 console.log is.

function testTrace() {
  console.trace();
}

testTrace();

// console.trace
// testTrace
// (anonymous)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)