3

If one goes to Facebook and opens the console they'll see input such as this:

enter image description here

How does Facebook achieve this styled text? Also, unlike a normal console.log, etc. there is no script.js:123 reference in the console. This is Chrome 56.

Kara
  • 5,650
  • 15
  • 48
  • 55
Mooseman
  • 18,150
  • 12
  • 67
  • 91
  • 1
    http://stackoverflow.com/a/13017382/340760 – BrunoLM Nov 01 '16 at 23:40
  • 1
    Here is a similar question with an answer from the guy who created it: http://stackoverflow.com/a/21693931/746736 – Turnip Nov 01 '16 at 23:42
  • After literally 3 hours on this, all I've come up with is ugly CSS hacks and `eval("function foo(){console.log('Blah blah blah');} foo();//# sourceURL=."); `... but I have learnt loads of cool things after having actually read a ridiculous amount of MDN's documentation... ha... who knew... Oh, and Facebook still has the source URL for me, so my guess is some option in Chrome (but we don't really want that now, do we ;)). Good luck, I'll come back to this... – Eugene Nov 02 '16 at 02:32

1 Answers1

2

Please Refer to this for examples on how to add colors to console: Colors in JavaScript console

In short :

With Chrome & Firefox (+31) you can add CSS in JS console.log() messages:

 console.log('%c Oh my heavens! ', 'background: #222; color: #bada55');

enter image description here

Community
  • 1
  • 1
CriCri
  • 183
  • 1
  • 10
  • 1
    I initially marked this question as a duplicate of the one you reference but it doesn't answer the question of why there is no script reference – Turnip Nov 01 '16 at 23:41
  • You could always create the JS in the server side and log as a console log which would not create any references if the JS is created and logged dynamically. It would involve many more steps, but can be done – CriCri Nov 01 '16 at 23:46