Skip to content

Instantly share code, notes, and snippets.

@tarwn
Created March 13, 2014 02:08
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tarwn/9520722 to your computer and use it in GitHub Desktop.
Save tarwn/9520722 to your computer and use it in GitHub Desktop.
Awesomify-er your console.log - extended from https://gist.github.com/LeaVerou/9518902
(function(){
var log = console.log;
console.log = function(str) {
var css = 'background-image: url("http://fc07.deviantart.net/fs70/f/2013/090/3/5/ocs____seine_unicorn_sprite_by_onisuu-d5zuuax.gif"), linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); background-repeat: no-repeat, no-repeat; padding-left: 20px; color: white; font-weight: bold; font-size: 12pt; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;';
var args = Array.prototype.slice.call(arguments);
args[0] = '%c ' + args[0];
args.splice(1,0,css);
return log.apply(console, args);
}
})();
@tarwn
Copy link
Author

tarwn commented Mar 13, 2014

@kozie
Copy link

kozie commented Mar 13, 2014

The no-repeat does not seems to work in Chrome. It's like it's being ignored..

@tarwn
Copy link
Author

tarwn commented Mar 13, 2014

So it looks like mixed results. Chrome doesn't do no-repeat, firefox native does something incorrect (who doesn't use firebug?), and firebug works. And of course IE doesn't support the styling at all (surprise!). Time for coffee.

@chutten
Copy link

chutten commented Mar 13, 2014

Filed http://crbug.com/352140 for the Chrome no-repeat problem.

@chutten
Copy link

chutten commented Apr 15, 2014

Bug fixed, should be good to go in some future release. Apparently background-repeat wasn't considered to be a valid property by one of blink's css parsers... which makes me wonder how it worked on webpages.

@tarwn
Copy link
Author

tarwn commented Apr 14, 2023

(function(){
var log = console.log;
 
console.log = function(str) {
var css = 'background-image: url(data:image/gif;base64,R0lGODlhFQAVAKIHAP//wk8UG2znwl21s1NsmPeuwt91sf///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJFAAHACwAAAAAFQAVAAADdHi63L4BvhlArJGyMETAlLd1QWFtVyAq1QAYJysMKs1WQJ7btSAAs48O4MqtVMCOB2fU2Q6qmfQy1AWjAwIJwqzuCL4Mymt9OrpVsHlDznHEZ/JlwnILT/C4ZelePSozJElbf0QEHy2HeRsFBhkljnRcKA4JACH5BAUUAAcALAAAAAAVABUAAAN1eBp63DAuwAKV7a0hgtVR0EEBFxRXVomaNQBG6giDWC8WoOu3LQgAmmcHeOlGsyCnkzvubjOatELcCUU0gklVrQ4IPxCua4VKml2wmUTWlcTsbgWTcQ8v8Dgrx6I7lCaASGdFBB4uhnkLBQYPJ41+KiSKkX4JADs=), linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red); background-repeat: no-repeat, no-repeat; padding-left: 20px; color: white; font-weight: bold; font-size: 12pt; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;';
var args = Array.prototype.slice.call(arguments);
args[0] = '%c   ' + args[0];
args.splice(1,0,css);
return log.apply(console, args);
}
})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment