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

你只需要异步/推迟console.log调用，例如

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);