11 ms·

Console.log with style

236 points by afschwartz 14y ago

deleted 14y ago
[deleted]
baddox 14y ago
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 14y ago
  Just updated the instructions: https://github.com/adamschwartz/log/commit/919f8ffac919f0183cb82c1455a1fd6a4455128c https://github.com/adamschwartz/log/commit/919f8ffac919f0183... Basically just open the javascript console.
  - niggler 14y ago
    I think OP wanted ⌘ and ⌥ spelled out (command and option respectively)
  - legierski 14y ago
    right-click -> inspect element should work everywhere
- ddadams10 14y ago
  This is command + option + J If you're using a windows keyboard, this should be the windows key + alt + J
  - tracker1 14y ago
    ctrl + shift + j in chrome for windows (or simply F12)
- D9u 14y ago
  On FreeBSD 9x it was Ctrl + Shift + i, so I inferred that what I initially thought was a lower case "L" was actually an upper case "I." (the Shift)
  - baddox 14y ago
    That was the first thing I tried, but apparently that opens Mail for some reason.
solox3 14y ago
Cool find aside, it must degrade gracefully on a non-Chrome console. Edit: also, try log('this is code: `a =* `= b* == c`');
goodside 14y ago
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 14y ago
  You actually can get the line number of a caller in JS: https://github.com/eriwen/javascript-stacktrace https://github.com/eriwen/javascript-stacktrace
  - niggler 14y ago
    You can just parse (new Error).stack: var __LINE__ = (new Error).stack.split("\n")[1].match(/:([0-9]+):/)[1];
    - cristiantincu 14y ago
      `(new Error()).stack` is non-standard. But that’s a nice hack, nevertheless.
      - niggler 14y ago
        The underlying construct (console.log processing "%c" and styles) is nonstandard to begin with.
        cristiantincu 14y ago
        Yes. It will not break, though. Unless you’re running it on an old IE that doesn’t host the `window.console` object.
    - tracker1 14y ago
hpaavola 14y ago
It's missing "This site is best viewed in IE5"... Err, I mean Chrome, but it's the same.
- jakub_g 14y ago
  Works also in Firefox with Firebug (but not yet in native Firefox console). See [1] for a blog entry from Jan Odvarko. [1] http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/ http://www.softwareishard.com/blog/firebug/firebug-tip-style...
- coldtea 14y ago
  It's not supposed to be used everywhere. It's a developer tool for browsers that have the requisite developer tools support.
- jQueryIsAwesome 14y ago
  This "console"... IE5 didn't even have console... and event the current one IE haves is a joke compared to firefox or chrome.
  - g8oz 14y ago
    I think parent is referring to the bad old days of browser specific sites.
    - jQueryIsAwesome 14y ago
      The features of the console is not really a usability issue.
eranation 14y ago
Didn't know it's possible, I need to read Addy Osmani's posts more often (https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn)
publicfig 14y ago
Is there anything I need to get this to work? It doesn't work for me in OS X on Chrome 23
- afschwartz 14y ago
  Update to Chrome 26 (latest stable)
  - nevir 14y ago
    That's kinda surprising; WebKit's has had support for this for 6 months now: https://trac.webkit.org/browser/trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js?rev=130941 https://trac.webkit.org/browser/trunk/Source/WebCore/inspect... (I thought chromium was pretty quick to bump webkit revs)
nollidge 14y ago
If anybody else is wondering how this is possible: https://developers.google.com/chrome-developer-tools/docs/console#styling_console_output_with_css https://developers.google.com/chrome-developer-tools/docs/co...
suyash 14y ago
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 14y ago
  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 ;)
- nathan_f77 14y ago
  That's awesome!
tiwazz 14y ago
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?
- afschwartz 14y ago
  For this first pass I went with a markdown-like syntax. However, I'm not tied to it. Submit a PR here https://github.com/adamschwartz/log/pulls https://github.com/adamschwartz/log/pulls and we'll consider it if there is wide support.
- Skoofoo 14y ago
  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 14y ago
    AFAIR thunderbird used it
jastanton 14y ago
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 14y ago
Um, great, how am I supposed to trust the console if even logging in that one can be screwed up?
moron4hire 14y ago
This seems like a terrible idea. Another potential failure point for no good reason.
xer0x 14y ago
Holy crap that's beautiful. Thanks for showing this off.
remzisenel 14y ago
firefox 20.0 on mac osx 10.8.2, not working for me :(
jgalt212 13y ago
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-undefined-error-for-internet-explorer http://stackoverflow.com/questions/3326650/console-is-undefi... http://yuilibrary.com/yui/docs/console/ http://yuilibrary.com/yui/docs/console/

236 points by afschwartz 14y ago

deleted 14y ago

[deleted]

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 14y ago
Just updated the instructions: https://github.com/adamschwartz/log/commit/919f8ffac919f0183cb82c1455a1fd6a4455128c https://github.com/adamschwartz/log/commit/919f8ffac919f0183... Basically just open the javascript console.
- niggler 14y ago
  I think OP wanted ⌘ and ⌥ spelled out (command and option respectively)
- legierski 14y ago
  right-click -> inspect element should work everywhere
ddadams10 14y ago
This is command + option + J If you're using a windows keyboard, this should be the windows key + alt + J
- tracker1 14y ago
  ctrl + shift + j in chrome for windows (or simply F12)
D9u 14y ago
On FreeBSD 9x it was Ctrl + Shift + i, so I inferred that what I initially thought was a lower case "L" was actually an upper case "I." (the Shift)
- baddox 14y ago
  That was the first thing I tried, but apparently that opens Mail for some reason.

solox3 14y ago

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

goodside 14y ago

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 14y ago
You actually can get the line number of a caller in JS: https://github.com/eriwen/javascript-stacktrace https://github.com/eriwen/javascript-stacktrace
- niggler 14y ago
  You can just parse (new Error).stack: var __LINE__ = (new Error).stack.split("\n")[1].match(/:([0-9]+):/)[1];
  - cristiantincu 14y ago
    `(new Error()).stack` is non-standard. But that’s a nice hack, nevertheless.
    - niggler 14y ago
      The underlying construct (console.log processing "%c" and styles) is nonstandard to begin with.
      - cristiantincu 14y ago
        Yes. It will not break, though. Unless you’re running it on an old IE that doesn’t host the `window.console` object.
  - tracker1 14y ago

hpaavola 14y ago

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

jakub_g 14y ago
Works also in Firefox with Firebug (but not yet in native Firefox console). See [1] for a blog entry from Jan Odvarko. [1] http://www.softwareishard.com/blog/firebug/firebug-tip-styled-logging/ http://www.softwareishard.com/blog/firebug/firebug-tip-style...
coldtea 14y ago
It's not supposed to be used everywhere. It's a developer tool for browsers that have the requisite developer tools support.
jQueryIsAwesome 14y ago
This "console"... IE5 didn't even have console... and event the current one IE haves is a joke compared to firefox or chrome.
- g8oz 14y ago
  I think parent is referring to the bad old days of browser specific sites.
  - jQueryIsAwesome 14y ago
    The features of the console is not really a usability issue.

eranation 14y ago

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

publicfig 14y ago

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

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

nollidge 14y ago

If anybody else is wondering how this is possible: https://developers.google.com/chrome-developer-tools/docs/console#styling_console_output_with_css https://developers.google.com/chrome-developer-tools/docs/co...

suyash 14y ago

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 14y ago
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 ;)
nathan_f77 14y ago
That's awesome!

tiwazz 14y ago

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?

afschwartz 14y ago
For this first pass I went with a markdown-like syntax. However, I'm not tied to it. Submit a PR here https://github.com/adamschwartz/log/pulls https://github.com/adamschwartz/log/pulls and we'll consider it if there is wide support.
Skoofoo 14y ago
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 14y ago
  AFAIR thunderbird used it

jastanton 14y ago

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 14y ago

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

moron4hire 14y ago

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

xer0x 14y ago

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

remzisenel 14y ago

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

jgalt212 13y ago

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-undefined-error-for-internet-explorer http://stackoverflow.com/questions/3326650/console-is-undefi... http://yuilibrary.com/yui/docs/console/ http://yuilibrary.com/yui/docs/console/