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



  1. I love the cap, but I’d love it even more if it came in WooCommerce purple.


2 Comments In This Topic

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