MR WHY

I am
Wang Hongyang

Wechat Official Account
Find fun things here!

Console Log Big Emoji

I use console.log to debug JavaScript codes. It's a painful process as I said: it is debug. When bugs are found, console.log("Bugs, again") works and logs this in console: "Bugs, again." It's definitely not a happy moment. 😨 = my face.

Bugs, again. 😨

Am I the only one who feel emotional when console is logging bugs and want to add emoji to the output?

I Googled, felt happy to be not alone: Ines Montani implemented console.emoji to add emoji to the logging message based on console.frog developed by Tim Holman. Here is the way to re-define console.log as you want: for example, console.poop 💩, console.myface 😨:

// Define your custom commands and emoji
var commands = [
  [ "myface", "😨"],
  [ "poop", "💩"]
];

(function() {
  if(!window.console) return;

  // Create custom commands
  commands.forEach(function(command) {
    window.console[command[0]] = function() {

      // Get arguments as a string
      var args = Array.prototype.slice.call(arguments).toString().split(',').join(', ');

      // Log to the console with emoji
      console.log(args + " " + command[1]);
    }
  });
})();

// Log to the console!
console.myface("Bugs, again.");

Cool! Now console become emotional with emoji (like my mind...). It's showing:

Bugs, again. 😨

Wait... Something goes wrong. My mind is more like this:

Bugs, again. 😨

It should be bigger, bigger, and bigger, to be more, more, and more emotional. Eric Mill gives the way to hack the developer console to be interactive:

console.log("%c bigger, bigger, and bigger.", "font-size: 100px");

Finally, the big emotional console.myface is here:

// Define your custom commands and emoji
var commands = [
  [ "myface", "😨"],
  [ "poop", "💩"]
];

(function() {
  if(!window.console) return;

  // Create custom commands
  commands.forEach(function(command) {
    window.console[command[0]] = function() {
  
      // Second argument is size, default is 11px
      var size = 11;
      if(arguments.length > 1) {
        size = [].pop.call(arguments);
      }

      // Get arguments as a string
      var args = Array.prototype.slice.call(arguments).toString().split(',').join(',');

      // Log to the console with emoji
      console.log("%c" + args + " " + command[1], "font-size: " + size + "px");
    }
  });
})();

// Log to the console!
console.myface("Bugs, again.", 100);

Yeah. This is what in my mind when bugs are logged!

34

分享本文:

TOC