console.皮皮虾,我们走!

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. The message in my mind is much bigger than that. 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!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容