If you've ever written a web app, you've probably used console.log(...), which prints data to the developer console and is useful for debugging, logging, and testing.


You can try running console.log(console) and you can see there are a lot more of the console objects.


This blog is about making your console experience a lot more interesting and leveling up the coding standard.


Tables

The console.table() method prints objects/ arrays as neatly formatted tables.


Example:

console.table({

  'Time Stamp': new Date().getTime(),

  'OS': navigator['platform'],

  'Browser': navigator['appCodeName'],

  'Language': navigator['language'],

});


Output:



Group


Group related console statements together with collapsible sections, using console.group(). 

You can optionally give a section a title, by passing a string as the parameter. Sections can be collapsed and expanded in the console, but you can also have a section collapsed by default, by using groupCollapsed instead of the group. You can also nest sub-sections within sections but be sure to remember to close out each group with groupEnd.


Example:


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();


Output:




Styled Logs

It's possible to style your log outputs with some basic CSS, such as colors, fonts, text styles and sizes. Note that browser support for this is quite variable.  


Example:


console.log(

  '%cHello World!',

  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'

);


Output:




Time


Another common debugging technique is measuring execution time, to track how long an operation takes. This can be achieved by starting a timer using console.time() and passing in a label, then ending the timer using console.timeEnd(), using the same label. You can also add markers within a long-running operation using console.timeLog()


Example:


console.time("concatenation");

let output = "";

for (var i = 1; i <= 1e6; i++) {

  output += i;

}

console.timeEnd("concatenation");


Output:




There's also a non-standard method, console.timeStamp() which adds markers within the performance tab, so you can correlate points in your code with the other events recorded in the timeline like paint and layout events.


Assert


You may only want to log to the console if an error occurs, or a certain condition is true or false. This can be done using console.assert(), which won't log anything to the console unless the first parameter is false.


The first parameter is a boolean condition to check, followed by 0 or more data points you'd like to print, and the last parameter is a message to output. So console.assert(false, 'Value was false') will output the message, since the first parameter is false.


Example:


const errorMsg = 'the # is not even';

for (let num = 2; num <= 5; num++) {

  console.log(`the # is ${num}`);

  console.assert(num % 2 === 0, { num }, errorMsg);

}


Output:




Count


Ever find yourself manually incrementing a number for logging? console.count() is helpful for keeping track how many times something was executed, or how often a block of code was entered.


You can optionally give your counter a label, which will let you manage multiple counters and make the output clearer. Counters will always start from 1. You can reset a counter at anytime with console.countReset(), which also takes an optional label parameter.


Example:


const numbers = [1, 2, 3, 30, 69, 120, 240, 420];

numbers.forEach((name) => {

  console.count();

});


Output:




Trace

In JavaScript, we're often working with deeply nested methods and objects. You can use console.trace() to traverse through the stack trace, and output which methods were called to get to a certain point.


Example:


<button onclick="myFunction()">Start Trace</button>

<script>

function myFunction() {

  myOtherFunction();

}


function myOtherFunction() {

  console.trace();

}

</script>


Output:




Dir


If your logging a large object to the console, it may become hard to read. The console.dir() method will format it in an expandable tree structure.


Example:


console.dir(document.location);


Output:



You can also print XML or HTML based trees in a similar way, by using console.dirxml().


Debug


You may have some logging set up within your app, that you rely on during development, but don't wish the user to see. Replacing log statements with console.debug() will do just this, it functions in exactly the same way as console.log but will be stripped out by most build systems, or disabled when running in production mode.


Log Levels


You may have noticed that there's several filters in the browser console (info, warnings and error), they allow you to change the verbosity of logged data. To make use of these filters, just switch out log statements with one of the following:


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


Multi-Value Logs


Most functions on the console object will accept multiple parameters, so you can add labels to your output, or print multiple data points at a time, for example: console.log('User: ', user.name);


But an easier approach for printing multiple, labelled values, is to make use of object deconstructing. For example, if you had three variables (e.g. x, y and z), you could log them as an object by surrounding them in curly braces, so that each variables name and value is outputted - like console.log( { x, y, z } );


 Log String Formats


If you need to build formatted strings to output, you can do this with C-style printf using format specifiers.


The following specifiers are supported:


  • %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


Example:

console.log("Hello %s, welcome to the year %d!", "the coding dev", new Date().getFullYear());

// Hello the coding dev, welcome to the year 2022!


Clear


When you're looking for an output from an event, you might want to get rid of everything logged to the console when the page first loaded. This can be done with console.clear(), which will clear all content, but nor reset any data.


These were the console methods used for different  required output. I hope you will be using some of them.