41

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

fb 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: norm 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?

2

2 Answers 2

34

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

setTimeout(console.log.bind(console, '%cFoo', 'color: #FF00FF;'), 0);
3
  • In FF, this makes the source display as <unknown>.
    – Thilo
    Commented Dec 11, 2014 at 4:06
  • @Thilo OP's screenshots look like Chrome
    – Paul S.
    Commented Dec 11, 2014 at 4:12
  • 4
    If you just want a big message you can simplify by putting all the css in one line like @PaulS. , e.g. console.log("%cHi from dnldr", "font-size: 100px;" ) Commented Jun 8, 2017 at 10:39
4

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.