美文网首页Web前端之路@IT·互联网
console.皮皮虾,我们走!

console.皮皮虾,我们走!

作者: HongyangWang | 来源:发表于2017-02-26 05:12 被阅读132次

    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!

    相关文章

      网友评论

        本文标题:console.皮皮虾,我们走!

        本文链接:https://www.haomeiwen.com/subject/sxqowttx.html