How does Facebook log to console like this?

Question

I was inspecting stuff, as you do, and came across this interesting thing on facebook.

^{View Full Image}

I understand that is completely do-able with something similar to this:

var cssRule =     "color: rgb(249, 162, 34);" +     "font-size: 60px;" +     "font-weight: bold;" +     "text-shadow: 1px 1px 5px rgb(249, 162, 34);" +     "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);"; console.log("%cHello World", cssRule); 

^Source

My main question is, How do they stop the showing of the file.js:line_numer that you always get on the right hand side in console?

With the above code, you would see this: ^{View Full Image}

Do you notice the red circle? But in facebooks example, they don't display that information. I've looked through the Web.Console API on Mozilla (Link), so does anybody possibly know how to exclude that specific peice of information?

Answer 1

You just have to async/defer the console.log call, e.g.

setTimeout(console.log.bind(console, '%cFoo', 'color: #FF00FF;'), 0); 

Answer 2

Even though I joined the party late but I think this will do!

    var cssRule =     "color: rgb(249, 162, 34);" +     "font-size: 30px;" +     "font-weight: bold;" +     "text-shadow: 1px 1px 5px rgb(249, 162, 34);" +     "filter: dropshadow(color=rgb(249, 162, 34), offx=1, offy=1);" setTimeout(console.log.bind(console, "%cHello World", cssRule), 0);