Let's have fun with console.log

Console.log(...) is a familiar method to anyone who has developed a web app; it prints data to the developer console and can be used for testing, logging, and debugging.

If you run the command console.log(console), you'll notice that the console object has a lot more functionality than you initially thought.

This post will provide a concise overview of the top cool tricks that you can utilize to take your logging experience to the next level.

Tables

The console.table() method generates output that is in the form of tables that are neatly formatted.

console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

Groups

Console.group allows you to group console statements that are related together and create sections that can be collapsed ().

You have the option of providing a title for a section by passing a string to the parameter in question. You can collapse and expand sections using the console; however, you can also set a section to always be collapsed by default by using the groupCollapsed function rather than the group function. You can also nest sub-sections within sections, but you must keep in mind to finish off each group by using the groupEnd command.

console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

Styled Logs

It is possible to style the output of your logs by using some fundamental CSS, such as changing the colors, fonts, text styles, and sizes. Take note that the level of support offered by browsers varies quite a bit.

console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

Time

One more common method of debugging is called measuring execution time, and its purpose is to determine how long an operation takes. This can be done by beginning the process of timing using the console.time() followed by passing in a label, and finally stopping the timer via the console.timeEnd(), making use of the previous label. Through the use of the console.timelog(), it is also possible to add markers while an operation is still running.

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

Log Levels

You may have noticed that the browser console has several filters (info, warnings, and error), and that these filters give you the ability to change the amount of verbosity in the data that is logged. Simply replace your existing log statements with one of the following to begin utilizing these filters:

• console.info() - Informational messages for logging purposes, commonly includes a small "i" and / or a blue background
• console.warn() - Warnings / non-critical errors, commonly includes a triangular exclamation mark and / or yellow background
• console.error() - Errors which may affect the functionality, commonly includes a circular exclamation mark and / or red background

Log String Formats

You can use format specifiers in conjunction with printf in a C-style program to create formatted strings for output if this is a requirement.

%s - String or any other type converted to string
%d / %i - Integer
%f - Float
%o - Use optimal formatting
%O - Use default formatting
%c - Use custom formatting (more info)

Visit the Chrome Dev Console Docs or the MDN console Documentation for additional details and information.