
Console.log with style - afschwartz
http://adamschwartz.co/log
======
goodside
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.

~~~
windsurfer
You actually can get the line number of a caller in JS:
<https://github.com/eriwen/javascript-stacktrace>

~~~
niggler
You can just parse (new Error).stack:

    
    
        var __LINE__ = (new Error).stack.split("\n")[1].match(/:([0-9]+):/)[1];

~~~
cristiantincu
`(new Error()).stack` is non-standard. But that’s a nice hack, nevertheless.

~~~
niggler
The underlying construct (console.log processing "%c" and styles) is
nonstandard to begin with.

~~~
cristiantincu
Yes. It will not break, though.

Unless you’re running it on an old IE that doesn’t host the `window.console`
object.

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

~~~
jQueryIsAwesome
This "console"... IE5 didn't even have console... and event the current one IE
haves is a joke compared to firefox or chrome.

~~~
g8oz
I think parent is referring to the bad old days of browser specific sites.

~~~
jQueryIsAwesome
The features of the console is not really a usability issue.

------
baddox
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.

~~~
afschwartz
Just updated the instructions:
[https://github.com/adamschwartz/log/commit/919f8ffac919f0183...](https://github.com/adamschwartz/log/commit/919f8ffac919f0183cb82c1455a1fd6a4455128c)

Basically just open the javascript console.

~~~
niggler
I think OP wanted ⌘ and ⌥ spelled out (command and option respectively)

------
suyash
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);');﻿

~~~
suyash
btw orignal Creator is Sindre Sorhus -- try this var _log = console.log;
console.log = function() { _log.call(console, '%c' +
[].slice.call(arguments).join(' '), 'color:transparent;text-shadow:0 0 2px
rgba(0,0,0,.5);'); };

Then run some console.log("Hello Console") or other statements after executing
the function above and see the prank ;)

------
eranation
Didn't know it's possible, I need to read Addy Osmani's posts more often
(<https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn>)

------
jastanton
These are the CSS attr's they accept

    
    
      ["background", "border", "color", "font", "line", "margin", "padding", "text", "-webkit-background", "-webkit-border", "-webkit-font", "-webkit-margin", "-webkit-padding", "-webkit-text"]
    

Try this:

    
    
      console.log("%c ", 'background: url("http://placekitten.com/200/200"); padding: 5000px')
    

edit: put my code snippets in code blocks

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

------
jgalt212
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 _Developer
Tools_ window open.

[http://stackoverflow.com/questions/3326650/console-is-
undefi...](http://stackoverflow.com/questions/3326650/console-is-undefined-
error-for-internet-explorer)

<http://yuilibrary.com/yui/docs/console/>

------
tiwazz
Really cool!

I don't want to sound nitpicky buuuuuut in text based emails folks have been
using _bold_ , /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?

~~~
Skoofoo
I once tried to write a markup parser with slashes for italics, then I
understood why no parser seems to use them. It interferes with URLs, dates,
slashes as "or", etc.

~~~
riffraff
AFAIR thunderbird used it

------
solox3
Cool find aside, it must degrade gracefully on a non-Chrome console.

Edit: also, try log('this is code: `a =* `= b* == c`');

------
nollidge
If anybody else is wondering how this is possible:

[https://developers.google.com/chrome-developer-
tools/docs/co...](https://developers.google.com/chrome-developer-
tools/docs/console#styling_console_output_with_css)

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

~~~
afschwartz
Update to Chrome 26 (latest stable)

~~~
nevir
That's kinda surprising; WebKit's has had support for this for 6 months now:
[https://trac.webkit.org/browser/trunk/Source/WebCore/inspect...](https://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-
end/ConsoleMessage.js?rev=130941) (I thought chromium was pretty quick to bump
webkit revs)

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

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

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

