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!