Browser Console Commands

Written by
Published
Typical Read
2 minutes

You already know about and use console.log(), but are you using these other useful browser console commands — you can even customize them.

tl;dr

// Depending on the message, console.log may not be the best choice.
console.log('For general output of logging information.');
console.info('Informative logging of information.');
console.debug('Outputs a message to the console with the log level debug.');
console.warn('Outputs a warning message.');
console.error('Outputs an error message.');
console.assert(number % 2 === 0, {number, 'Log a message and stack trace to console if the first argument is false.'});
console.clear(); // Clears the console.
console.count(); // Log the number of times this line has been called with the given label.
console.dir(objectVar); // Displays an interactive list of the properties of the specified JavaScript object.
console.group(); // Creates a new inline group, indenting all following output by another level. To move back out a level, call groupEnd().
console.groupEnd(); // See the command above.
console.memory; // The memory property can be used to check out the heap size status.
console.table([]); // Displays tabular data as a table.
console.time(); // Starts a timer with a name specified as an input parameter. Up to 10,000 simultaneous timers can run on a given page.
console.timeEnd(); // Stops the specified timer and logs the elapsed time in seconds since it started.
console.trace(); // Outputs a stack trace.

// You can also apply custom CSS styles.
console.log('%c Message with a background', 'color:white;font-size:2em;background:teal');

Browser Console Commands

It’s common practice for web developers to use console commands like console.log during development for debugging. But many developers use just that and only that, console.log.

Learn how to become a browser console command pro with these tips on what and when to use certain console commands you can even customize them.

Common console methods

  • console.log() – For general output of logging information.
  • console. info() – Informative logging of information.
  • console.debug() – Outputs a message to the console with the log level debug.
  • console.warn() – Outputs a warning message.
  • console.error() – Outputs an error message.

Customize the look

The console.log output can be styled in DevTools using the CSS format specifier.

console.log('%c Message with a background', 'color:white;font-size:2em;background:teal');

Console string substitutions

When passing a string to one of the console object’s methods that accept a string (such as log()), you may use these substitution strings:

  • %s – string
  • %i or %d – integer
  • %o or %0 – object
  • %f – float
for (var i=0; i<=3; i++) {
  console.log('Hello, %s. I\'ve seen you %d times.', 'Ben', i+1);
}

In conclusion

Don’t get stuck using the same console.log command for debugging, there are other more useful and informative browser console commands that’ll help improve your coding-fu.

Join the conversation.

Your email address will not be published. Required fields are marked *

All comments posted on 'Browser Console Commands' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.

You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.

Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.