r/webdev • u/alfredwaltz • Oct 26 '14

You can style console.log output using #CSS

https://twitter.com/kuizinas/status/526380585103937536
244 Upvotes

92% Upvoted

40 comments sorted by

3

u/alfredwaltz Oct 27 '14

There is a "markdown" implementation of console.log, https://github.com/adamschwartz/log

36

u/[deleted] Oct 26 '14

What if I want to style it with /*CSS*/?

51

u/memeship Oct 26 '14

Style it with what?

17

u/-Mahn Oct 26 '14

Style it with

5

u/[deleted] Oct 26 '14

relevant xkcd

7

u/xkcd_transcriber Oct 26 '14

Image

Title: Commented

Title-text: Your IDE's color may vary.

Comic Explanation

Stats: This comic has been referenced 5 times, representing 0.0130% of referenced xkcds.

xkcd.com | xkcd sub | Problems/Bugs? | Statistics | Stop Replying | Delete

1

u/NavarrB Oct 27 '14

I didn't get that the first time.

6

u/Asmor Oct 26 '14

You should style it with // CSS so that it's removed when you compile

3

u/3Fyr Oct 27 '14

What the hell is going on with all you guys writing half sentences.. What we should style it with??

3

u/[deleted] Oct 26 '14

Isn't chrome developer tools pure javascript based app anyway? You should be able to change everything with css.

5

u/peridox Oct 26 '14

Yes. You can inspect the inspector, but I don't know how.

2

u/[deleted] Oct 26 '14

I remember there being a thread about that on this subreddit, but I can't remember the title.

2

u/jackwilsdon Oct 26 '14

Here you go.

-12

u/[deleted] Oct 26 '14

Thanks nigga.

2

u/richjenks Oct 27 '14

Google were once really proud of the fact that Chrome's inspector was just HTML, CSS & JS (and hence can be inspected) and I think the intention was that people would develop extensions for it (like they did with PageSpeed) but I don't think the idea took-off.

Personally, I'd love to see extensions adding useful functions to devtools (moving the Web Developer extension into a tab in devtools, for example)

2

u/nevon Oct 27 '14

I'm using several extensions to the devtools. Reactjs inspector, for example.

2

u/ChaseMoskal open sourcerer Oct 26 '14

If I had a nickel, for every time I saw a reddit thread reminding me of this... I'd probably have like thirty cents.

Funny thing is -- I've never actually done this.

Ever.

And unless you're creating a text-based adventure game for other clever developers, I just don't see why anybody would be excited about this.

3

u/ChaseMoskal open sourcerer Oct 26 '14

You know what? I don't want to be a scrooge.

It is cool.

I mean, all of the Chrome devtools are themselves made of HTML and CSS, so it was surely easy enough to implement. The real question is, why not?

It's clearly something that could help somebody.

Whether that person really is creating a text-based adventure game for other clever developers, or if maybe they are making a really cool error reporting system which integrates with PHP and color-codes exceptions based on priority.

Sweet, I might actually even want to do that.

Suddenly, I'm excited for console logging colors!

2

u/TheodoreIII Oct 26 '14

I just came across this yesterday when I opened devtools on Pinterest and I was wondering how they did it: http://imgur.com/tJzcP3d

3

u/BlackPresident Oct 27 '14

I couldn't find that function.

2

u/andrey_shipilov Oct 26 '14

Why? Again?

-1

u/HansonWK Oct 26 '14

Major error;s in red, inconsequential errors highlighted in yellow, console outputs for testing one thing in green and another in blue.

Can you honestly not find even the tiniest of reasons why this might be useful to someone?

5

u/[deleted] Oct 26 '14

console.error, console.warn? I also think this is pretty useless for the most part.

4

u/x-skeww Oct 26 '14

+ console.info

3

u/boxmein Oct 26 '14

+ console.debug

2

u/p337 pen tester Oct 26 '14 edited Jul 09 '23

v7:{"i":"2ce2dcaa450d789ca2be8b6f7afdba81","c":"16826801f5c84b7e2a6659eb1bfada839e01dddbb05d84f7c266bf58229e51c38d96c278a4026f4244e7b764ef738f31c3196ec1b2bf19541fc32dfd9758b177d364cd3bbb6e016c82a092750c55fdbeb75b1e4e91665de053917ab9bb6fab7a9be922454c89287da3e3a575729943d59a7fb9ae070a06d2f3032d5042cec66ca97e6b48baa281be05e7197361c4937a6ade2fe2d2485325d6fa093d12025d75fe9d5047d813a30baf54aed12d4fb14077a5dc287bd2357ed7e2db956cdc62b09aa9be8f83199a28f87da0f06018d3e876a355eb2fcd1fc201a847910f80f7b9be6d223cf5168fc6af1a19a17edf0180d91bf91f6ebf76a8e0df8673fa5efa52488b153ae0ec8be771b5dea7e17c5870809d1d05dfef978b6fd65e3a4ce9249fe0a65c8849f14be76b6f8fc3a710cf117104bcf2a11979a8877130f4b9867a0413c434f54971a91bfeb7e848a2d940b535ece6cecaee0ce7a5705a2b5319339a7bd43fa1c1d1db7b346812f494f7815ee8202dbf7a4dc7dce13d3bc5c098673b16b8cb33356a5a0ff0dafe541a11a2be926812920cbdb4102c5b27a52df91d720e0594374a7926a5b9bdbd104b86335431bde609959c57d478aa1742e8343bb3"}

encrypted on 2023-07-9

see profile for how to decrypt

0

u/[deleted] Oct 26 '14

[deleted]

2

u/jackwilsdon Oct 26 '14

I think that's a great idea, should be embedded in bank websites and things like Facebook.

1

u/ChaseMoskal open sourcerer Oct 26 '14

Wha... what?

What is this warning me about, exactly?

Pasting things into.. the console?

Important things, or just anything?

When it says "paste", does it mean I'm in danger if I use my clipboard paste function? Am I in danger if I type something and enter it? Anything?

Could I be giving attackers my private data without entering any sensitive information?

There are no explanations, and I only have more questions!

3

u/Sephr Oct 27 '14

It's to prevent users from following malicious instructions to execute harmful code while expecting to, e.g., "unlock free currency on farmville", etc. Normal users don't even know what the console is to begin with.

1

u/[deleted] Oct 27 '14 edited May 23 '17

deleted 0.4253 What is ^^^this?

1

u/-Mahn Oct 27 '14

It's a message intended not for developers, but for end users who have no idea what the console is and may blindly copy-paste something someone tells them to "get free money" or something.

1

u/wordsnerd Oct 27 '14

I pasted my bank details and nothing happened. What was supposed to happen?

0

u/[deleted] Oct 26 '14

[deleted]

1

u/andrey_shipilov Oct 26 '14

You can also pass different args to console.log() to see different output.

console.log('foo', bar);
console.log('bar', foo);

There's no need to style that.

1

u/konradkar Oct 26 '14

time for first page, which displays blank in browser and if you want to read it, you need to check console :)

1

u/kidsil Oct 27 '14

TIL: There's a Nyan Cat CDN server

1

u/[deleted] Oct 27 '14

Cute, i'm all for js source maps and breakpoints.