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

Categories: JavascriptTricks

Leave a Reply

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

Related Posts


HTML : Properties and Attributes

Properties and attributes of a DOM element seem same but there is a difference between these two terms.¬†When writing HTML source code, attributes are defined in HTML elements. Browser parses HTML code and a corresponding Read more…

Interview Questions

Lexical Scope

Scope is the area or location within the program where a variable or function is accessible. Lexical also called static Scoping defines how variable names are resolved in nested functions: inner functions contain the scope Read more…

Coding Tricks

How to get saved password in browser

Sometimes we have saved password on different websites. You can see the User Name but Password is in dots. In HTML language, User Name is visible because its type is text and Password field is in dots Read more…