Hacker News Reader

Comment by schappim | Hacker News Reader

Be sure to checkout the cute message in your browser's console :)

Funny you found this! I was quite amazed what you could do with the styling, especially the support for background-image.

As soon as this got merged, I realized, just as yread points about below; the complication of tracking due to the ability to include url() tags. Would be fun exploring the complications of that.

Blame is on me for not testing it in multiple browsers but I kind of assumed it would break somewhere due to this relying on fairly experimental features. :)

So, that's you who add that console message. I've submitted a PR to remove the styling it breaks on many browsers (actually, it only works on Chrome-based browser).

I know that we can style console text (try open console in facebook when using Chrome), but only until today, I learn that we can also add image background. Thank you.

Interestingly, it doesn't work in Safari

It's also broken in Firefox Nightly (on Windows), and on Microsoft's own Edge.

IIRC, Edge Dev Tools is supposed to support more of it on Insider Builds. I'm not on an Insider build at work to verify, though.

It only works on Chrome-basedr browsers (Chrome, Opera, Vivaldi, Brave). AFAIK

Works fine if you have developer tools enabled (advanced tab) and open java-script console window. End up with a multi-colored block (orange, green, and black for me) with the link in the middle.

That's not what it is supposed to end up with. It's supposed to end up with a big Windows logo on a black background, with a message below that, and the link at the bottom.

Here is a screenshot showing what it looks like in Chrome on the left and Safari on the right: https://imgur.com/gpSMx44

Firefox 62.0b9 is similar to Safari, except the blocks are all black instead of colored, and the relative dimensions are different.

Yes, thank you I love getting to the bottom of things. I tried disabling mine though and it still works. I think that's it for me though right now- could be a number of different things but I'm working on something else at the moment heh.

Works in my Safari desktop and iOS. Maybe it's because Microsoft fixed it in ~14 minutes or it's because I have a traditional art degree and my Safari just loads things differently ;)

It might have something to do with the fact that their script tag that encompasses the console.log is outside of the body tag.

Well spotted, I also didn't realise you could print such complex things in the console till I checked Discords out. That gave me a fright! Took me a while to realise that I was actually looking at the console.

I didn't know you could do that in the console...

Yep. Here's the line that prints it – open a new Chrome tab (ymmv w/ other browsers, definitely looks weird in Safari), open developer tools, and paste it into the console:

console.log("%c\t\t\t\t\t\t\t\t\t\t\t\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n Hi there! \n\nIt seems you like to poke around as much as we do.\n\nhttps://github.com/Microsoft/join-dev-design", "color: white; background-color: #080808; background-image: url(https://microsoft.github.io/join-dev-design/msft-square.svg)... background-size: 70%; background-position: 50% 25%; background-repeat: no-repeat; padding: 3em; text-align: center;font-size: 1.25em;");

wow I had no idea you can style console.log. You could add url()'s and track if people opened dev tools!

I knew I can style console but never put two and two together. For example, I’ve had to do this with google contacts just to read the actual error because the error on the website is too vague.

I know they can also track my every keystroke and cursor in their window but I somehow thought of right click -> inspect as not subject to tracking. I’m so much to learn.

Reply on news.ycombinator.com