console.log()Ā method logs any string to console window of the browser. But you know, there is a way to provide style to string message even we can draw images šŸ˜‰ like inĀ facebookĀ prints in console window
facebook styled console log message

Here is console.log signature

 console.log(msg [, subst1, ..., substN]);
The first parameter is the message that you want to print in theĀ console and theĀ second parameter is theĀ array of format style properties like font-color,font-size etc. This gives you additional control over the format of the output.

So to print theĀ message like Facebook does. Here is the code

console.log("%cStop!", "color: red; font-family: sans-serif; font-size: 4.5em; font-weight: bolder; text-shadow: #000 1px 1px;");

Even we can draw images like this

(function(url) {
  // Create a new `Image` instance
  var image = new Image();
  image.onload = function() {
    // Inside here we already have the dimensions of the loaded image
    var style = [
      // Hacky way of forcing image's viewport using `font-size` and `line-height`
      'font-size: 1px;',
      'line-height: ' + this.height + 'px;',
      // Hacky way of forcing a middle/center anchor point for the image
      'padding: ' + this.height * .5 + 'px ' + this.width * .5 + 'px;',
      // Set image dimensions
      'background-size: ' + this.width + 'px ' + this.height + 'px;',
      // Set image URL
      'background: url('+ url +');'
     ].join(' ');
     console.log('%c', style);
  // Actually loads the image
  image.src = url;
The above code will draw image in the console like this
image in console window of browser

For more detail on console.log

Leave Comment

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