Console.log with style

The problem with wrapping console.log is that you lose the ability to know what line number initiated the log entry. The line number Chrome gives for the log line will always be where you call console.log inside the wrapper, not the line where you call the wrapper. Since there's no way to grab the line number of a caller in JS (Chrome's dev console uses browser hooks unavailable in JS), you can't even emulate the line number reporting yourself as a suffix to the log entry.

It's missing "This site is best viewed in IE5"... Err, I mean Chrome, but it's the same.

I'm on OS X with an external keyboard, and I gave up after trying 3 or 4 keyboard combinations. I literally don't know for sure what key any of the three symbols is referring to.

Try this: console.log('%cHello world', 'font-size:100px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);');

Didn't know it's possible, I need to read Addy Osmani's posts more often (<a href="https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn" rel="nofollow">https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn</a>)

These are the CSS attr's they accept<p><pre><code> ["background", "border", "color", "font", "line", "margin", "padding", "text", "-webkit-background", "-webkit-border", "-webkit-font", "-webkit-margin", "-webkit-padding", "-webkit-text"] </code></pre> Try this:<p><pre><code> console.log("%c ", 'background: url("http://placekitten.com/200/200"); padding: 5000px') </code></pre> edit: put my code snippets in code blocks

Um, great, how am I supposed to trust the console if even logging in that one can be screwed up?

YUI has a pretty nice console.log wrapper with tons of extra functionality. I don't use all of its functionality, but it does have the nice feature of not breaking IE when calling console.log without first having the <i>Developer Tools</i> window open.<p><a href="http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet-explorer" rel="nofollow">http://stackoverflow.com/questions/3326650/console-is-undefi...</a><p><a href="http://yuilibrary.com/yui/docs/console/" rel="nofollow">http://yuilibrary.com/yui/docs/console/</a>

Really cool!<p>I don't want to sound nitpicky buuuuuut in text based emails folks have been using <i>bold</i>, /italics/, _underlining_, and {{{ preformatted }}} text for a long time with slightly different syntax. How attached are you to the one you chose? Would you be open to accepting a patch to use the older syntax?

Cool find aside, it must degrade gracefully on a non-Chrome console.<p>Edit: also, try log('this is code: `a =* `= b* == c`');

If anybody else is wondering how this is possible:<p><a href="https://developers.google.com/chrome-developer-tools/docs/console#styling_console_output_with_css" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/co...</a>

Is there anything I need to get this to work? It doesn't work for me in OS X on Chrome 23

This seems like a terrible idea. Another potential failure point for no good reason.

Holy crap that's beautiful. Thanks for showing this off.

firefox 20.0 on mac osx 10.8.2, not working for me :(