8

Pretty useless question, I guess, but it's really interesting to find out how facebook prints to browser console without reference to the script. Open the console at facebook.com and you will see text, but won't see the reference to th javascript...

enter image description here

Prosto Trader
  • 3,471
  • 3
  • 31
  • 52
  • 1
    You can override JS functions simply be redefining them. `console.log = function(){ /* whatever magic you want */ }` – Lix Aug 30 '14 at 22:18
  • yep, I can, but I just want to output text to console, but without reference. what should I override it to? – Prosto Trader Aug 30 '14 at 22:21
  • You might need to look into the source code of the dev tools console for that... You can right click and "inspect element" on the tool pane to learn more :) – Lix Aug 30 '14 at 22:22
  • you mean look in the sourcecode of the browser? because console.log is native browser function – Prosto Trader Aug 30 '14 at 22:23
  • No - not the browser souce - just the dev tools source. After all, it's that code that renders the console's output. – Lix Aug 30 '14 at 22:26
  • sorry, I can't get what you mean by saying 'inspect element on the toolpane' - how do I find code that renders to console? – Prosto Trader Aug 30 '14 at 22:29
  • 1
    @ProstoTrader It's not a useless question. Actually I am interested in the answer too..It's quite interesting how they did it. – Ani Aug 30 '14 at 22:30
  • 1
    @ProstoTrader - All you have to do is make sure that the dev tools are in a detached window and you can inspect the inspector :) Check out this post for more info: http://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome – Lix Aug 30 '14 at 22:34
  • 1
    wow! didn't know we can inspect the inspector ))) simply changing css we can hide reference ))) #console-messages .link, #console-messages a { color: transparent; cursor: pointer; } – Prosto Trader Aug 30 '14 at 22:41
  • but that's not what facebook did - they don't have reference at all probably they rewrited js...trying to find where it's hidden – Prosto Trader Aug 30 '14 at 22:43
  • @ProstoTrader Actually i dont know how did you get that message in your log above , normally when i log FB , my console is clear !! – ProllyGeek Aug 30 '14 at 22:44
  • 1
    @ProllyGeek You don't have to log in. Just go the fb url and inspect – Ani Aug 30 '14 at 22:45
  • 1
    well, it might depend on county I guess – Prosto Trader Aug 30 '14 at 22:45
  • @ProstoTrader no actually it really depends if you are logged in or not , after logging out , the message appeared in my console. – ProllyGeek Aug 30 '14 at 22:47
  • well, I'm logged and I see the message )) – Prosto Trader Aug 30 '14 at 22:49
  • @ProstoTrader from what i see it only happens with chrome , and the source is not shown , actually because chrome doesnt know what file produces this message (source file) proven when i awnt to filter the console , it shows filter from undefined ! – ProllyGeek Aug 31 '14 at 00:17
  • @ProllyGeek - but HOW they hide the source file? I've tried searching all sources for the frase and it's not there.... – Prosto Trader Aug 31 '14 at 08:50

2 Answers2

7

Well, friend of my friend found the answer.

To console.log without reference we should use setTimout and bind

setTimeout(console.log.bind(console, 'test'));

And here is the whole facebook snippet:

    var i = "Stop!",
        j = "This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or \"hack\" someone's account, it is a scam and will give them access to your Facebook account.";

if ((window.chrome || window.safari)) {
var l = 'font-family:helvetica; font-size:20px; ';
[
   [i, l + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'],
   [j, l],
   ['', '']
].map(function(r) {
    setTimeout(console.log.bind(console, '\n%c' + r[0], r[1]));
});
}
Prosto Trader
  • 3,471
  • 3
  • 31
  • 52
  • wow ! this is really unexpected , wonder why facebook devs did so though ? – ProllyGeek Aug 31 '14 at 14:20
  • 1
    I can understand why, but I can't really understand how they got to it. Probavly one of them worket on webInspector previously and knew that bug – Prosto Trader Aug 31 '14 at 14:58
  • `if ((window.chrome || window.safari))` is useless because it works for example also on firefox. – Zibri Aug 08 '19 at 11:22
0

More generic function.
If run with () instead of ("Your title here","Your text here")
it will display the default message. 

((title,message)=>{
    var i = title || "Stop!"
      , j = message || "This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or \"hack\" someone's account, it is a scam and will give them access to your Facebook account.";

    var l = 'font-family:helvetica; font-size:20px; ';
    [[i, l + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'], [j, l], ['', '']].map(function(r) {
        setTimeout(console.log.bind(console, '\n%c' + r[0], r[1]));
    });
})("Your title here","Your text here")

or directly:

console.alert = function(title, message) {
  var i = title || "Stop!",
    j = message || "This is a browser feature intended for developers. If someone told you to copy-paste something here to enable a Facebook feature or \"hack\" someone's account, it is a scam and will give them access to your Facebook account.";

  var l = 'font-family:helvetica; font-size:20px; ';
  [
    [i, l + 'font-size:50px; font-weight:bold; ' + 'color:red; -webkit-text-stroke:1px black;'],
    [j, l],
    ['', '']
  ].map(function(r) {
    setTimeout(console.log.bind(console, '\n%c' + r[0], r[1]));
  });
}

and

console.alert("Hello", "You can write what you like here!")
Zibri
  • 9,096
  • 3
  • 52
  • 44